CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-stack
Sheffield
Sheffield

Reputation: 413

How to change navigation header button style based on a state property in React Native using React Navigation?

I'm using react navigation in my RN app and trying to implement a form to submit some information. I'm using a button at the right header and want to style the button with different color to indicate whether the form is legal (e.g., white for a legal form and transparant for having important inputs left blank).

I use this.state.submitDisabled to indicate its legality and define the right header in componentDidMount() and pass the navigation param to the header to render in navigationOptions:

this.props.navigation.setParams({
  headerRight: (
    <MaterialHeaderButtons>
      <Item title="submit" iconName="check"
            color={this.state.submitDisabled ? colors.white_disabled : colors.white}
            onPress={() => {
              if (!this.state.submitDisabled) {
                this.postEvent();
              }
            }}/>
    </MaterialHeaderButtons>
  ),
});

However, the color change statement based on the value of this.state.submitDisabled did not work. I've checked its value, when this.state.submitDisabled is changed, the color of the button does not change. It seems that the color is determined when set as navigation params as above and will not change since then.

How can I achieve the effect of what I described?

Upvotes: 0

Views: 2353

Answers (2)

Kaan Sent&#252;rk
Kaan Sent&#252;rk

Reputation: 36

In your implementation this.state.submitDisabled is not bound to the screen. Try the following:

static navigationOptions = ({ navigation }) => {
  headerRight: (
    <MaterialHeaderButtons>
      <Item 
        title="submit" 
        iconName="check"
        color={navigation.getParam('submitDisabled') ? colors.white_disabled : colors.white}
        onPress={navigation.getParam('handlePress')}
      />
    </MaterialHeaderButtons>
  ),
})

componentWillMount() {
  this.props.navigation.setParams({
    submitDisabled: this.state.submitDisabled,
    handlePress: () => {
      if (!this.state.submitDisabled) {
        this.postEvent();
      }
    }
  });
}

Upvotes: 1

Aurangzaib Rana
Aurangzaib Rana

Reputation: 4252

when ever you change value of state also change navigation param too.see example

export class Example extends Component {
  static navigationOptions = ({ navigation }) => {
        const showModal = get(navigation, 'state.params.showModal');

        return {
          headerTitle: <Header
            showModal={showModal}
            backIcon />,
          headerStyle: HeaderStyle,
          headerLeft: null,
        };
      };

  constructor(props) {
    super(props);
    this.state = {
      showModal: false,
    };
  }

  componentDidMount = () => {
    this.props.navigation.setParams({
      showModal: this.state.showModal,

    });
  }

  handleModal=(value)=>{
    this.setState({showModal:value});
    this.props.navigation.setParams({
      showModal: this.state.showModal,
    });
}

render() {
return null;
}
}

Upvotes: 2

Related Questions