fix: Surface to correctly set start and end on iOS (#3571)

Fixes #3542
callstack · Jan 9, 2023 · 5cc7511 · 5cc7511
1 parent 0896b2e
commit 5cc7511
Show file tree

Hide file tree

Showing 18 changed files with 262 additions and 2 deletions.
diff --git a/src/components/Surface.tsx b/src/components/Surface.tsx
@@ -218,10 +218,10 @@ const Surface = React.forwardRef<View, Props>(
 
     const shadowColor = '#000';
 
-    const { position, alignSelf, top, left, right, bottom, ...restStyle } =
+    const { position, alignSelf, top, left, right, bottom, start, end, ...restStyle } =
       (StyleSheet.flatten(style) || {}) as ViewStyle;
 
-    const absoluteStyles = { position, alignSelf, top, right, bottom, left };
+    const absoluteStyles = { position, alignSelf, top, right, bottom, left, start, end };
     const sharedStyle = [{ backgroundColor }, restStyle];
 
     if (isAnimatedValue(elevation)) {

diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap
@@ -7,6 +7,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
     Object {
       "alignSelf": undefined,
       "bottom": undefined,
+      "end": undefined,
       "left": undefined,
       "position": undefined,
       "right": undefined,
@@ -17,6 +18,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
       },
       "shadowOpacity": 0,
       "shadowRadius": 0,
+      "start": undefined,
       "top": undefined,
     }
   }
@@ -57,6 +59,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
           Object {
             "alignSelf": undefined,
             "bottom": undefined,
+            "end": undefined,
             "left": undefined,
             "position": undefined,
             "right": undefined,
@@ -67,6 +70,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
             },
             "shadowOpacity": 0.15,
             "shadowRadius": 3,
+            "start": undefined,
             "top": undefined,
           }
         }
@@ -102,6 +106,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                 Object {
                   "alignSelf": undefined,
                   "bottom": undefined,
+                  "end": undefined,
                   "left": undefined,
                   "position": undefined,
                   "right": undefined,
@@ -112,6 +117,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                   },
                   "shadowOpacity": 0,
                   "shadowRadius": 0,
+                  "start": undefined,
                   "top": undefined,
                 }
               }
@@ -275,6 +281,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                   Object {
                     "alignSelf": undefined,
                     "bottom": undefined,
+                    "end": undefined,
                     "left": undefined,
                     "position": undefined,
                     "right": undefined,
@@ -285,6 +292,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                     },
                     "shadowOpacity": 0,
                     "shadowRadius": 0,
+                    "start": undefined,
                     "top": undefined,
                   }
                 }
@@ -425,6 +433,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
     Object {
       "alignSelf": undefined,
       "bottom": undefined,
+      "end": undefined,
       "left": undefined,
       "position": undefined,
       "right": undefined,
@@ -435,6 +444,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
       },
       "shadowOpacity": 0,
       "shadowRadius": 0,
+      "start": undefined,
       "top": undefined,
     }
   }
@@ -475,6 +485,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
           Object {
             "alignSelf": undefined,
             "bottom": undefined,
+            "end": undefined,
             "left": undefined,
             "position": undefined,
             "right": undefined,
@@ -485,6 +496,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
             },
             "shadowOpacity": 0,
             "shadowRadius": 0,
+            "start": undefined,
             "top": undefined,
           }
         }
@@ -725,6 +737,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
           Object {
             "alignSelf": undefined,
             "bottom": undefined,
+            "end": undefined,
             "left": undefined,
             "position": undefined,
             "right": undefined,
@@ -735,6 +748,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
             },
             "shadowOpacity": 0,
             "shadowRadius": 0,
+            "start": undefined,
             "top": undefined,
           }
         }

diff --git a/src/components/__tests__/Card/__snapshots__/Card.test.js.snap b/src/components/__tests__/Card/__snapshots__/Card.test.js.snap
@@ -7,6 +7,7 @@ exports[`Card renders an outlined card 1`] = `
     Object {
       "alignSelf": undefined,
       "bottom": undefined,
+      "end": undefined,
       "left": undefined,
       "position": undefined,
       "right": undefined,
@@ -17,6 +18,7 @@ exports[`Card renders an outlined card 1`] = `
       },
       "shadowOpacity": 0,
       "shadowRadius": 0,
