Feat/rn76 oldarch (#7967)

* Upgraded android to work with rn 77

* Upgraded to the latest version of detox

* Added react types.
Fixed ios pod file

* Updated pod filke

* Fixed es lint error

* Upgraded reanimated

* Fixed ios build

* Fixed ios build

* Fixed one test in android

* Fixed android tests

* Fixed android unit tests

* Fixed android unit tests

* Fixed android tests

* Fixed mocked tests

* Downgrade to RN 76

* support ios

* fixed android screenshot

* fixed android screenshot

* Reimplemented missing bar style in iOS

* Reimplemented missing bar style in iOS

* Fixed ios bar styling

* Removed unused library

* Upgraded roboletric to run on updated sdk

* Revert "Upgraded roboletric to run on updated sdk"

This reverts commit 1ed449b.

* Fixes for PR

* Fixed ios build

Author: gosha212

.eslintrc.js

@@ -5,5 +5,6 @@ module.exports = {
   plugins: ['@typescript-eslint'],
   env: {
     jest: true,
+    'jest/globals': true,
   },
 };

.gitignore

@@ -244,3 +244,4 @@ Mock.js
 Mock.d.ts
 
 Gemfile.lock
+/playground/ios/.xcode.env.local

babel.config.js

@@ -1,7 +1,7 @@
 module.exports = function (api) {
   api && api.cache(false);
   return {
-    presets: ['module:metro-react-native-babel-preset'],
+    presets: ['module:@react-native/babel-preset'],
     plugins: [
       '@babel/plugin-proposal-export-namespace-from',
       '@babel/plugin-proposal-export-default-from',

e2e/StaticLifecycleEvents.test.js

@@ -1,7 +1,7 @@
 import Utils from './Utils';
 import TestIDs from '../playground/src/testIDs';
 
-const { elementByLabel, elementById } = Utils;
+const { elementByLabel, elementById, sleep } = Utils;
 
 describe('static lifecycle events', () => {
   beforeEach(async () => {
@@ -93,6 +93,9 @@ describe('static lifecycle events', () => {
     await elementById(TestIDs.SET_ROOT_BTN).tap();
     await elementById(TestIDs.CLEAR_OVERLAY_EVENTS_BTN).tap();
     await elementById(TestIDs.SET_ROOT_BTN).tap();
+    // This sleep is needed in order to synchronize the test rendered with state changes. We can remove it after moving
+    // our mock to work with act(()=>{}) from react-test-renderer
+    await sleep(10);
     await expect(elementByLabel('setRoot complete - previous root is unmounted')).toBeVisible();
   });
 

e2e/assets/overlay_banner_padding.png

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import { View, Text, TouchableOpacity, Image, ImageURISource} from 'react-native';
-import { Navigation, ImageResource} from 'react-native-navigation';
+import { View, Text, TouchableOpacity, Image, ImageURISource } from 'react-native';
+import { Navigation, ImageResource } from 'react-native-navigation';
 import { ComponentProps } from '../ComponentProps';
 import { VISIBLE_SCREEN_TEST_ID } from '../constants';
 import { LayoutStore } from '../Stores/LayoutStore';
@@ -10,8 +10,7 @@ import { events } from '../Stores/EventsStore';
 import _ from 'lodash';
 import { switchTabByIndex } from '../actions/layoutActions';
 
-
-function isURISource(src: ImageResource| undefined): src is ImageURISource {
+function isURISource(src: ImageResource | undefined): src is ImageURISource {
   return !!src && typeof src === 'object' && 'uri' in src;
 }
 
@@ -36,12 +35,15 @@ export const ComponentScreen = connect(
       if (bottomTabsOptions?.visible === false) return null;
       const buttons = bottomTabs!.children!.map((child, i) => {
         const bottomTabOptions = child.resolveOptions().bottomTab;
-        const icon = (bottomTabs as any).selectedIndex === i ? bottomTabOptions?.selectedIcon : bottomTabOptions?.icon;
+        const icon =
+          (bottomTabs as any).selectedIndex === i
+            ? bottomTabOptions?.selectedIcon
+            : bottomTabOptions?.icon;
         const iconURI = isURISource(icon) ? icon.uri : undefined;
         return (
           <View key={`tab-${i}`}>
             <TouchableOpacity
-              style={{padding:10}}
+              style={{ padding: 10 }}
               testID={bottomTabOptions?.testID}
               onPress={() => {
                 events.invokeBottomTabPressed({
@@ -51,22 +53,34 @@ export const ComponentScreen = connect(
                   switchTabByIndex(this.props.layoutNode.getBottomTabs(), i);
               }}
             >
-            <View style={{justifyContent: 'center', alignItems: 'center'}}>
-              <Text>{bottomTabOptions?.badge}</Text>
-              {iconURI && <Image style={{width: 18, height: 18, marginBottom: 5}} source={{uri: iconURI}}/>}
-              <Text style={{fontSize: 12}}>{bottomTabOptions?.text || ''}</Text>
-            </View>
+              <View style={{ justifyContent: 'center', alignItems: 'center' }}>
+                <Text>{bottomTabOptions?.badge}</Text>
+                {iconURI && (
+                  <Image
+                    style={{ width: 18, height: 18, marginBottom: 5 }}
+                    source={{ uri: iconURI }}
+                  />
+                )}
+                <Text style={{ fontSize: 12 }}>{bottomTabOptions?.text || ''}</Text>
+              </View>
             </TouchableOpacity>
           </View>
         );
       });
 
       return (
-      <View 
-        testID={bottomTabsOptions?.testID} 
-        style={{flexDirection: 'row',justifyContent: 'center', width: '100%', backgroundColor: '#F0F2F5'}}>
+        <View
+          testID={bottomTabsOptions?.testID}
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'center',
+            width: '100%',
+            backgroundColor: '#F0F2F5',
+          }}
+        >
           {buttons}
-      </View>);
+        </View>
+      );
     }
 
     render() {

lib/Mock/Components/ComponentScreen.tsx

@@ -19,8 +19,8 @@ export const LayoutComponent = class extends Component<ComponentProps> {
     return <View />;
   }
   componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    const err =  new Error(
-      `Error while trying to render layout ${this.props.layoutNode.nodeId} of type ${this.props.layoutNode.type}: ${error}\n${errorInfo?.componentStack}`,
+    const err = new Error(
+      `Error while trying to render layout ${this.props.layoutNode.nodeId} of type ${this.props.layoutNode.type}: ${error}\n${errorInfo?.componentStack}`
     );
     (err as any).cause = error;
     throw err;

lib/Mock/Components/LayoutComponent.tsx

@@ -20,6 +20,7 @@ def DEFAULT_KOTLIN_STDLIB = 'kotlin-stdlib-jdk8'
 def kotlinVersion = safeExtGet("RNNKotlinVersion", DEFAULT_KOTLIN_VERSION)
 def kotlinStdlib = safeExtGet('RNNKotlinStdlib',DEFAULT_KOTLIN_STDLIB )
 def kotlinCoroutinesCore = safeExtGet('RNNKotlinCoroutinesCore', '1.5.2')
+
 android {
     namespace 'com.reactnativenavigation'
     compileSdkVersion safeExtGetFallbackLowerBound('compileSdkVersion', DEFAULT_COMPILE_SDK_VERSION)

lib/android/app/build.gradle

@@ -4,10 +4,12 @@
 
 import com.facebook.react.ReactApplication;
 import com.facebook.react.ReactNativeHost;
+import com.facebook.react.soloader.OpenSourceMergedSoMapping;
 import com.facebook.soloader.SoLoader;
 import com.reactnativenavigation.react.ReactGateway;
 import com.reactnativenavigation.viewcontrollers.externalcomponent.ExternalComponentCreator;
 
+import java.io.IOException;
 import java.util.HashMap;
 import java.util.Map;
 
@@ -23,7 +25,11 @@ public abstract class NavigationApplication extends Application implements React
 	public void onCreate() {
 		super.onCreate();
         instance = this;
-        SoLoader.init(this, false);
+        try {
+            SoLoader.init(this, OpenSourceMergedSoMapping.INSTANCE);
+        } catch (IOException e) {
+            throw new RuntimeException(e);
+        }
         reactGateway = createReactGateway();
 	}
 

lib/android/app/src/main/java/com/reactnativenavigation/NavigationApplication.java

@@ -5,21 +5,21 @@
 import android.os.Bundle;
 import android.view.MotionEvent;
 
+import androidx.annotation.RestrictTo;
+
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactRootView;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.config.ReactFeatureFlags;
 import com.facebook.react.uimanager.JSTouchDispatcher;
 import com.facebook.react.uimanager.UIManagerModule;
 import com.facebook.react.uimanager.events.EventDispatcher;
-import com.reactnativenavigation.viewcontrollers.viewcontroller.ScrollEventListener;
 import com.reactnativenavigation.react.events.ComponentType;
 import com.reactnativenavigation.react.events.EventEmitter;
 import com.reactnativenavigation.viewcontrollers.viewcontroller.IReactView;
+import com.reactnativenavigation.viewcontrollers.viewcontroller.ScrollEventListener;
 import com.reactnativenavigation.views.component.Renderable;
 
-import androidx.annotation.RestrictTo;
-
 @SuppressLint("ViewConstructor")
 public class ReactView extends ReactRootView implements IReactView, Renderable {