CODEWITHSUNDEEP
react-nativereact-navigationreact-native-tabnavigator
pdad04
pdad04

Reputation: 75

React Native (React Navigation) Passing data from one screen to another using

I have a react native application that I created using Ignite CLI. I am trying to use TabNavigator with React Navigation, but I can't seem to figure out how to pass data from one screen to another. All the examples I've seen generally show how to pass the data when tapping on a button and using the onPress function, but in my case I need/want to pass the data when I actually tap one of the tab buttons, and I have yet to find an explanation on how to do this, at least one that I understand.

I have two screens that the user will interact with SearchScreen and WatchScreen. The two screens are controlled by the TabNavigator which is in an AppNavigation.js file. So there are a total of 3 files AppNavigation.js, SearchScreen.js and WatchScreen.js.

AppNavigation.js

import { StackNavigator,TabNavigator } from 'react-navigation'
import SearchScreen from '../Containers/SearchScreen'
import WatchScreen from '../Containers/WatchScreen'
import SearchWatch from '../Containers/SearchWatch'
import LaunchScreen from '../Containers/LaunchScreen'
import styles from './Styles/NavigationStyles'

const PrimaryNav = TabNavigator({
  Search: { screen: SearchScreen },
  Watch: { screen: WatchScreen }
}, {
  initialRouteName: 'Search',
  lazy: true,

})
export default PrimaryNav

The SearchScreen will fetch some data and hold it in an array, that I need to be available in the WatchScreen as well. Generally I would pass data to the WatchScreen as a prop, but using the TabNavigator I can't see how to do this, since it's not a child of SearchScreen. In `SearchScreen the relevant piece is this

constructor(props){
  super(props)
  this.state = { movies: []}
}

this.state.movies is what I need to be available in my WatchScreen, how can I make this so it's available when I tap the Watch button in the tab bar?

Things I've read indicate that every Screen Component gets passed navigation props in either the form of this.props.navigation or this.props.screenProps, would this be how I would pass the movies array to my WatchScreen? If so,this.props.navigation & this.props.screenProps don't appear to be getting passed to my WatchScreen.

Upvotes: 5

Views: 4499

Answers (1)

Jay Thummar
Jay Thummar

Reputation: 2299

Sending data 

 onPress={() => this.props.navigation.navigate(
                SCREEN_NAME,
                {
                    item: YOUR_DATA_WHAT_YOU_NEDD_TO_SEND
                }
            )}

Receiving Data 

  const item = this.props.navigation.getParam('item');

Upvotes: 6

Related Questions