android - How to share data from one react native component to another component

Question

i have a component "Address" were i am using google-places-autocomplete for getting address.After that i extract the needed data (such as Country,postal code etc). And now i want to transfer this data into the "Main Component" for where the is getting called. In Address Component, i have used useState() to store data.

import { View, StyleSheet, TextInput } from "react-native";
import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete";
import {  } from "react-native";
import Colors from "../constants/Colors";

let places = [];
const Address = (props) => {
  const [place, setPlace] = useState();
  const [postalCode, setPostalCode] = useState();
  const [country, setCountry] = useState();
  const [state, setState] = useState();
  const [city, setCity] = useState();

  const setCountryHandler=(value)=>{
    setCountry(value)
  }
  const setPostalCodeHandler=(value)=>{
    setPostalCode(value)
  }
  const setCityHandler=(value)=>{
    setCity(value);
  }
  const setStateHandler=(value)=>{
    setState(value)
  }
      

  return (
    <View style={{
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
      marginVertical: 10,
    }}>
    <View
      style={styles.search}
    >
      <GooglePlacesAutocomplete
      placeholder="Address"
        onPress={(data,details=null)=>{
          let address = details.address_components;
          let address1 = [];
          for (let i = 0; i < 1; i++) {
            for (let i in address) {
              address1 = address[i].types;
              for (let j in address1) {
                if (address1[j] === "sublocality") {
                  places.push(address[i].long_name);
                }
              }
            }
            setPlace(places);
            places = [];
          }
          for (let i in address) {
            address1 = address[i].types;
            for (let j in address1) {
              if (address1[j] === "locality") {
                setCityHandler(address[i].long_name);
              }
            }
          }
          for (let i in address) {
            address1 = address[i].types;
            for (let j in address1) {
              if (address1[j] === "administrative_area_level_1") {
                setState(address[i].long_name);
              }
            }
          }
          for (let i in address) {
            address1 = address[i].types;
            for (let j in address1) {
              if (address1[j] === "country") {
                setCountry(address[i].long_name);
              }
            }
          }
          for (let i in address) {
            address1 = address[i].types;
            for (let j in address1) {
              if (address1[j] === "postal_code") {
                setPostalCode(address[i].long_name);
              }
            }
          }
        }}

        enablePoweredByContainer={false}
        disableScroll={false}
        fetchDetails={true}
        
        query={{
          key: "#############################",
          language: "en",
        }}
        styles={{
          textInputContainer: {
            width: "100%",
          },
        }}
      />
      </View>
      <View
        style={{ justifyContent: "center", alignItems: "center", width: "80%" }}
      >
        <View style={styles.container}>
          <TextInput placeholder="city" defaultValue={city} onChangeText={setCityHandler}/>
        </View>
        <View style={styles.container}>
          <TextInput placeholder="state" defaultValue={state} onChangeText={setStateHandler}/>
        </View>
        <View style={styles.container}>
          <TextInput placeholder="country" defaultValue={country} onChangeText={setCountryHandler} />
        </View>
        <View style={styles.container}>
          <TextInput placeholder="pincode" defaultValue={postalCode} onChangeText={setPostalCodeHandler}/>
        </View>
      </View>
    
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    marginVertical: 10,
    width: "100%",
    paddingVertical: 8,
    paddingHorizontal: 8,
    borderColor: Colors.accent,
    borderWidth: 1,
    borderRadius: 6,
    backgroundColor: "white",
  },
  search:{
    marginBottom:10,
    width: "80%",
    borderColor: Colors.accent,
    borderWidth: 1,
    borderRadius: 6,
    backgroundColor: "white",
  }
});

export default Address;

here's my code and i want to transfer data =city,state,postalcode,country into another component

Answer 1

To transfer data , to another component , that Component will need to be the Child Component of your Address Component, in this way child component will receive Address Component states as props.

That's why people use Redux, which creates container and stores all your states in that container, which then can be accessed by any component in your project. https://react-redux.js.org/

But if your components are not related, and you don't want to use redux , then there is one way to do this is, that you save your state value to the storage via Async Storage.

https://github.com/react-native-async-storage/async-storage

and then retrieve those values in Main Component via AsyncStorage.