React Native Tab Navigation Display Issue

1221 views javascript
5

I'm experiencing a display issue with React Native / React Navigation where navigating to a different tab within a Tab Navigator causes a bad bounce animation to trigger when the tab opens. This issue only happens after logging in, and after this happens once or twice it doesn't happen again.

Below is a 8 second video clip of the issue:

Youtube clip of error

What I've tried so far:

  • InteractionManager.runAfterInteractions within componentDidMount() to prevent fetching data during navigation animation

  • Turning lazyLoad on & off within the TabNavigator

  • Forcing the mapview to reload with this.forceUpdate() before navigating to another tab

Unfortunately none of this has worked, and I'm not sure where the problem is coming from now.

What I'm running:

  • "react-navigation": "^1.5.11"
  • "expo": "^26.0.0"

Relevant code snippet of React Navigation setup (the clip shows navigating from the userInfo > map > yourEvents:

export default class App extends React.Component {
  render() {
    const Stack = {
      FirstView: {
        screen: TabNavigator(
          {
            map: {
              screen: HomeMapScreen,
              transitionConfig: () => fromLeft(),
              navigationOptions: ({ navigation }) => ({
                header: null
              })
            },
            yourEvents: {
              screen: YourEventsScreen,
              transitionConfig: () => fromLeft(),
              navigationOptions: ({ navigation }) => ({
                header: null
              })
            },
            ...
          },
          {
            navigationOptions: {
              animationEnabled: "false"
            },
            tabBarPosition: "bottom",
            animationEnabled: false,
            swipeEnabled: false,
            tabBarOptions: {
              showIcon: "true", // Shows an icon for both iOS and Android
              style: {
                backgroundColor: "#04151F"
              },
              showLabel: false,
              activeTintColor: "#59C9A5",
              inactiveTintColor: "#F7FFF7",
              labelStyle: {
                fontSize: 10
              },
              iconSize: Platform.OS === "ios" ? 30 : 24
            }
          }
        )
      },
      ...
      userInfo: {
        screen: UserInfo,
        transitionConfig: () => fromLeft(),
        navigationOptions: {
          drawerLabel: <Hidden />
        }
      },
      ...
    };

    const DrawerRoutes = {
      ...
      Home: {
        name: "Home",
        screen: StackNavigator(Stack, {
          initialRouteName: "FirstView",
          transitionConfig: () => fromLeft(),
          headerMode: "none",
          drawerIcon: () => {
            return <Icon name="map" type="foundation" size={30} color={tintColor} />;
          }
        })
      },
      SecondViewStack: {
        name: "SecondViewStack",
        screen: StackNavigator(Stack, {
          initialRouteName: "SecondView",
          transitionConfig: () => fromLeft(),
          icon: () => {
            return <Icon name="map" type="foundation" size={30} color={tintColor} />;
          }
        })
      }
    };

    const RootNavigator = StackNavigator(
      {
        Drawer: {
          name: "Drawer",
          screen: DrawerNavigator(DrawerRoutes, {
            drawerBackgroundColor: "#D8DDEF",
            transitionConfig: () => fromLeft(),
            contentComponent: DrawerContent,
            contentOptions: {
              backgroundColor: 'black',
              flex: 1
            },
          })
        },
        ...Stack
      },
      {
        headerMode: "none"
      }
    );

    return (
      <Provider store={store}>
        <View style={styles.container}>
          <MyStatusBar translucent backgroundColor="#04151F" bar />
          <RootNavigator />
        </View>
      </Provider>
    );
  }
}

Any ideas or insight on the issue here is very much appreciated!

answered question

1 Answer

10

I can only imagine what is happening here is that you are using LayoutAnimation somewhere when this tab change takes place. A good strategy when encountering issues like this is to remove code until the issue is resolved, then add it back piece by piece.

posted this

Have an answer?

JD

Please login first before posting an answer.