facebook / react-native

A framework for building native applications using React

Home Page:https://reactnative.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[NavigatorIOS] SetState does not rerender NavigatorIOS component (w/ example repo)

the4dpatrick opened this issue · comments

Here is a repo showing the bug https://github.com/the4dpatrick/react-native-bug-example

I am trying to toggle NavigatorIOS on and off based on the prop navigationBarHidden set to a state value.

    return (
      <NavigatorIOS
        style={styles.container}
        initialRoute={initialRoute}
        navigationBarHidden={this.state.hideNavbar}
        configureScene={() => Navigator.SceneConfigs.PushFromRight}/>
    );

I pass along a method to child components that passes the parent's context and toggle the state value.

  toggleNavigation() {
    this.setState({
      hideNavbar: !this.state.hideNavbar
    });
  }
     initialRoute = { 
        component: ScreenWithMenu, 
        title: 'Screen', 
        passProps: {
          toggleNavigation: this.toggleNavigation.bind(this)
        } 
      };

Inside the sidemenu, I am calling this.props.toggleNavigation() onPress. This correctly toggles the navbar when initially hidden, but when you press onLeftButtonPress, the navbar does not toggle off.

  navigateToThemes() {
    var Themes = require('../Screens/Themes');

    this.props.menuActions.close();
    this.props.toggleNavigation();
    this.props.navigator.push({
      component: Themes,
      title: 'Themes',
      leftButtonTitle: 'Back',
      onLeftButtonPress: () => {
        this.props.navigator.pop();
        this.props.toggleNavigation();
      },
      passProps: { navigator: this.props.navigator }
    })
  }

Here is the start of the IRC chat on this bug https://botbot.me/freenode/reactnative/2015-05-26/?msg=40122019&page=1

I suspect you're running into the same issue I did (though I wanted to change the initial routes). #1300

I believe re-rendering the navigator is a no-go for the time being.

@ericvicenti thoughts?

NavigatorIOS is not currently owned by anyone on the React Native team because it is not used internally at Facebook, so this one is up to us to figure out.

The reason this isn't happening is that this property is only applied on viewDidAppear - so you will see it work when you change routes, but not when you trigger it within the same route. If you'd like to submit a patch, you're welcome to!

@the4dpatrick - this commit on your project fixes the problem, but I think it's a little hacky. If you want to clean it up into a nicer solution that would be great. Feel free to clone that repo and try it - I included the node_modules directory in it because I made changes directly to the React Native source

This is a dup of #846