Search code examples
javascriptreact-nativereact-native-router-flux

React-native-router-flux scene render multiple times


So I use react-native-router-flux and here is my scene

<Scene key="changePassword" component={ChangePassword} title="Change Password"/>

And I have this button which will route to that scene when clicked

<Button style={styles.button} onPress={() => Actions.changePassword()}>

If I click the button for many times, multiple scene will pop up.

Is there any way to prevent this? Thank you for your help guys :)


Solution

  • you can try to give delay if the button has been clicked, put local state like this:

    constructor() {
        super()
        this.state = {
          inClick: false
        }
      }
    

    and add this function :

    onClickButton = () => {
        this.setState({ inClick: true })
        Actions.register()
        setTimeout(function() { this.setState({inClick: false}); }.bind(this), 2000);
      }
    

    and in your button should be like this :

    <Button warning block style={styles.button} onPress={ !this.state.inClick ? this.onClickButton : null}>
    

    Hope that can help you, thanks :)