React Native Tab Navigation Display Issue

Question

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" barStyle="light-content" />
          <RootNavigator />
        </View>
      </Provider>
    );
  }
}

Snippet of component displaying the "bounce" issue when loaded:

class YourEventsScreen extends Component {
  state = {
    attendingEvents: true,
    ownedEvents: false,
    isLogoutVisible: false,
    animatePressAttend: new Animated.Value(1),
    animatePressHost: new Animated.Value(1),
    didFinishInitialAnimation: false,
  }

  static navigationOptions = {
    title: "Your Events",
    headerLeft: null,
    tabBarIcon: ({ tintColor }) => {
      return <Icon name="calendar" size={30} color={tintColor} type="entypo"/>;
    }
  };

  componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
      this.props.fetchOwnedEvents(this.props.currentUser.userId);
      this.props.fetchAttendingEvents(this.props.currentUser.attendingEvents);

      this.setState({
        ...this.state,
         didFinishInitialAnimation: true,
       });
     });
  }

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

brentvatne brentvatne · Accepted Answer · 2018-11-06T03:51:06

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.

React Native Tab Navigation Display Issue

2 Answers