chore: support for React Native 0.71.0

.github/workflows/ios-build-test-fabric.yml

@@ -10,7 +10,7 @@ on:
       - 'ios/**'
       - 'common/**'
       - 'src/fabric/**'
-      - 'FabricExample/**'
+      - 'FabricTestExample/**'
   push:
     branches:
       - main
@@ -19,7 +19,7 @@ jobs:
   build:
     runs-on: macos-12
     env:
-      WORKING_DIRECTORY: FabricExample
+      WORKING_DIRECTORY: FabricTestExample
     concurrency:
       group: ios-fabric-${{ github.ref }}
       cancel-in-progress: true
@@ -32,7 +32,7 @@ jobs:
         with:
           node-version: 14
           cache: 'yarn'
-          cache-dependency-path: 'FabricExample/yarn.lock'
+          cache-dependency-path: 'FabricTestExample/yarn.lock'
 
       - name: Install node dependencies
         working-directory: ${{ env.WORKING_DIRECTORY }}

.github/workflows/ios-e2e-test.yml

@@ -15,7 +15,7 @@ on:
   workflow_dispatch:
 jobs:
   test:
-    runs-on: macos-latest
+    runs-on: macos-12
     timeout-minutes: 40
     env:
       WORKING_DIRECTORY: Example

Example/App.tsx

@@ -161,7 +161,8 @@ const ExampleApp = (): JSX.Element => (
     <Stack.Navigator
       screenOptions={{
         direction: I18nManager.isRTL ? 'rtl' : 'ltr',
-      }}>
+      }}
+    >
       <Stack.Screen
         name="Main"
         options={{ title: '📱 React Native Screens Examples' }}

Example/src/screens/Animations.tsx

@@ -120,15 +120,15 @@ const NavigateScreen = ({
 const Stack = createNativeStackNavigator<StackParamList>();
 
 const App = (): JSX.Element => {
-  const [stackAnimation, setStackAnimation] = useState<StackAnimation>(
-    'default'
-  );
+  const [stackAnimation, setStackAnimation] =
+    useState<StackAnimation>('default');
   return (
     <Stack.Navigator
       screenOptions={{
         headerHideBackButton: true,
         direction: I18nManager.isRTL ? 'rtl' : 'ltr',
-      }}>
+      }}
+    >
       <Stack.Screen name="Main" options={{ title: 'Animations' }}>
         {({ navigation }) => (
           <MainScreen
@@ -142,7 +142,8 @@ const App = (): JSX.Element => {
         name="Push"
         options={{
           replaceAnimation: 'push',
-        }}>
+        }}
+      >
         {({ navigation }) => (
           <ReplaceScreen
             navigation={navigation}
@@ -154,7 +155,8 @@ const App = (): JSX.Element => {
         name="Pop"
         options={{
           replaceAnimation: 'pop',
-        }}>
+        }}
+      >
         {({ navigation }) => (
           <ReplaceScreen
             navigation={navigation}
@@ -166,7 +168,8 @@ const App = (): JSX.Element => {
         name="Modal"
         options={{
           stackPresentation: 'modal',
-        }}>
+        }}
+      >
         {({ navigation }) => (
           <NavigateScreen
             navigation={navigation}

Example/src/screens/BottomTabsAndStack.tsx

@@ -73,7 +73,8 @@ const createStack = (letter: string) => {
         headerRight: () => (
           <Text testID="bottom-tabs-header-right-id">{letter}</Text>
         ),
-      }}>
+      }}
+    >
       <Stack.Screen name="Details" component={DetailsScreen} />
     </Stack.Navigator>
   );

Example/src/screens/Events.tsx

@@ -149,7 +149,8 @@ const ChatsScreen = ({
         nativeBackButtonDismissalEnabled: true,
         headerTopInsetEnabled: false,
         headerHideBackButton: true,
-      }}>
+      }}
+    >
       <NestedStack.Screen name="Privacy" component={PrivacyScreen} />
       <NestedStack.Screen name="Options" component={OptionsScreen} />
     </NestedStack.Navigator>
@@ -250,20 +251,21 @@ const Stack = createNativeStackNavigator<StackParamList>();
 const NestedStack = createNativeStackNavigator<StackParamList>();
 
 const App = (): JSX.Element => {
-  const [stackAnimation, setStackAnimation] = useState<StackAnimation>(
-    'default'
-  );
+  const [stackAnimation, setStackAnimation] =
+    useState<StackAnimation>('default');
 
   return (
     <ToastProvider>
       <Stack.Navigator
         screenOptions={{
           direction: I18nManager.isRTL ? 'rtl' : 'ltr',
           nativeBackButtonDismissalEnabled: true,
-        }}>
+        }}
+      >
         <Stack.Screen
           name="Main"
-          options={{ title: 'Events', headerHideBackButton: true }}>
+          options={{ title: 'Events', headerHideBackButton: true }}
+        >
           {({ navigation }) => (
             <MainScreen
               navigation={navigation}

Example/src/screens/Gestures.tsx

@@ -152,7 +152,8 @@ const DetailsScreen = ({ navigation }: DetailsScreenProps): JSX.Element => {
             left: startValue,
             width: endValue - startValue,
             height: bottomValue - topValue,
-          }}>
+          }}
+        >
           <Text style={styles.heading}>Swipe here!</Text>
           <Text>
             This view presents where you can currently swipe while using the
