Deprecation in 'createStackNavigator': 'transitionConfig' is removed in favor of the new animation APIs

[khdarshan]

Version

Tell us which versions you are using:

• react-native-router-flux v4.3.1
• react v17.0.1
• react-native v0.64.0

Expected behaviour

Should not recieve below warning. Deprecation in 'createStackNavigator': 'transitionConfig' is removed in favor of the new animation APIs

Actual behaviour

Following WARNING shown in console. Deprecation in 'createStackNavigator': 'transitionConfig' is removed in favor of the new animation APIs

[MasterBrian99]

any idea how to fix this ?

[lightning331]

Same here, any solution?

[lafeillou]

Version

Tell us which versions you are using: react-native-router-flux v4.3.1 react v17.0.1 react-native v0.64.0

Expected behaviour

I get the same warning, and I want to know, is it the reason why the transition between the two pages were not the push efect, but the default one. I use Actions.push, the two pages were in one Stack

Actual behaviour

[yberstad]

I have made these changes in Store.js and I no longer get an warning, and my override of cardStyle started to work again.

This is the patch-file (also include a fix regarding the HeaderBackButton):

diff --git a/node_modules/react-native-router-flux/src/NavBar.js b/node_modules/react-native-router-flux/src/NavBar.js
index bb154e0..b4827b5 100644
--- a/node_modules/react-native-router-flux/src/NavBar.js
+++ b/node_modules/react-native-router-flux/src/NavBar.js
@@ -28,7 +28,7 @@ export function BackButton(state) {
   // returning react-navigation's back button well styled for ios and android if rnrf4-supported customization
   // is not required
   if (!state.backButtonImage) {
-    return <HeaderBackButton onPress={onPress} title={state.backTitle} titleStyle={textButtonStyle} tintColor={tintColor} truncatedTitle={state.truncatedTitle} />;
+    return <HeaderBackButton onPress={onPress} label={state.backTitle} titleStyle={textButtonStyle} tintColor={tintColor} truncatedTitle={state.truncatedTitle} />;
   }
 
   const text = state.backTitle ? <Text style={textButtonStyle}>{state.backTitle}</Text> : null;
diff --git a/node_modules/react-native-router-flux/src/Store.js b/node_modules/react-native-router-flux/src/Store.js
index 82eed18..3c15e69 100644
--- a/node_modules/react-native-router-flux/src/Store.js
+++ b/node_modules/react-native-router-flux/src/Store.js
@@ -110,8 +110,8 @@ function getProperties(component = {}) {
   return res;
 }
 function createTabBarOptions({
-  tabBarStyle, activeTintColor, inactiveTintColor, activeBackgroundColor, inactiveBackgroundColor, showLabel, labelStyle, tabStyle, ...props
-}) {
+                               tabBarStyle, activeTintColor, inactiveTintColor, activeBackgroundColor, inactiveBackgroundColor, showLabel, labelStyle, tabStyle, ...props
+                             }) {
   return {
     ...props,
     style: tabBarStyle,
@@ -124,7 +124,7 @@ function createTabBarOptions({
     tabStyle,
   };
 }
-function createNavigationOptions(params) {
+function createNavigationOptions(params, transitionConfig) {
   const {
     type,
     cardStyle,
@@ -202,6 +202,7 @@ function createNavigationOptions(params) {
       headerTitle: getValue(navigationParams.renderTitle || renderTitle || params.renderTitle, state),
       headerTitleStyle: headerTitleStyle || titleStyle,
       title: getValue(navigationParams.title || title || getTitle, state),
+      transitionConfig: transitionConfig,
     };
 
     const NavBarFromParams = navigationParams.renderNavigationBar || navigationParams.navBar;
@@ -864,9 +865,7 @@ export default class NavigationStore {
       mode,
       initialRouteParams,
       initialRouteName,
-      ...commonProps,
-      transitionConfig,
-      navigationOptions: createNavigationOptions(commonProps),
+      navigationOptions: createNavigationOptions(commonProps, transitionConfig),
     });
   };
 

[hedia-m]

As mentioned above, react-navigation has removed the transitionConfig prop. However the new version provides a new API to customize the animation navigation. if you, like me, just want to have the iOS animation on Android, you should use TransitionPresets.SlideFromRightIOS from react-navigation-stack like <Stack key="root" {...TransitionPresets.SlideFromRightIOS}>. Other transition configs are also available via TransisitionsPresets in the react-navigation docs.

As RNRF is built on react-navigation, you can use the whole API animation explained in react-navigation docs and pass it as prop to <Stack />. If you want to build your own animation you can use the cardStyleInterpolator prop but it receives different parameters comparing to the old transitionConfig.

[JMRMEDEV]

@yberstad How do I use your patch file?

[yberstad]

@JMRMEDEV, I have used the patch-package, I think the readme is quite good, https://github.com/ds300/patch-package#readme.

But if you have problems using the patch, please reach out again, and I'll try to help.

[bytemtek]

Hello,

Did someone solve this problem ?