How to pass dynamic data between two screen in React native?-CodePudding

I have referred official documentation of react native(https://reactnavigation.org/docs/params).In that I observed that they are passing the static data between screens. But I want to pass data taken from user. If someone knows how to share data then please help. I have taken help of context api also but I failed to pass the data. Any source or material will also be helpful.

CodePudding user response：

Your issue may be related to your input. It seems you are not capturing your inputs into a state variable.

Check this example from ReactNative input: https://reactnative.dev/docs/0.65/textinput

import React from "react";
import { SafeAreaView, StyleSheet, TextInput } from "react-native";

const UselessTextInput = () => {
  const [text, onChangeText] = React.useState("Useless Text");

  return (
    <SafeAreaView>
      <TextInput
        style={styles.input}
        onChangeText={onChangeText}
        value={text}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

export default UselessTextInput;

Then you could use navigate:

navigation.navigate('Details', {
  param1: text,
});

In the other screen you could read the param1 like this:

route.params.param1

CodePudding user response：

Checkout this code snippet.

  React.useEffect(() => {
    if (route.params?.post) {
      // Post updated, do something with `route.params.post`
      // For example, send the post to the server
    }
  }, [route.params?.post]);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Create post"
        onPress={() => navigation.navigate('CreatePost')}
      />
      <Text style={{ margin: 10 }}>Post: {route.params?.post}</Text>
    </View>
  );
}

function CreatePostScreen({ navigation, route }) {
  const [postText, setPostText] = React.useState('');

  return (
    <>
      <TextInput
        multiline
        placeholder="What's on your mind?"
        style={{ height: 200, padding: 10, backgroundColor: 'white' }}
        value={postText}
        onChangeText={setPostText}
      />
      <Button
        title="Done"
        onPress={() => {
          // Pass and merge params back to home screen
          navigation.navigate({
            name: 'Home',
            params: { post: postText },
            merge: true,
          });
        }}
      />
    </>
  );
}

CodePudding user response：

to pass a param to a screen

navigation.navigate('screenName', {
   paramName: 'valueYouwantToPass',
});

because you mentioned context API, try

Async Storage

import {AsyncStorage} from 'react-native';

Device Event Emitter

import { DeviceEventEmitter} from 'react-native';