Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

218
Visualizações
How to pass dynamic data between two screen in React native?

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.

about 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

0

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 Screen1 = () => {
  const [text, onChangeText] = React.useState("Hello world");

  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 Screen1;

Then you could use navigate:

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

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

route.params.param1

Don't forget

Don't forget to pass route as a parameter in fuction( {route) }{ ... }

about 4 years ago · Juan Pablo Isaza Relatório

0

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,
          });
        }}
      />
    </>
  );
}
about 4 years ago · Juan Pablo Isaza Relatório

0

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';

or

Device Event Emitter

import { DeviceEventEmitter} from 'react-native';
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda