Passing data between Stack navigators in one Drawer navigator

Question

Is possible to pass data between two stack navigators, in one drawer navigator? i.e:

-DrawerNavigationA --StackNavigationA --StackNavigationB

I want to pass some data (you can see in code below) from StackNavigationB to StackNavigationA. What I need to do? I am looking a 3rd day for some solution, but I found nothing.

App.js

import React from 'react';
import Navigator from './routes/drawer';

export default function App() {
  return (
    <Navigator />
  );
}

Home.js

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';

export default function Home({ navigation }) {
  return (
    <View style={styles.container}>
      <Text> Hello {/* here i want to show a passed value from ChooseName */} from home! </Text>
    </View>
  );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
});

ChooseName.js

import React, { useState } from 'react';
import { StyleSheet, View, Text, TouchableOpacity, FlatList } from 'react-native';

export default function ChooseName({ navigation }) {
  const [names, setNames] = useState([
    { name: 'Adam', key: '1' },
    { name: 'Ivan', key: '2' },
    { name: 'Josh', key: '3' },
  ]);

  //after clicking on the name
  const onPressHandler = (name) => {
    // //Do something to pass name to Home screen
    // //and navigate to Home screen
    navigation.navigate('HomeStack');
    console.log('hello' + name);
  }

  return (
    <View style={styles.container}>
      <FlatList data={names} renderItem={({ item }) => (
        <TouchableOpacity onPress={() => onPressHandler(item.name)}>
          <Text style={styles.name}>{ item.name }</Text>
        </TouchableOpacity>
      )} />
    </View>
  );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    name: {
        padding: 10,
        marginBottom: 10,
    }
});

HomeStack.js

import { createStackNavigator } from 'react-navigation-stack';
import Home from '../screens/Home';

const screens = {
  Home: {
    screen: Home,
    navigationOptions: {
        title: 'Home',
    },
  },
};

const HomeStack = createStackNavigator(screens, {
  defaultNavigationOptions: {
    headerTintColor: '#444',
    headerStyle: { backgroundColor: '#eee', height: 60 }
  }
});

export default HomeStack;

ChooseNameStack.js

import { createStackNavigator } from 'react-navigation-stack';
import ChooseName from '../screens/ChooseName';

const screens = {
    ChooseName: {
        screen: ChooseName,
        navigationOptions: {
            title: 'ChooseName'
        },
    },
}

const AboutStack = createStackNavigator(screens, {
  defaultNavigationOptions: {
    headerTintColor: '#444',
    headerStyle: { backgroundColor: '#eee', height: 60 },
  }
});

export default AboutStack;

router.js

import { createDrawerNavigator } from 'react-navigation-drawer';
import { createAppContainer } from 'react-navigation';

// stacks
import HomeStack from './HomeStack';
import ChooseNameStack from './ChooseNameStack';

// drawer navigation options
const RootDrawerNavigator = createDrawerNavigator({
    HomeStack: {
        screen: HomeStack,
    },
    ChooseNameStack: {
        screen: ChooseNameStack,
    },
});

export default createAppContainer(RootDrawerNavigator);

navigation versions

"react-navigation": "^4.3.9",
"react-navigation-drawer": "^2.4.13",
"react-navigation-stack": "^2.4.0"

As you can see, I want to pass a name from ChooseName to Home, when Touchable is clicked and then navigate to Home page.

Thank you for responses.

Answer 1

you can pass it as props like: navigation.navigate("Home",{'id':2222}) and you are able to get it in the next route. Hope it helps

you will change this line in ChooseName.js navigation.navigate('HomeStack'); in your code to navigation.navigate('HomeStack',{name:name});

then in your Home.js change this export default function Home({ navigation }) to export default function Home({ navigation, route }) and add a console.log(route) and console.log(navigation) to understand the situation that is all