Question 34279 in React native Question posted in
The official React Native documentation can be found here.

Passing data from one screen to another and to another screen again in React native

When routing data using flatlist from one screen to another, I was able to do that using route.param. But can I send the data from screen one to screen two to screen two to screen three?

What method should I use?

This is my data for my flatlist

    const nowshowingmovies = [
{
   id: 1,
   title: "AVATAR: The Way of Water",
   url:  ("link of an Image")},
{
   id: 2,
   title: "Thor Love and Thunder",
   url:  ("link of an Image")
  },
];
export default nowshowingmovies;

This is my code for the first screen (flatlist)

    <FlatList
             style = {{bottom:10}}
             horizontal
             showsHorizontalScrollIndicator = {false}
             data = {nowshowingmovies}
             renderItem = {({ item }) => (
                   <Card containerStyle = {styles.card}>
                       <TouchableOpacity onPress={() => {navigation.navigate('Schedule', item) }}> 
                       <Image style = {styles.itemPhoto}
                              source={{ uri: item.url }} />
                           <Text >{item.title} </Text>
                        </TouchableOpacity>
                   </Card>   
             
)}
             keyExtractor = {(item) => item.id}  
             />

Next, this is how I pass it onto the next screen
Note: I am using a class extend component

    export default class Screentwo extends Component {
        constructor(props, ctx) {
        super(props, ctx);
        this.state = {
        isReady: false,
        nowshowingmovies: this.props.route.params
        };
     }
     render(){
       const item = this.props.route.params
return(
   <View>
    <Image style = {styles.itemPhotoBackground} source={{ uri: item.url }}>
        
    </Image>
  <Text>{item.title}</Text>
   </View>

);
       }
  }

This part is where I dont get. I want to pass it again to this third screen (and again to another screen), but I m a unable to and I am using a class component.

    export default class ThirdScreen extends Component {
    constructor(props, ctx) {
    super(props, ctx);
    this.state = {
    isReady: false,
    nowshowingmovies: this.props.route.params
};
}
render(){
return(
    <View>
    <Image style = {styles.itemPhotoBackground} source={{ uri: item.url }}>
        
    </Image>
  <Text>{item.title}</Text>
   </View>
);
}
}
Tags:

3

Answers


  1. 0

    you shoudl check about the navigation :

    onPress={() => {
    navigation.navigate('MyScreen', {
        myData: data,
    });
}}

    don’t forget const MyCurrentScreen = ({navigation}) => {

    and then in the ‘MyScreen’ where you navigate, you will have access to

    const MyScreen = ({route}) => {
  const data = route.params.myData;
    Login or Signup to reply.
  2. 0

    The more better approach would be using redux or context hooks

    Login or Signup to reply.
  3. 0

    It depends on the flow of navigation of screens.
    like if you are passing data from first screen->second screen->third screen like this then you can pass data on navigation params.

    but it will gives you param error if you navigate to third screen from another screen except second screen so in that you can use React-redux.

    on your screen file import useNavigation. I prefer this to import

     import {useNavigation} from '@react-navigation/native;

    just before return use like this.

      const navigation = useNavigation();

    from first screen onPress button use this just you screen name with this name data as you data

    onPress ={()=> {
  navigation.navigate('secondScreen',{
  myData:paramsData})}};

    on Second Screen get your value like this and do this same for third screen. just pass "data" in navigation params of second screen.

     const secondScreen =({props}) => {
  let data = props.route?.params?.myData
 }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search