Add default "overflow: visible" to Text

iOS and Android both historically clip everything outside the bounds of the paragraph/top-level text element. This includes clipping content, when `line-height` would set the bounds to be smaller than the text to be drawn. This is equivalent to setting `overflow: 'hidden'` manually on a paragraph.

Changing this default behavior in React Native is scary and breaking, but with Facsimile, it can be controlled with opt-in `overflow: visible`, for web style clipping.

Let's set default `overflow: 'visible'`, so that when using web interface, we don't clip the bounds of text (like web doesn't).

Author: NickGerleman

package-lock.json

@@ -98,6 +98,13 @@ export function createStrictDOMTextComponent<T, P: StrictProps>(
       disableUserSelect ? { userSelect: 'none' } : null
     );
 
+    // Native components historically clip text. Opt into web-style default of
+    // visible overflow by default
+    if (nativeProps.style?.overflow == null) {
+      nativeProps.style = nativeProps.style ?? {};
+      nativeProps.style.overflow = 'visible';
+    }
+
     // Use Animated components if necessary
     if (nativeProps.animated === true) {
       NativeComponent = ReactNative.Animated.Text;

packages/react-strict-dom/src/native/modules/createStrictDOMTextComponent.js

@@ -44,6 +44,7 @@ exports[`<compat.native> "as" equals "span": as=span 1`] = `
   style={
     {
       "color": "blue",
+      "overflow": "visible",
       "userSelect": "none",
     }
   }
@@ -85,6 +86,7 @@ exports[`<compat.native> nested: nested 1`] = `
       {
         "boxSizing": "content-box",
         "color": "red",
+        "overflow": "visible",
         "position": "static",
       }
     }

packages/react-strict-dom/tests/compat/__snapshots__/compat-test.native.js.snap

@@ -6,6 +6,7 @@ exports[`<contexts.*> <ThemeProvider> css variable declaration inside a media qu
   style={
     {
       "boxSizing": "content-box",
+      "overflow": "visible",
       "position": "static",
       "width": 42,
     }
@@ -20,6 +21,7 @@ exports[`<contexts.*> <ThemeProvider> defines global custom properties 1`] = `
     style={
       {
         "boxSizing": "content-box",
+        "overflow": "visible",
         "position": "static",
       }
     }
@@ -33,6 +35,7 @@ exports[`<contexts.*> <ThemeProvider> defines global custom properties 1`] = `
         "backgroundColor": "red",
         "boxSizing": "content-box",
         "color": "red",
+        "overflow": "visible",
         "position": "static",
       }
     }
@@ -50,6 +53,7 @@ exports[`<contexts.*> <ThemeProvider> kebab case string var to camel case 1`] =
       {
         "boxSizing": "content-box",
         "color": "red",
+        "overflow": "visible",
         "position": "static",
       }
     }
@@ -60,6 +64,7 @@ exports[`<contexts.*> <ThemeProvider> kebab case string var to camel case 1`] =
       {
         "boxSizing": "content-box",
         "color": "red",
+        "overflow": "visible",
         "position": "static",
       }
     }
@@ -113,6 +118,7 @@ exports[`<contexts.*> <ThemeProvider> rgb(a) function with args applied through
       {
         "boxSizing": "content-box",
         "color": "rgb(24, 48, 96)",
+        "overflow": "visible",
         "position": "static",
       }
     }
@@ -123,6 +129,7 @@ exports[`<contexts.*> <ThemeProvider> rgb(a) function with args applied through
       {
         "boxSizing": "content-box",
         "color": "rgba(24, 48, 96, 0.5)",
+        "overflow": "visible",
         "position": "static",
       }
     }
@@ -137,6 +144,7 @@ exports[`<contexts.*> <ThemeProvider> rgba function with args applied through mu
     {
       "boxSizing": "content-box",
       "color": "rgba(255, 96, 16, 0.42)",
+      "overflow": "visible",
       "position": "static",
     }
   }
@@ -151,6 +159,7 @@ exports[`<contexts.*> <ThemeProvider> string var 1`] = `
       "boxSizing": "content-box",
       "color": "red",
       "opacity": 0.25,
+      "overflow": "visible",
       "position": "static",
     }
   }
@@ -164,6 +173,7 @@ exports[`<contexts.*> <ThemeProvider> string var and falls back to a default val
     {
       "boxSizing": "content-box",
       "color": "rgb(255,255,255)",
+      "overflow": "visible",
       "position": "static",
     }
   }
