How to create Bottom Tab Bar that disappears on scroll in React Native?

user_9626123 0
Viewed 11013

I'm using React Navigation to create tab navigator in my app, what I want to do is hide that tab bar when user scrolls down and bring it back again when user scroll to top again, Is there any cross-platform solution to that?

reference app is Linkedin

react-native
2 Answers

I have implemented component that show/hide Bottom Tab Bar. Based on the scroll direction param showTabBar is set.

 export default class ScrollTab extends React.Component {
  onScroll = (event) => {
    const { navigation } = this.props;
    const currentOffset = event.nativeEvent.contentOffset.y;
    const dif = currentOffset - (this.offset || 0);  

    if (dif < 0) {
      navigation.setParams({ showTabBar: true });
    } else {
      navigation.setParams({ showTabBar: false });
    }
    //console.log('dif=',dif);

    this.offset = currentOffset;
  }      

  render () {
    return (
      <ScrollView onScroll={(e) => this.onScroll(e)}>
        {this.props.children}
      </ScrollView>
    );
  }
}

Then in navigationOptions it is possible to change tabBarVisible property depending on the showTabBar param.

const isTabBarVisible = (navState) => {
  if (!navState) {
    return true;
  }
  let tabBarVisible = navState.routes[navState.index].params ? navState.routes[navState.index].params.showTabBar : true;
  return tabBarVisible;
}

const MessagesStack = createStackNavigator(
  {
    Messages: MessagesScreen,
  },
  config
);

MessagesStack.navigationOptions = ({ navigation }) => {
  return {
    tabBarLabel: 'Messages',
    tabBarVisible: isTabBarVisible(navigation.state)
  }
};
user_60021650

Edit: See this Github issue for the answer.

Old answer: Based on a scrolling event from the Scroll View, you can set the tabBarVisible navigation option to false. If you want to have an animated smooth you could look into adjusting the height of the tabBar or moving the tabBar offscreen. I haven't tested any of this, but it would be the first thing I'd look into.

user_13792580
Related