how to pass data from one screen to other screen using react-native-router

Question

I'm very new to react-native.

can any one please tell me how to pass data to another screen using react-native-router.

I have a flatlist when a list item is clicked it will display an alert meassage , when i click on ok button it should display the RxNumberin next screen.enter image description here

here is my full class

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  Image,
  Alert
 
} from 'react-native';
import {  Actions } from 'react-native-router-flux';
import colors from '../styles/colors';

 class MedicineFlatList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      refreshing: false,
    };
  }
  componentDidMount() {
    fetch('https://api.myjson.com/bins/96ebw')
     .then((response) => response.json())
     .then((responseJson) => {
       this.setState({
         isLoading: false,
         //dataSource: responseJson,
         dataSource: responseJson.map(item => item.ReadyForPickups).reduce((acc, currValue) => { return acc.concat(currValue); }, [])
       }, 

       );
     })
     .catch((error) => {
       console.error(error);
     });
 }
 GetItem(RxNumber) {
  Alert.alert(
    'RxNumber',
    RxNumber,
    
    [
      { text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel' },
      { text: 'OK', onPress: (item) => Actions.listitem({ item: item.RxDrugName }) },
    ],
    { cancelable: false },
    
  );
  }
  listItem=(item) => {
    return (
    <Text style={styles.itemName}>{item.RxDrugName }</Text>
    );
  }

   keyExtractor = (index) => {
    return index.toString();
  }

   renderItem = ({ item }) => {
    return (
        <View style={styles.itemBlock}>
          <View style={styles.itemMeta}>
            <Text style={styles.itemName}>{item.RxDrugName}</Text>
            <Text style={styles.itemLastMessage} onPress={this.GetItem.bind(this, item.RxNumber)}>{item.RxNumber}</Text>
          </View>

          <View style={styles.footerStyle}>
            <View style={{ paddingVertical: 10 }}>
             <Text style={styles.status}>{item.StoreNumber}</Text>
            </View>
            <View style={{ justifyContent: 'center', alignItems: 'center' }}>
            <Image source={require('../assets/right_arrow_blue.png')} />
            </View>
          </View>

       </View>
    
    );
  }

  renderSeparator() {
    return <View style={styles.separator} />;
  }
  render() {
    return (
      <View style={styles.container}>
        <FlatList 
          data={this.state.dataSource}
          keyExtractor={this.keyExtractor}
          renderItem={this.renderItem}
          ItemSeparatorComponent={this.renderSeparator.bind(this)}
    

        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
  paddingHorizontal: 30,
  backgroundColor: colors.white
  },
  itemBlock: {
  flexDirection: 'row',
  paddingVertical: 15,
  },
  itemMeta: {
  justifyContent: 'center'
  },
  itemName: {
  fontSize: 16,
  color: colors.black_two,
  paddingBottom: 10
  },
  itemLastMessage: {
  fontSize: 14,
  color: colors.black_two,
  },
  status: {
  fontSize: 14,
  color: colors.blue,
  fontWeight: 'bold'
  },
  separator: {
  borderRadius: 4, 
  borderWidth: 1, 
  borderColor: colors.light_gray, 
  },
footerStyle: {
  flexDirection: 'row',
  flex: 1,
  paddingVertical: 10, 
  justifyContent: 'flex-end'
  }
});
export default MedicineFlatList;

Thanks everyone I got the answer.

Answer 1

if your are using react-native-router-flux which i recommend https://www.npmjs.com/package/react-native-router-flux

it is something like that

Action.Screen2({id : 1})

and on screen2

this.props.id will be 1 

and if your are using react navigation read the doc it will help you it is something like this

this.props.navigation.navigate('Screen2', {data: 'some-stuff'})

and you can access data in other screen like this.

this.props.navigation.state.params('data')

Answer 2

Tulasi, Roozbeh Mohammadzadeh is correct and answers your question with the use of react-native-router-flux; however, as you continue you may wish to explore using redux or another alternative Appstate system, there are a few.

Reason: Passing data will work for small projects, but larger projects passing up and down the grandparent, parent, child component chain becomes cumbersome and inefficient to troubleshoot and/or maintain.

But to answer your question about passing data using react-native-router see the following right above the Todos section : https://www.npmjs.com/package/react-native-router

The this.props.toRoute() callback prop takes one parameter (a JavaScript object) which can have the following keys:

• name: The name of your route, which will be shown as the title of the navigation bar unless it is changed.
• component (required): The React class corresponding to the view you want to render.
• leftCorner: Specify a component to render on the left side of the navigation bar (like the "Add people"-button on the first page of the Twitter app)
• rightCorner: Specify a component to render on the right side of the navigation bar
• titleComponent: Specify a component to replace the title. This could for example be your logo (as in the first page of the Instagram app)
• headerStyle: change the style of your header for the new route. You could for example specify a new backgroundColor and the router will automatically make a nice transition from one color to the other!
• data: Send custom data to your route.