@@ -177,6 +187,7 @@ exports[`<contexts.*> <ThemeProvider> string var and falls back to default value
     {
       "boxSizing": "content-box",
       "color": "red",
+      "overflow": "visible",
       "position": "static",
     }
   }
@@ -217,6 +228,7 @@ exports[`<contexts.*> <ThemeProvider> string var with a default value 1`] = `
       {
         "boxSizing": "content-box",
         "color": "red",
+        "overflow": "visible",
         "position": "static",
       }
     }
@@ -227,6 +239,7 @@ exports[`<contexts.*> <ThemeProvider> string var with a default value 1`] = `
       {
         "boxSizing": "content-box",
         "color": "blue",
+        "overflow": "visible",
         "position": "static",
       }
     }
@@ -242,6 +255,7 @@ exports[`<contexts.*> <ThemeProvider> string var with a default value containing
       {
         "boxSizing": "content-box",
         "color": "rgb(0,0,0)",
+        "overflow": "visible",
         "position": "static",
       }
     }
@@ -252,6 +266,7 @@ exports[`<contexts.*> <ThemeProvider> string var with a default value containing
       {
         "boxSizing": "content-box",
         "color": "rgb(1 , 1 , 1)",
+        "overflow": "visible",
         "position": "static",
       }
     }
@@ -265,6 +280,7 @@ exports[`<contexts.*> <ThemeProvider> textShadow with nested/multiple vars 1`] =
   style={
     {
       "boxSizing": "content-box",
+      "overflow": "visible",
       "position": "static",
       "textShadowColor": "red",
       "textShadowOffset": {
@@ -283,6 +299,7 @@ exports[`<contexts.*> <ThemeProvider> transform with nested/multiple vars 1`] =
   style={
     {
       "boxSizing": "content-box",
+      "overflow": "visible",
       "position": "static",
       "transform": [
         {

packages/react-strict-dom/tests/contexts/__snapshots__/contexts-ThemeProvider-test.native.js.snap

@@ -30,6 +30,7 @@ exports[`<contexts.*> <ViewportProvider> all CSS lengths are scaled according to
         "boxSizing": "content-box",
         "fontSize": 24,
         "lineHeight": 24,
+        "overflow": "visible",
         "position": "static",
       }
     }
@@ -42,6 +43,7 @@ exports[`<contexts.*> <ViewportProvider> all CSS lengths are scaled according to
       {
         "boxSizing": "content-box",
         "fontSize": 18,
+        "overflow": "visible",
         "position": "static",
       }
     }

packages/react-strict-dom/tests/contexts/__snapshots__/contexts-ViewportProvider-test.native.js.snap

@@ -6,6 +6,7 @@ exports[`css.create(): @media query does not match (prefers-color-scheme: dark)
   "borderColor": "green",
   "boxSizing": "content-box",
   "color": "black",
+  "overflow": "visible",
   "position": "static",
 }
 `;
@@ -16,6 +17,7 @@ exports[`css.create(): @media query does not match (prefers-color-scheme: light)
   "borderColor": "darkgreen",
   "boxSizing": "content-box",
   "color": "white",
+  "overflow": "visible",
   "position": "static",
 }
 `;
@@ -26,6 +28,7 @@ exports[`css.create(): @media query matches (prefers-color-scheme: dark) 1`] = `
   "borderColor": "darkgreen",
   "boxSizing": "content-box",
   "color": "white",
+  "overflow": "visible",
   "position": "static",
 }
 `;
@@ -36,6 +39,7 @@ exports[`css.create(): @media query matches (prefers-color-scheme: light) 1`] =
   "borderColor": "green",
   "boxSizing": "content-box",
   "color": "black",
+  "overflow": "visible",
   "position": "static",
 }
 `;