chore: support for React Native 0.71.0 (#1631)

## Description

It seems that autolinking got complete overhaul in 0.71.0 as
`android/app/src/main/jni` directory was deleted -> thus it works
differently for sure now.

Still need to dive into it.

**FabricTestExample**

* [x] Android
* [x] iOS

**TestsExample**

* software-mansion/react-native-screens#1679

**FabricExample**

* software-mansion/react-native-screens#1680

**TODO**: Consider whether to use `com.facebook.react:react-native:+` or
`com.facebook.react:react-native` (without `+`) in
`android/build.gradle` of the library.

AFAIK the former takes highest available version from defined
repositories (should be `node_modules`?), the latter uses version
injected by React Native Gradle Plugin (but I believe it works since
React Native 0.71.0 or 0.70.0 (need to check) -- so version check might
be necessary).


Decided to leave:

```gradle
implementation 'com.facebook.react:react-native:+'
```

in library's `android/build.gradle` due to following reasons: 

* [Android's readme in RN
repo](https://github.com/facebook/react-native/blob/e108e9ebf1e6c52b6eeffeb6c41f842ad95baa0d/android/README.md)
* [Road to 0.71.0
post](reactwg/react-native-releases#41 (reply in thread))

Blocked by:

* ~facebook/react-native#35306
*
~software-mansion/react-native-reanimated#3745
*
~software-mansion/react-native-gesture-handler#2313
(decided to fix version on commit)
* ~`react-native-safe-area-context` - lacks support for RN71~ (created
patch)
* ~`@react-native-community/cli-platform-android` requires this patch:
kkafar/RNS-tester@9edaaa9.
The patch is already merged, but it is not shipped with `react-native`
yet.~

**NOTE**: Example application will handled in separate PR, as there are
problems with detox (it does not support 0.71 yet) and we run CI on that
app.

## Changes

* Updated examples 
* Updated library's build code

## Test code and steps to reproduce

Run example applications

## Checklist

- [ ] Ensured that CI passes

Author: kkafar

.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}