Fix nested Text inside borders not working because of upstream RN cha…

…nge in View.js
microsoft · Sep 1, 2020 · 4d8c70e · 4d8c70e
1 parent c3df011
commit 4d8c70e
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 47 deletions.
diff --git 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<Props, State> {
   }
 
   static viewConfig = viewConfig;
-  //static contextType = TextAncestor;
 
   render(): React.Node {
     let props = this.props;
@@ -159,42 +158,66 @@ class TouchableText extends React.Component<Props, State> {
     // [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 (
       <TextAncestor.Consumer>
-        {hasTextAncestor =>
-          hasTextAncestor ? (
-            <RCTVirtualText {...props} ref={props.forwardedRef} />
-          ) : props.style &&
-            props.style.borderWidth &&
-            props.style.borderColor ? (
-            <TextAncestor.Provider value={true}>
-              <View style={props.style}>
-                <RCTText
-                  style={rest}
-                  {...textPropsLessStyle}
-                  ref={props.forwardedRef}
-                />
-              </View>
-            </TextAncestor.Provider>
-          ) : (
-            <TextAncestor.Provider value={true}>
-              <RCTText {...props} ref={props.forwardedRef} />
-            </TextAncestor.Provider>
-          )
-        }
+        {hasTextAncestor => {
+          if (hasTextAncestor) {
+            return <RCTVirtualText {...props} ref={props.forwardedRef} />;
+          } else {
+            // View.js resets the TextAncestor, as a reportedly temporary change,
+            // in order to properly handle nested images inside <Text> on Android/iOS:
+            // https://github.com/facebook/react-native/commit/66601e755fcad10698e61d20878d52194ad0e90c.
+            // Windows doesn't currently support nesting a <View> in a <Text>, 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 (
+                <View style={props.style}>
+                  <TextAncestor.Provider value={true}>
+                    <RCTText
+                      style={rest}
+                      {...textPropsLessStyle}
+                      ref={props.forwardedRef}
+                    />
+                  </TextAncestor.Provider>
+                </View>
+              );
+            } else {
+              return (
+                <TextAncestor.Provider value={true}>
+                  <RCTText {...props} ref={props.forwardedRef} />
+                </TextAncestor.Provider>
+              );
+            }
+          }
+        }}
       </TextAncestor.Consumer>
     );
-    // [/Windows]
-  }
+  } // [/Windows]
 
   _createResponseHandlers(): ResponseHandlers {
     return {
@@ -286,8 +309,6 @@ class TouchableText extends React.Component<Props, State> {
   }
 }
 
-//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
@@ -592,8 +592,12 @@ export class TextExample extends React.Component<{}> {
 
         <RNTesterBlock title="Text With Border">
           <>
+            <Text style={styles.borderedTextSimple}>
+              Sample bordered text with default styling.
+            </Text>
+
             <Text style={styles.borderedText}>
-              Igor bordered {'\n'}
+              Some more bordered text + a tad of CSS.{'\n'}
               <Text style={{borderColor: 'red', borderWidth: 5}}>
                 1st nested - border specifcied but ignored.{'\n'}
                 <Text style={{borderColor: 'yellow', borderWidth: 4}}>
@@ -602,21 +606,11 @@ export class TextExample extends React.Component<{}> {
               </Text>
             </Text>
 
-            <Text style={styles.borderedText}>
-              This text is{' '}
-              <Text
-                style={{color: 'red', borderWidth: 1, borderColor: 'black'}}>
-                outlined
-              </Text>
-              and laid out within the normal text run, so will wrap etc as
-              normal text.
-            </Text>
-
             <Text>
               This text is{' '}
               <Text
                 style={{color: 'red', borderWidth: 1, borderColor: 'black'}}>
-                outlined
+                outlined{' '}
               </Text>
               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) => {};