+      "start": undefined,
       "top": undefined,
     }
   }

diff --git a/src/components/__tests__/Surface.test.js b/src/components/__tests__/Surface.test.js
@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { Platform } from 'react-native';
 
 import { render } from '@testing-library/react-native';
 
@@ -12,4 +14,54 @@ describe('Surface', () => {
     );
     expect(getByTestId(testID).props.pointerEvents).toBe('box-none');
   });
+
+  describe('on iOS', () => {
+    Platform.OS = 'ios';
+    const style = StyleSheet.create({
+      absoluteStyles: {
+        bottom: 10,
+        end: 20,
+        left: 30,
+        position: 'absolute',
+        right: 40,
+        start: 50,
+        top: 60,
+        flex: 1,
+      },
+    });
+
+    it('should not render absolute position properties on the bottom layer', () => {
+      const testID = 'surface-test-bottom-layer';
+
+      const { getByTestId } = render(
+        <Surface testID={testID} style={style.absoluteStyles} />
+      );
+
+      expect(getByTestId(testID).props.style).toHaveProperty('flex');
+      expect(getByTestId(testID).props.style).toHaveProperty('backgroundColor');
+      expect(getByTestId(testID).props.style).not.toHaveProperty('bottom');
+      expect(getByTestId(testID).props.style).not.toHaveProperty('end');
+      expect(getByTestId(testID).props.style).not.toHaveProperty('left');
+      expect(getByTestId(testID).props.style).not.toHaveProperty('position');
+      expect(getByTestId(testID).props.style).not.toHaveProperty('right');
+      expect(getByTestId(testID).props.style).not.toHaveProperty('start');
+      expect(getByTestId(testID).props.style).not.toHaveProperty('top');
+    });
+
+    it('should render absolute position properties on shadow layer 0', () => {
+      const testID = 'surface-test-shadow-layer-0';
+
+      const { container } = render(
+        <Surface testID={testID} style={style.absoluteStyles} />
+      );
+
+      expect(container.props.style).toHaveProperty('bottom');
+      expect(container.props.style).toHaveProperty('end');
+      expect(container.props.style).toHaveProperty('left');
+      expect(container.props.style).toHaveProperty('position');
+      expect(container.props.style).toHaveProperty('right');
+      expect(container.props.style).toHaveProperty('start');
+      expect(container.props.style).toHaveProperty('top');
+    });
+  });
 });
diff --git a/src/components/__tests__/__snapshots__/AnimatedFAB.test.js.snap b/src/components/__tests__/__snapshots__/AnimatedFAB.test.js.snap
@@ -7,6 +7,7 @@ exports[`renders animated fab 1`] = `
     Object {
       "alignSelf": undefined,
       "bottom": undefined,
+      "end": undefined,
       "left": undefined,
       "position": "absolute",
       "right": undefined,
@@ -17,6 +18,7 @@ exports[`renders animated fab 1`] = `
       },
       "shadowOpacity": 0.15,
       "shadowRadius": 8,
+      "start": undefined,
       "top": undefined,
     }
   }
@@ -295,6 +297,7 @@ exports[`renders animated fab with label on the left 1`] = `
     Object {
       "alignSelf": undefined,
       "bottom": undefined,
+      "end": undefined,
       "left": undefined,
       "position": "absolute",
       "right": undefined,
@@ -305,6 +308,7 @@ exports[`renders animated fab with label on the left 1`] = `
       },
       "shadowOpacity": 0.15,
       "shadowRadius": 8,
+      "start": undefined,
       "top": undefined,
     }
   }
@@ -586,6 +590,7 @@ exports[`renders animated fab with label on the right by default 1`] = `
     Object {
       "alignSelf": undefined,
       "bottom": undefined,
+      "end": undefined,
       "left": undefined,
       "position": "absolute",
       "right": undefined,
@@ -596,6 +601,7 @@ exports[`renders animated fab with label on the right by default 1`] = `
       },
       "shadowOpacity": 0.15,
       "shadowRadius": 8,
+      "start": undefined,
       "top": undefined,
     }
   }