Hide navigation bar on scroll down about react-native-navbar

[alinz]

@evanmrose It is actually very easy to do. Since navBar is a component and you are rendering it on top of your View, what you can do is change the height of navBar to 0 if user scroll down and as soon as user scroll up change it back to normal.

You can also add a little bit of animation for make it a little bit smooth.

renderScene(route, navigator) {
  const Component = route.component;
  let navBar = route.navigationBar;

  const { hideNavBar } = this.state;
  let navBarStyle = hideNavBar? { height: 0 } : {};

  if (navBar) {
    navBar = React.addons.cloneWithProps(navBar, { navigator, route, style: {...navBarStyle} });
  }

  return (
    <View style={{flex: 1}}>
      {navBar}
      <Component style={{flex: 1, backgroundColor: 'green'}}/>
    </View>
  );
}

You can also make the navBar null if hideNavBar is true.

[alinz]

@jeremiecarlson, You need to trigger animation at one point, either 0 or x. You have to do some test with Animated apis. Below is a simple example how you would animate height.

class MyAwesomeComponent extends Component {
  constructor(props) {
    super(props);
    this.height = new Animated.Value(100);
  }

  _setAnimation(enable) {
    Animated.timing(this.height, {
      duration: 400,
      toValue: enable? 100 : 0
    }).start()
  }

  render() {
    return (
      <Animated.View style={{ height: this.height }}/>
    );
  }
}

So at some point you need to call this._setAnimation and pass hide or show state into it. One thing to remember is that Animated is not calling the re-render of your component any more. It does it internally.

Also if you need to create an Animated component from one of your custom component you can use createAnimatedComponent method.

[Kureev]

Hi there! Hm, no, at the moment we don't have any API for that. But it's a good point I think.

[Kureev]

I'll close it until any feedback.

[jeremiecarlson]

@alinz I was wondering if you could expand on how you might animate that height?

[jeremiecarlson]

@alinz Thanks for your response!

[gorjanz]

What if the scroll-view from which the events which trigger / drive the hiding of the header come from, is deep inside the hierarchy of components inside the navigator?
I am using NavigationExperimental...

[stasinua]

@gorjanz Try to use Panresponder API. Here is solution that works for me:

1. For View component which you want to trigger swipe set panResponder according to docs like below:

componentWillMount() {
    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: (evt, gestureState) => false,
      onStartShouldSetPanResponderCapture: (evt, gestureState) => false,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
      onPanResponderGrant: (evt, gestureState) => {
        this.setState({
          touched: true
        });
      },
      onPanResponderMove: (evt, gestureState) => {
        this.setState({
          touches: this.state.touches + 1,
        });
        if (gestureState.moveY > gestureState.y0) {
          this.props.showNavBar()
          this.setState({
            touches: 0
          });
        }
        else {
          this.props.hideNavBar()
          this.setState({
            touches: 0
          });
        }
      },
      onPanResponderTerminationRequest: (evt, gestureState) => false,
      onPanResponderRelease: (evt, gestureState) => {
        if (this.state.touches > 1) {
          if (gestureState.moveY > gestureState.y0) {
            this.props.showNavBar()
          }
          else {
            this.props.hideNavBar()
          }
        }
        this.setState({
          touches: 0
        });
      },
      onPanResponderTerminate: (evt, gestureState) => {
        return true;
      },
      onShouldBlockNativeResponder: (evt, gestureState) => {
        return false;
      },
    });
  }

2. Use logic based on incoming visible prop in your navBar component and Animated API for height animation.