Update

Author: IjzerenHein

index.js

@@ -1,9 +1,6 @@
-/**
- * @format
- */
-
 import {AppRegistry} from 'react-native';
-import App from './src/App';
+import App from './src/Appv4';
+//import App from './src/Appv5';
 import {name as appName} from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);

ios/Podfile.lock

@@ -227,7 +227,7 @@ PODS:
     - React
   - RNScreens (2.4.0):
     - React
-  - RNSharedElement (0.6.1):
+  - RNSharedElement (0.7.0):
     - React
   - RNVectorIcons (6.6.0):
     - React
@@ -371,10 +371,10 @@ SPEC CHECKSUMS:
   RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38
   RNReanimated: 4e102df74a9674fa943e05f97f3362b6e44d0b48
   RNScreens: b5c0e1b2b04512919e78bd3898e144a157ce2363
-  RNSharedElement: 7bc62aefd600b4c13d6e5b60e840ef20f7749a72
+  RNSharedElement: 00b1a1420d213a34459bb9a5aacabb38107d7948
   RNVectorIcons: 0bb4def82230be1333ddaeee9fcba45f0b288ed4
   Yoga: ba3d99dbee6c15ea6bbe3783d1f0cb1ffb79af0f
 
 PODFILE CHECKSUM: c3dda0168f02462215b7d87ad79274e8d94843ac
 
-COCOAPODS: 1.9.1
+COCOAPODS: 1.8.4

ios/RN60.xcodeproj/project.pbxproj

@@ -161,7 +161,6 @@
 				94B12BFD0887A1127A6E35BB /* Pods-RN60Tests.debug.xcconfig */,
 				42C03C3EDF151867DFFBA6E3 /* Pods-RN60Tests.release.xcconfig */,
 			);
-			name = Pods;
 			path = Pods;
 			sourceTree = "<group>";
 		};
@@ -293,6 +292,9 @@
 						CreatedOnToolsVersion = 6.2;
 						TestTargetID = 13B07F861A680F5B00A75B9A;
 					};
