How to pass in navigation props into a functional component screen through React Navigation?

Question

I have a functional component screen with a React Native FlatList of custom "Tasks". I want to be able to navigate from a task to another functional component, "TaskEditScreen" and pass some props to the screen as well.

<TouchableOpacity onPress={()=>{navigation.navigate('Task Edit')}}>
   <Feather
      name="edit"
      size={35}
      color="black"
      style={{
         margin: 5
      }}    
   />
</TouchableOpacity>

The onPress function works and it navigates me to the correct screen, but how do I also pass in some kind of props or data to this screen?

95faf8e76605e973 · Accepted Answer · 2020-08-29 00:51:25Z

3

Documentation: https://reactnavigation.org/docs/params

<TouchableOpacity onPress={() => { navigation.navigate('Task Edit', {someParam: "someValue"}) }}>
  <Feather
    name="edit"
    size={35}
    color="black"
    style={{
      margin: 5
    }}
  />
</TouchableOpacity>

answered Aug 29, 2020 at 0:51

95faf8e76605e973

14.3k4 gold badges30 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass in navigation props into a functional component screen through React Navigation?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related