how to create action button react native redirect other page?

Question

i'm new in react native. i'm use react native action button and i want if button clicked, then show other page. this is my code but still doesn't work. have any solution?

render() {
    return (
        <View style={styles.container}>
           <ActionButton buttonColor="#1E73C1" onPress={() => this.buttonPressed}>
          </ActionButton>
        </View>
    );
  }

 buttonPressed() {
    this.props.navigation.navigate('NewCase', {});
  }

score 0 · Answer 1 · answered May 12 '17 at 09:45

0

Be sure to pass the navigation prop to the component

answered May 12 '17 at 09:45

David Vittori

1,146
1
13
30

can you make example for this?. thanks for reply. :-) @David Vittori – Quinn May 12 '17 at 09:49

score 0 · Accepted Answer · answered May 12 '17 at 10:01

You don't execute buttonPressed at all. Fix it with ():

<ActionButton buttonColor="#1E73C1" onPress={() => this.buttonPressed()}>

Other way would be:

<ActionButton buttonColor="#1E73C1" onPress={this.buttonPressed.bind(this)}>

And like said in the comments, you should ensure that navigation actually exists in the props.

score 0 · Answer 3 · answered May 12 '17 at 10:18

Example

<ActionButton buttonColor="#1E73C1" onPress={() => this.buttonPressed('page2')}>

buttonPressed(page){
  this.props.navigator.replace({
    id: page,
  })
}

You just put buttonPressed thats doesn't really do nothing if you have a buttonPressed() to exec the transition you need to put buttonPressed() , by the away a good thing to do is putting this type of function with '_' behind , like this: _buttonPressed('page2') and then _buttonPressed(page) , it helps a bit to know what you are doing

how to create action button react native redirect other page?

3 Answers3