title: How to pass props to Screen component with a tab navigator?
body: <p>This is my first post on StackOverflow, so apologies if I'm not following the correct format.</p>
  <p>I'm building my first app using <code>tab navigator from React Navigation v 5.x</code> and have run into a big problem when passing props from one screen to another</p>
  <p>What I want to achieve is to:</p>
  <ol>
  <li>Make changes to a list of data in one of my screens.</li>
  <li>Have those changes affect what happens on another screen.</li>
  </ol>
  <p>I have tried <a href="https://reactnavigation.org/docs/hello-react-navigation/#passing-additional-props" rel="noreferrer">this</a> (I failed to set the props to pass down), <a href="https://stackoverflow.com/questions/57186298/react-native-pass-props-from-one-screen-to-another-screen-using-tab-navigator">this</a> (Deprecated version of react-navigation) and <a href="https://stackoverflow.com/a/56764509/12974771">this</a> (Also old version of react-navigation).</p>
  <p>and Redux but there are no examples available with the current version of react navigation.</p>
  <p>I'm at the end of my rope with this and really need some step by step on how to achieve this.
  Here's a rough sketch of what I want to do:</p>
  <p><a href="https://i.stack.imgur.com/rbSCL.png" rel="noreferrer"><img src="https://i.stack.imgur.com/rbSCL.png" alt="enter image description here" /></a></p>
  <p>The way I thought about it is sending the parent state down as props via callback, but I can't find a way to send props through the screen components in the up-to-date version of react navigation...</p>
  <p>This is my navigation setup:</p>
  <pre class="lang-js prettyprint-override"><code>const Tab = createBottomTabNavigator()
  
  export default class MyApp extends Component{
  
      constructor(props) {
          super(props);
      }
  
      render(){
          return (
              &lt;NavigationContainer&gt;
                  &lt;Tab.Navigator 
                      screenOptions={({ route }) =&gt; ({
                          tabBarIcon: ({ focused, color, size }) =&gt; {
                              let iconName;
  
                              if (route.name === 'My tests') {
                                  iconName = focused ? 'ios-list-box' : 'ios-list';
                              } else if (route.name === 'Testroom') {
                                  iconName = focused ? 'ios-body' : 'ios-body';
                              }
  
                              return &lt;Ionicons name={iconName} size={size} color={color} /&gt;;
                          },
                      })}
                      tabBarOptions={{
                          activeTintColor: 'tomato',
                          inactiveTintColor: 'gray',
                              
                      }}&gt;
  
                      &lt;Tab.Screen name=&quot;My tests&quot;  component={MyTests}/&gt; //This is where I want to send props
                      &lt;Tab.Screen name=&quot;Testroom&quot; component={TestRoom} /&gt;  //This is where I want to send props
                      
                  &lt;/Tab.Navigator&gt;
              &lt;/NavigationContainer&gt;
          )
      }
  }
  </code></pre>
  <p>I've read <a href="https://reactnavigation.org/docs/redux-integration" rel="noreferrer">this</a> but it makes no sense to me. How does this fit into a tree of components? What goes where? Please help!</p>