CODEWITHSUNDEEP
javascriptandroidiosreact-native
Jaydeep Galani
Jaydeep Galani

Reputation: 4961

Hide and Show createBottomTabNavigator tabbar with Animation in react-native

I am using createBottomTabNavigator for tab bar.

I can hide and show tabbar using tabBarVisible prop by setting it true or false.

Problem I have is ,I want it to hide with animation.

any links will be helpful.

Upvotes: 4

Views: 6811

Answers (2)

tuledev
tuledev

Reputation: 10327

You can create custom tabBarComponent, and then hide/show it with what animation you want. I catch the props of tabbar in componentWillReceiveProps

I used react-native-animatable for animation.

  componentWillReceiveProps(props) {
    const oldState = this.props.navigation.state;
    const oldRoute = oldState.routes[oldState.index].routes[0];
    const oldParams = oldRoute.params;
    const wasVisible = !oldParams || oldParams.visible;

    const newState = props.navigation.state;
    const newRoute = newState.routes[newState.index].routes[0];
    const newParams = newRoute.params;
    const isVisible = !newParams || newParams.visible;

    if (wasVisible && !isVisible) {
      this.view.slideOutDown(500);
      this.setState({
        hidden: true,
      });
    } else if (isVisible && !wasVisible) {
     this.view.slideInUp(500).then(() => {
      this.setState({
        hidden: false,
      });
    });
    } 
  }

  render() {
    return (
      <Animatable.View
        ref={ref => { this.view = ref; }}
        style={[styles.container, {
          position: this.state.hidden ? 'absolute' : 'relative',
        }]}
        useNativeDriver
      >
        <BottomTabBar
          {...this.props}
        />
      </Animatable.View>
    );
  }

Upvotes: 0

Subhendu Kundu
Subhendu Kundu

Reputation: 3856

You might wanna use new Animated.Value(0) And change the bottom value of the tab. https://github.com/react-navigation/react-navigation/issues/888 this has a solution.

Upvotes: 5

Related Questions