pass value from one js file to another js file in react native :react native-CodePudding

i have this parrent baby_login file it has a google sign up button which is a componet with file name Sign when i click on the button i want userInfo to pass from sign.js to Signupfor.js how can i achive this ?

export default function Baby_login() {
  return (
    <View style={styles.prheight}>
      <Image
        source={require('../assets/images/mother.png')}
        style={{
          width: 300,
          marginLeft: 20,
          marginTop: 0,
          justifyContent: 'center',

          height: 300,
          textAlign: 'center',
        }}
      />
      <View style={styles.buttonw}>
        <Sign />
      </View>
    </View>
  );
}

sign.js


export default function Sign(navigation) {
  
  async function onGoogleButtonPress() {
    await GoogleSignin.hasPlayServices();
    const userInfo = await GoogleSignin.signIn();
    console.log(userInfo);
    setuserInfo(userInfo);
   
  }
  return (
    <View style={styles.prheight}>
      <View style={styles.buttonw}>
        <GoogleSigninButton
          style={{width: 192, height: 48}}
          size={GoogleSigninButton.Size.Wide}
          color={GoogleSigninButton.Color.Light}
          onPress={onGoogleButtonPress}
          // disabled={this.state.isSigninInProgress}
        />
      </View>
    </View>
  );
}

Signupfor.js


import React from 'react';

export default function Signupfor(userInfo) {
  return <View style={styles.prheight}></View>;
}

app.js

here i have updated the app.js file so that u can see naviagtion details

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {Provider as PaperProvider} from 'react-native-paper';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {StyleSheet, Text, View} from 'react-native';
import Baby from './components/baby_login';
import {Avatar, Card, Title, Paragraph} from 'react-native-paper';
import {Image} from 'react-native';
import Signupfor from './components/signupfor';
import Pregnant from './components/pregent_login';

import {Button} from 'react-native';

function Dashbord({navigation}) {
  const LeftContent = props => <Avatar.Icon {...props} icon="folder" />;
  return (
    <View style={styles.main}>
      <Title
        style={{
          textAlign: 'center',
          marginBottom: 30,
          fontSize: 28,
          fontFamily: 'Poppins-ExtraBold',
        }}>
        Tell us about you
      </Title>
      <Card
        style={styles.main2}
        onPress={() => navigation.navigate('Pregnant')}>
        <Image
          source={require('./assets/images/pregnant.png')}
          style={{
            width: 80,
            marginLeft: 90,
            marginTop: 0,
            justifyContent: 'center',

            height: 80,
            textAlign: 'center',
          }}
        />
        {/* <Image source={require('./assets/images/pregnant.png')} /> */}
        <Text
          style={{
            textAlign: 'center',
            fontSize: 20,
            fontFamily: 'Poppins-ExtraBold',
          }}>
          I am pregnant
        </Text>
      </Card>
      <Card style={styles.main2} onPress={() => navigation.navigate('Baby')}>
        <Image
          source={require('./assets/images/mother.png')}
          style={{
            width: 80,
            marginLeft: 90,
            marginTop: 0,
            justifyContent: 'center',

            height: 80,
            textAlign: 'center',
          }}
        />
        <Text
          style={{
            textAlign: 'center',
            fontSize: 20,
            fontFamily: 'Poppins-ExtraBold',
          }}>
          i am a mother
        </Text>
      </Card>
    </View>
  );
}

function HomeScreen({navigation}) {
  return (
    <View style={styles.prheight}>
      <View>
        <Text style={styles.r}>home</Text>
      </View>
      <View style={styles.buttonw}>
        <Button
          color="#7743DB"
          title="Lets Go"
          onPress={() => navigation.navigate('Dashbord')}
        />
      </View>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <PaperProvider>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            options={{headerShown: false}}
            name="Home"
            component={HomeScreen}
          />
          <Stack.Screen name="Dashbord" component={Dashbord} />
          <Stack.Screen name="Baby" component={Baby} />
          <Stack.Screen name="Pregnant" component={Pregnant} />
          <Stack.Screen name="Signupfor" component={Signupfor} />
        </Stack.Navigator>
      </NavigationContainer>
    </PaperProvider>
  );
}

CodePudding user response：

how you are trying to navigate? I suppose on onGoogleButtonPress response you want to navigate to next screen with the userInfo data.

You need to use React Navigation library for this.

export default function Sign({navigation}) {
  
  async function onGoogleButtonPress() {
    await GoogleSignin.hasPlayServices();
    const userInfo = await GoogleSignin.signIn();
    console.log(userInfo);
    setuserInfo(userInfo);
    navigation.navigate("Signupfor", { userInfo })

  }
  return (
    <View style={styles.prheight}>
      <View style={styles.buttonw}>
        <GoogleSigninButton
          style={{width: 192, height: 48}}
          size={GoogleSigninButton.Size.Wide}
          color={GoogleSigninButton.Color.Light}
          onPress={onGoogleButtonPress}
          // disabled={this.state.isSigninInProgress}
        />
      </View>
    </View>
  );
}

On Signupfor.js

import React from 'react';

export default function Signupfor(props) {

  const {userInfo} = props?.route?.params

  return <View style={styles.prheight}></View>;
}

I hope this will help you out thanks!

CodePudding user response：

Here Sign is component not a stack screen, so we have to pass navigation from Baby_login

export default function Baby_login(props) {
  return (
    <View style={styles.prheight}>
      <Image
        source={require('../assets/images/mother.png')}
        style={{
          width: 300,
          marginLeft: 20,
          marginTop: 0,
          justifyContent: 'center',

          height: 300,
          textAlign: 'center',
        }}
      />
      <View style={styles.buttonw}>
        <Sign navigation={props.navigation} />
      </View>
    </View>
  );
}

In Sign

export default function Sign(navigation) {
  
  async function onGoogleButtonPress() {
    await GoogleSignin.hasPlayServices();
    const userInfo = await GoogleSignin.signIn();
    console.log(userInfo);
    setuserInfo(userInfo);
    navigation.navigate("Signupfor", { userInfo })
   
  }
  return (
    <View style={styles.prheight}>
      <View style={styles.buttonw}>
        <GoogleSigninButton
          style={{width: 192, height: 48}}
          size={GoogleSigninButton.Size.Wide}
          color={GoogleSigninButton.Color.Light}
          onPress={onGoogleButtonPress}
          // disabled={this.state.isSigninInProgress}
        />
      </View>
    </View>
  );
}

In Signupfor

import React from 'react';

export default function Signupfor(props) {
  const {userInfo} = props?.route?.params
  return <View style={styles.prheight}></View>;
}