+					13B07F861A680F5B00A75B9A = {
+						DevelopmentTeam = 8PLAR7Y58Z;
+					};
 					2D02E47A1E0B4A5D006451C7 = {
 						CreatedOnToolsVersion = 8.2.1;
 						ProvisioningStyle = Automatic;
@@ -309,6 +311,7 @@
 			developmentRegion = English;
 			hasScannedForEncodings = 0;
 			knownRegions = (
+				English,
 				en,
 				Base,
 			);
@@ -677,6 +680,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CURRENT_PROJECT_VERSION = 1;
 				DEAD_CODE_STRIPPING = NO;
+				DEVELOPMENT_TEAM = 8PLAR7Y58Z;
 				INFOPLIST_FILE = RN60/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				OTHER_LDFLAGS = (
@@ -696,6 +700,7 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = 8PLAR7Y58Z;
 				INFOPLIST_FILE = RN60/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				OTHER_LDFLAGS = (

package.json

@@ -8,17 +8,19 @@
   },
   "dependencies": {
     "@react-native-community/masked-view": "^0.1.7",
+    "@react-navigation/native": "^5.1.0",
+    "@react-navigation/stack": "^5.2.1",
     "react": "16.9.0",
     "react-native": "0.61.4",
     "react-native-gesture-handler": "^1.6.1",
     "react-native-reanimated": "^1.7.1",
     "react-native-safe-area-context": "^0.7.3",
     "react-native-screens": "^2.4.0",
-    "react-native-shared-element": "^0.6.1",
+    "react-native-shared-element": "^0.7.0",
     "react-native-touchable-scale": "^2.1.0",
     "react-native-vector-icons": "^6.6.0",
     "react-navigation": "^4.3.7",
-    "react-navigation-shared-element": "^2.2.0",
+    "react-navigation-shared-element": "^3.0.0",
     "react-navigation-stack": "^2.3.11",
     "react-navigation-tabs": "^2.8.11"
   },

src/App.js renamed to src/Appv4.js

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import {createAppContainer} from 'react-navigation';
 import {TransitionPresets} from 'react-navigation-stack';
-import {createBottomTabNavigator} from 'react-navigation-tabs';
-import {createSharedElementStackNavigator} from 'react-navigation-shared-element';
+import {
+  createBottomTabNavigator,
+  createMaterialTopTabNavigator,
+} from 'react-navigation-tabs/src/index.tsx';
+import {createSharedElementStackNavigator4} from 'react-navigation-shared-element';
 import {enableScreens} from 'react-native-screens';
 import {MainScreen} from './MainScreen';
 import {DetailScreen} from './DetailScreen';
@@ -11,18 +14,43 @@ import Icon from 'react-native-vector-icons/Ionicons';
 
 enableScreens();
 
-const StackNavigator1 = createSharedElementStackNavigator(
+export const iosTransitionSpec = {
+  animation: 'spring',
+  config: {
+    stiffness: 1000,
+    damping: 500,
+    mass: 3,
+    overshootClamping: true,
+    restDisplacementThreshold: 10,
+    restSpeedThreshold: 10,
+  },
+};
+
+const StackNavigator1 = createSharedElementStackNavigator4(
   {
     Main: MainScreen,
     Detail: DetailScreen,
   },
-  undefined,
+  {
+    defaultNavigationOptions: {
+      onTransitionStart: (a, b, c) => {
+        console.log('onTransitionStart: ', a, b, c);
+      },
+      onTransitionEnd: (a, b, c) => {
+        console.log('onTransitionEnd: ', a, b, c);
+      },
+      transitionSpec: {
+        open: iosTransitionSpec,
+        close: iosTransitionSpec,
+      },
+    },
+  },
   {
     name: 'StackNavigator1',
   },
 );
 
-const StackNavigator2 = createSharedElementStackNavigator(
+const StackNavigator2 = createSharedElementStackNavigator4(
   {
     Main: {
       screen: props => <MainScreen {...props} modal />,
@@ -34,6 +62,32 @@ const StackNavigator2 = createSharedElementStackNavigator(
   },
 );
 
+const StackNavigator3_5 = createSharedElementStackNavigator4(
+  {
+    Detail: DetailScreen,
+  },
+  undefined,
+  {
+    name: 'StackNavigator3_5',
+  },
+);
+
+const StackNavigator3 = createSharedElementStackNavigator4(
+  {
+    Main: MainScreen,
+    Detail: StackNavigator3_5,
+    /*TopTab: {
+      screen: createSharedElementStackNavigator({
+        Detail: DetailScreen,
+      }),
+    },*/
+  },
+  undefined,
+  {
+    name: 'StackNavigator3',
+  },
+);
+
 const TabNavigator = createBottomTabNavigator({
   Tab1: {
     screen: StackNavigator1,
@@ -53,9 +107,18 @@ const TabNavigator = createBottomTabNavigator({
       ),
     },
   },
+  Tab3: {
+    screen: StackNavigator3,
+    navigationOptions: {
+      title: 'Top Tabs',
+      tabBarIcon: props => (
+        <Icon name="md-keypad" size={20} color={props.tintColor} />
+      ),
+    },
+  },
 });
 
-const RootModalStackNavigator = createSharedElementStackNavigator(
+const RootModalStackNavigator = createSharedElementStackNavigator4(
   {
     Tabs: TabNavigator,
     Modal: ModalScreen,

src/Appv5.js

@@ -1,6 +1,5 @@
-/*import * as React from 'react';
-import {NavigationNativeContainer} from '@react-navigation/native';
-import {createStackNavigator} from '@react-navigation/stack';
+import * as React from 'react';
+import {NavigationContainer} from '@react-navigation/native';
 import {createSharedElementStackNavigator} from 'react-navigation-shared-element';
 import {enableScreens} from 'react-native-screens';
 import {MainScreen} from './MainScreen';
@@ -9,16 +8,15 @@ import {DetailScreen} from './DetailScreen';
 
 enableScreens();
 
-const Stack = createStackNavigator();
+const Stack = createSharedElementStackNavigator();
 
 export default function App() {
   return (
-    <NavigationNativeContainer>
+    <NavigationContainer>
       <Stack.Navigator>
         <Stack.Screen name="Main" component={MainScreen} />
         <Stack.Screen name="Detail" component={DetailScreen} />
       </Stack.Navigator>
-    </NavigationNativeContainer>
+    </NavigationContainer>
   );
 }
-*/