diff --git a/vnext/src/Libraries/Text/Text.windows.js b/vnext/src/Libraries/Text/Text.windows.js index 7dd96de20de..b41bafce429 100644 --- a/vnext/src/Libraries/Text/Text.windows.js +++ b/vnext/src/Libraries/Text/Text.windows.js @@ -130,7 +130,6 @@ class TouchableText extends React.Component { } static viewConfig = viewConfig; - //static contextType = TextAncestor; render(): React.Node { let props = this.props; @@ -159,42 +158,66 @@ class TouchableText extends React.Component { // [Windows] // Due to XAML limitations, wrapping Text with a View in order to display borders. // Like other platforms, ignoring borders for nested Text (using the Context API to detect nesting). - let {margin, padding, ...rest} = - props.style != undefined - ? Array.isArray(props.style) - ? StyleSheet.flatten(props.style) - : props.style - : {}; - - let {style, ...textPropsLessStyle} = props; - return ( - {hasTextAncestor => - hasTextAncestor ? ( - - ) : props.style && - props.style.borderWidth && - props.style.borderColor ? ( - - - - - - ) : ( - - - - ) - } + {hasTextAncestor => { + if (hasTextAncestor) { + return ; + } else { + // View.js resets the TextAncestor, as a reportedly temporary change, + // in order to properly handle nested images inside on Android/iOS: + // https://github.com/facebook/react-native/commit/66601e755fcad10698e61d20878d52194ad0e90c. + // Windows doesn't currently support nesting a in a , so overriding this behavior here + // by seting the Provider inside View, doesn't affect us functionally. + if ( + props.style && + props.style.borderWidth && + props.style.borderColor + ) { + let { + margin, + marginBottom, + marginEnd, + marginHorizontal, + marginLeft, + marginRight, + marginStart, + marginTop, + marginVertical, + padding, + ...rest + } = + props.style != undefined + ? Array.isArray(props.style) + ? StyleSheet.flatten(props.style) + : props.style + : {}; + + let {style, ...textPropsLessStyle} = props; + + return ( + + + + + + ); + } else { + return ( + + + + ); + } + } + }} ); - // [/Windows] - } + } // [/Windows] _createResponseHandlers(): ResponseHandlers { return { @@ -286,8 +309,6 @@ class TouchableText extends React.Component { } } -//TouchableText.contextType = TextAncestor; - const isTouchable = (props: Props): boolean => props.onPress != null || props.onLongPress != null || diff --git a/vnext/src/RNTester/js/examples-win/Text/TextExample.windows.tsx b/vnext/src/RNTester/js/examples-win/Text/TextExample.windows.tsx index d8cca38a191..1a7b098d80b 100644 --- a/vnext/src/RNTester/js/examples-win/Text/TextExample.windows.tsx +++ b/vnext/src/RNTester/js/examples-win/Text/TextExample.windows.tsx @@ -592,8 +592,12 @@ export class TextExample extends React.Component<{}> { <> + + Sample bordered text with default styling. + + - Igor bordered {'\n'} + Some more bordered text + a tad of CSS.{'\n'} 1st nested - border specifcied but ignored.{'\n'} @@ -602,21 +606,11 @@ export class TextExample extends React.Component<{}> { - - This text is{' '} - - outlined - - and laid out within the normal text run, so will wrap etc as - normal text. - - This text is{' '} - outlined + outlined{' '} and laid out within the normal text run, so will wrap etc as normal text. @@ -650,6 +644,12 @@ export const styles = StyleSheet.create({ borderColor: 'green', padding: 30, }, + borderedTextSimple: { + fontSize: 18, + borderWidth: 2, + borderColor: 'black', + width: 400, + }, }); export const displayName = (_undefined?: string) => {};