@@ -171,7 +172,8 @@ const App = (): JSX.Element => (
     screenOptions={{
       headerHideBackButton: true,
       direction: I18nManager.isRTL ? 'rtl' : 'ltr',
-    }}>
+    }}
+  >
     <Stack.Screen
       name="Main"
       component={MainScreen}

Example/src/screens/HeaderOptions.tsx

@@ -87,7 +87,8 @@ const SettingsScreen = ({ navigation }: SettingsScreenProps): JSX.Element => {
   return (
     <ScrollView
       contentInsetAdjustmentBehavior="automatic"
-      style={styles.container}>
+      style={styles.container}
+    >
       <SettingsInput
         label="Header title"
         value={headerTitle}
@@ -142,7 +143,8 @@ const App = (): JSX.Element => (
     screenOptions={{
       headerHideBackButton: true,
       direction: I18nManager.isRTL ? 'rtl' : 'ltr',
-    }}>
+    }}
+  >
     <Stack.Screen
       name="Main"
       options={{

Example/src/screens/Modals.tsx

@@ -52,7 +52,8 @@ const App = (): JSX.Element => (
     screenOptions={{
       headerHideBackButton: true,
       direction: I18nManager.isRTL ? 'rtl' : 'ltr',
-    }}>
+    }}
+  >
     <Stack.Screen
       name="Main"
       component={MainScreen}

Example/src/screens/Orientation.tsx

@@ -23,9 +23,8 @@ interface FirstScreenProps {
 }
 
 const FirstScreen = ({ navigation }: FirstScreenProps): JSX.Element => {
-  const [screenOrientation, setScreenOrientation] = useState<ScreenOrientation>(
-    'default'
-  );
+  const [screenOrientation, setScreenOrientation] =
+    useState<ScreenOrientation>('default');
 
   useLayoutEffect(() => {
     navigation.setOptions({
@@ -79,7 +78,8 @@ const App = (): JSX.Element => (
     screenOptions={{
       headerHideBackButton: true,
       direction: I18nManager.isRTL ? 'rtl' : 'ltr',
-    }}>
+    }}
+  >
     <Stack.Screen
       name="First"
       component={FirstScreen}

Example/src/screens/SearchBar.tsx

@@ -36,18 +36,15 @@ const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => {
   const [placeholder, setPlaceholder] = useState('Search for something...');
   const [barTintColor, setBarTintColor] = useState<BarTintColor>('white');
   const [hintTextColor, setHintTextColor] = useState<BarTintColor>('orange');
-  const [headerIconColor, setHeaderIconColor] = useState<BarTintColor>(
-    'orange'
-  );
-  const [shouldShowHintSearchIcon, setShouldShowHintSearchIcon] = useState(
-    true
-  );
+  const [headerIconColor, setHeaderIconColor] =
+    useState<BarTintColor>('orange');
+  const [shouldShowHintSearchIcon, setShouldShowHintSearchIcon] =
+    useState(true);
   const [hideWhenScrolling, setHideWhenScrolling] = useState(false);
   const [obscureBackground, setObscureBackground] = useState(false);
   const [hideNavigationBar, setHideNavigationBar] = useState(false);
-  const [autoCapitalize, setAutoCapitalize] = useState<AutoCapitalize>(
-    'sentences'
-  );
+  const [autoCapitalize, setAutoCapitalize] =
+    useState<AutoCapitalize>('sentences');
   const [inputType, setInputType] = useState<InputType>('text');
 
   useLayoutEffect(() => {
@@ -115,7 +112,8 @@ const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => {
     <ScrollView
       style={styles.container}
       contentInsetAdjustmentBehavior="automatic"
-      keyboardDismissMode="on-drag">
+      keyboardDismissMode="on-drag"
+    >
       <SettingsInput
         label="Placeholder"
         value={placeholder}
@@ -223,7 +221,8 @@ const SearchScreen = ({ navigation }: SearchScreenProps) => {
   return (
     <ScrollView
       contentInsetAdjustmentBehavior="automatic"
-      keyboardDismissMode="on-drag">
+      keyboardDismissMode="on-drag"
+    >
       {places
         .filter(
           (item) => item.toLowerCase().indexOf(search.toLowerCase()) !== -1
@@ -247,7 +246,8 @@ const App = (): JSX.Element => (
       screenOptions={{
         headerHideBackButton: true,
         direction: I18nManager.isRTL ? 'rtl' : 'ltr',
-      }}>
+      }}
+    >
       <Stack.Screen
         name="Main"
         component={MainScreen}

Example/src/screens/SimpleNativeStack.tsx

@@ -47,7 +47,8 @@ const App = (): JSX.Element => (
     screenOptions={{
       headerHideBackButton: true,
       direction: I18nManager.isRTL ? 'rtl' : 'ltr',
-    }}>
+    }}
+  >
     <Stack.Screen
       name="Main"
       component={MainScreen}

Example/src/screens/StackPresentation.tsx

@@ -32,7 +32,8 @@ const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => {
   return (
     <ScrollView
       style={{ ...styles.container, backgroundColor: 'thistle' }}
-      testID="stack-presentation-root-scroll-view">
+      testID="stack-presentation-root-scroll-view"
+    >
       <Button
         title="push"
         onPress={() => navigation.navigate('Push')}
@@ -117,7 +118,8 @@ const FullScreenModalScreen = ({
   <View style={{ flex: 1 }}>
     <ImageBackground
       style={styles.image}
-      source={require('../assets/trees.jpg')}>
+      source={require('../assets/trees.jpg')}
+    >
       <Button
         testID="stack-presentation-fullscreen-modal-go-back-button"
         title="Go back"
@@ -134,7 +136,8 @@ const App = (): JSX.Element => (
     screenOptions={{
       headerHideBackButton: true,
       direction: I18nManager.isRTL ? 'rtl' : 'ltr',
-    }}>
+    }}
+  >
     <Stack.Screen
       name="Main"
       component={MainScreen}

Example/src/screens/StackReactNavigation4.tsx

@@ -47,7 +47,8 @@ class DetailsScreen extends React.Component<{
           ...styles.container,
           backgroundColor:
             colors[Math.floor(Math.random() * Math.floor(colors.length))],
-        }}>
+        }}
+      >
         <Text style={styles.text}>Details Screen</Text>
         <Button
           title="Go to Details... again"

Example/src/screens/StatusBar.tsx

@@ -30,9 +30,8 @@ interface FirstScreenProps {
 const FirstScreen = ({ navigation }: FirstScreenProps): JSX.Element => {
   const [statusBarStyle, setStatusBarStyle] = useState<StatusBarStyle>('auto');
   const [statusBarHidden, setStatusBarHidden] = useState(false);
-  const [statusBarAnimation, setStatusBarAnimation] = useState<
-    StatusBarAnimation
-  >('fade');
+  const [statusBarAnimation, setStatusBarAnimation] =
+    useState<StatusBarAnimation>('fade');
   const [statusBarTranslucent, setStatusBarTranslucent] = useState(true);
   const [statusBarColor, setStatusBarColor] = useState('gray');
 
@@ -117,7 +116,8 @@ const App = (): JSX.Element => (
       },
       headerHideBackButton: true,
       direction: I18nManager.isRTL ? 'rtl' : 'ltr',
-    }}>
+    }}
+  >
     <Stack.Screen
       name="First"
       component={FirstScreen}

Example/src/shared/Choose.tsx

@@ -10,12 +10,14 @@ export const Choose = (): JSX.Element => {
       <View style={styles.row}>
         <TouchableOpacity
           style={{ ...styles.button, backgroundColor: 'dodgerblue' }}
-          onPress={() => navigation.goBack()}>
+          onPress={() => navigation.goBack()}
+        >
           <Text style={styles.buttonText}>Blue pill</Text>
         </TouchableOpacity>
         <TouchableOpacity
           style={{ ...styles.button, backgroundColor: 'crimson' }}
-          onPress={() => navigation.goBack()}>
+          onPress={() => navigation.goBack()}
+        >
           <Text style={styles.buttonText}>Red pill</Text>
         </TouchableOpacity>
       </View>

Example/src/shared/Dialog.tsx

@@ -18,7 +18,8 @@ export const Dialog = (): JSX.Element => {
         <Text style={styles.heading}>Hey! Sign up for our newsletter!</Text>
         <TouchableOpacity
           style={{ ...styles.button }}
-          onPress={() => navigation.goBack()}>
+          onPress={() => navigation.goBack()}
+        >
           <Text style={styles.buttonText}>Please no.</Text>
         </TouchableOpacity>
       </View>

Example/src/shared/SettingsPicker.tsx

@@ -22,7 +22,8 @@ export function SettingsPicker<T extends string>({
   return (
     <TouchableOpacity
       style={{ ...styles.container, ...style }}
-      onPress={() => setIsOpen(!isOpen)}>
+      onPress={() => setIsOpen(!isOpen)}
+    >
       <Text testID={testID} style={styles.label}>{`${label}: ${value}`}</Text>
       {isOpen
         ? items.map((item) => (
@@ -33,7 +34,8 @@ export function SettingsPicker<T extends string>({
                   item === value
                     ? { ...styles.item, fontWeight: 'bold' }
                     : styles.item
-                }>
+                }
+              >
                 {item}
               </Text>
             </TouchableOpacity>

Example/src/shared/Toast.tsx

@@ -38,7 +38,8 @@ const Toast = ({
   return (
     <TouchableOpacity
       style={{ ...styles.container, ...style }}
-      onPress={() => remove(id)}>
+      onPress={() => remove(id)}
+    >
       <View style={{ ...styles.alert, backgroundColor }}>
         <Text style={styles.text}>
           {`${index + 1}. `}