How to change screen using stackNavigation in React Native?

Question

I have one screen which in header consists button to go to another screen.

I have already model here, but it doesn't work: As shown below I want to change the screen from RecipeList to NewRecipeForm using Button in header

const AppStackNavigator = createStackNavigator({
 List: {
  screen: RecipesList,
  navigationOptions: {
    title:'RecipesList',
    headerLeft: (
      <Button onPress={()=>this.props.navigation.navigate('NewRecipeForm')}>
      <Text>+</Text>
      </Button>
    )
    }},
 NewRecipeForm: {screen: CreateRecipeForm, 
        navigationOptions: {title:'Add new recipe'}},
  Details: {screen: RecipesDetails, navigationOptions: {title:'RecipeDetails'}},

export default class App extends React.Component {
 render() {
  return <AppStackNavigator initialRouteName='List' />;
   }
}

I hope that you will help me with solution

Jeeva · Accepted Answer · 2018-07-05 11:15:47Z

You may use your stack navigator as like below, you can able to destructure your navigation property while giving your navigationOptions property as well in the createStackNavigator itself

const AppStackNavigator = createStackNavigator({
    List: {
        screen: RecipesList,
        navigationOptions: ({navigation}) => {  //destructure the navigation property here 
            return {
                title: 'RecipesList',
                headerLeft: (
                    <Button onPress={() => navigation.navigate('NewRecipeForm')}>
                        <Text>+</Text>
                    </Button>
                )
            }
        }
    },
    NewRecipeForm: {
        screen: CreateRecipeForm,
        navigationOptions: { title: 'Add new recipe' }
    },
    Details: { screen: RecipesDetails, navigationOptions: { title: 'RecipeDetails' } }

});

sanjar · Accepted Answer · 2018-07-05 09:14:15Z

2

You cannot access the props of your component in headerLeft, but you can directly use the navigation like this :

  <Button onPress={()=> navigation.navigate('NewRecipeForm')}>

answered Jul 5, 2018 at 9:14

sanjar

1,1012 gold badges9 silver badges18 bronze badges

Comments

Dinith Minura · Accepted Answer · 2018-07-05 09:39:33Z

1

You can use following code inside your RecipesList Component instead of having it inside createStackNavigator(). See this Snack for full implementation.

static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: "RecipesList",
      headerLeft: (
        <Button
          onPress={() => navigation.navigate('NewRecipeForm')}
          title="+"
        />
      ),
    };
  };

answered Jul 5, 2018 at 9:39

Dinith Minura

1,4962 gold badges14 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to change screen using stackNavigation in React Native?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related