title: React Native - pass props from One screen to another screen (using tab navigator to navigate)
body: <p>I need to pass data from my HomeScreen to my SecondScreen. There are a ton of examples of how to do this if i'm clicking a button on the HomeScreen to navigate to SecondScreen, but can't find anything showing how to pass to SecondScreen if I'm using a v2 bottom tab navigator to go from HomeScreen to SecondScreen. I've tried screenprops and a couple other methods and spent about 8 hours trying to figure it out but could not get it to work. Any idea how to do this? Please, any hint would be amazing.  Here is my code:</p>
  
  <p>MainTabNavigator.js:</p>
  
  <pre><code> const config = Platform.select({
    web: { headerMode: 'screen' },
    default: {},
  });
  
  
  const HomeStack = createStackNavigator(
    {
      Home: HomeScreen,
  
    },
    config
  
  );
  
  HomeStack.navigationOptions = {
    tabBarLabel: 'Home',
    tabBarIcon: ({ focused }) =&gt; (
      &lt;MaterialIcons name="home" size={32}  /&gt;
    ),
  };
  
  HomeStack.path = '';
  
  
  const SecondStack= createStackNavigator(
    {
      Second: SecondScreen,
    },
    config
  );    
  
  SecondStack.navigationOptions = {
    tabBarLabel: 'Second screen stuff',
  
    tabBarIcon: ({ focused }) =&gt; (
      &lt;MaterialIcons name="SecondScreenIcon" size={32}  /&gt;
    ),
  };
  
  SecondStack.path = '';
  
  
  const tabNavigator = createBottomTabNavigator({
    HomeStack,
    SecondScreen
  });
  
  tabNavigator.path = '';
  
  export default tabNavigator;
  </code></pre>
  
  <p>HomeScreen.js:</p>
  
  <pre><code>  class HomeScreen extends Component {
  
    constructor(props){
      super(props);  
    }
  
   componentDidMount(){
  
     this.setState({DataFromHomeScreen: 'my data that Im trying to send to SecondScreen'})
  
    }
  
  //....
  </code></pre>
  
  <p>SecondScreen.js:</p>
  
  <pre><code>class SecondScreen extends Component {
  
        constructor(props){
          super(props);  
        }
  
  
     render()
     return(     
  
           &lt;View&gt;{this.props.DataFromHomeScreen}&lt;/View&gt;
  
      )
  
  
      //....
  </code></pre>
  
  <p>****Please find THINGS I'VE TRIED below:****</p>
  
  <p>HomeScreen.js:  when i do this it receives it at first but then passes null</p>
  
  <pre><code>render(){
  
  return(
  &lt;View&gt;
   //all of my home screen jsx
  &lt;SecondScreen screenProps={{DataFromHomeScreen : 'data im trying to pass'}}/&gt;
  &lt;/View&gt;
  )
  }
  </code></pre>
  
  <p>MaintTabNavigator.js:   when i do this it receives it at first but then passes null</p>
  
  <pre><code>HomeStack.navigationOptions = {
    tabBarLabel: 'Home',
    tabBarIcon: ({ focused }) =&gt; (
      &lt;MaterialIcons name="home" size={32}  /&gt;
    ),
  };
  
  &lt;HomeStack screenProps={{DataFromHomeScreen:'data im trying to pass'}}/&gt;
  
  
  HomeStack.path = '';
  </code></pre>
  
  <p>I've tried like 5 other ways too that I can't even remember at this point. I don't want to have to call my database again in the second screen to get user info. Nobody I know knows react or react native. The React Native documentation at <a href="https://reactnavigation.org/docs/en/stack-navigator.html" rel="nofollow noreferrer">https://reactnavigation.org/docs/en/stack-navigator.html</a> is minimal at best, only showing the below:</p>
  
  <pre><code>const SomeStack = createStackNavigator({
    // config
  });
  
  &lt;SomeStack
    screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
  /&gt;
  </code></pre>
  
  <p>even if you go to the examples in the documentation and search for the word 'screenprop'  you will not see any mention of the screen prop feature in either of the examples. All questions that I've seen only address how to pass props on button click which is easy. Is what I'm trying to do possible? I'm sure I'm not the only person using tab navigator who's retrieved data in the homescreen and need to pass it to other screens . Any advice helps. thanks.</p>
  
  <p>ps.
  Here is my Sign in class that is calling the Home screen:</p>
  
  <pre><code>class SignInScreen extends React.Component {
  static navigationOptions = {
    title: 'Please sign in',
  };
  
  
  render() {
    return (
  
  
      &lt;View
      style={styles.container}
      contentContainerStyle={styles.contentContainer}&gt;
  
      &lt;View&gt;
      &lt;SocialIcon
      title='Continue With Facebook'
      button
      type='facebook'
      iconSize="36"
      onPress={this._signInAsync} 
      /&gt;
      &lt;/View&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>  );
  }
  
  
  _signInAsync = async () =&gt; {
  
      let redirectUrl = AuthSession.getRedirectUrl();
      let result = await AuthSession.startAsync({
        authUrl:
          `https://www.facebook.com/v2.8/dialog/oauth?response_type=token` +
          `&amp;client_id=${FB_APP_ID}` +
          `&amp;redirect_uri=${encodeURIComponent(redirectUrl)}`,
      });      
  
      var token = result.params.access_token
      await AsyncStorage.setItem('userToken', token);
  
      await fetch(`https://graph.facebook.com/me?fields=email,name&amp;access_token=${token}`).then((response) =&gt; response.json()).then((json) =&gt; {
  
            this.props.navigation.navigate('Home',
            {
                UserName : json.name,
                FBID : json.id,
                email : json.email
  
            });     
  
  
      }) .catch(() =&gt; {
         console.log('ERROR GETTING DATA FROM FACEBOOK')
        });
  
  };
   }
  
  export default SignInScreen;
  </code></pre>