How to get params in other App Container - React Navigation?

Question

I want to use the params I passed to Profile Screen and he is in a separate App Container,

And I create TopTabs and put it in a specific AppContainer because I don't have any way to use it in a one AppContainer so how I Get these Params from another AppContainer?

So My Code here's

First thing, now I'm in the Map Screen and want to navigate to profile screen and pass some params like this

this.props.navigation.navigate('ProviderProfile', {
    providerId: marker.id,
    providerName: marker.name,
    providerService: marker.service,
    gKey: marker.gKey,
    token: marker.token._55,
    region: region
}

And here is Profile Screen, Contain let's say Card and TobTabs "I wrap it in a separate AppContainer" and want to use params I passed in these TopTabs "every single tab" so how to handle these OR pass these params to every single Tab?

ProviderProfile.js

import React, { Component } from "react";
import Icon from "react-native-vector-icons/Ionicons";
import firebase from "react-native-firebase";

import { createAppContainer } from "react-navigation";

import { NavTabs } from "./ProviderTabs/NabTabs";
import { View, Text, StyleSheet, TouchableOpacity, Image } from "react-native";
console.disableYellowBox = true;

class ProviderProfile extends Component {
  static navigationOptions = ({ navigation }) => {
    const { state } = navigation;
    return {
      title: ` ${state.params.providerName}` || "profile"
    };
  };

  constructor(props) {
    super(props);
    this.state = {
      providerId: this.props.navigation.getParam("providerId"),
      providerService: this.props.navigation.getParam("providerService"),
      providerName: this.props.navigation.getParam("providerName"),
      gKey: this.props.navigation.getParam("gKey"),
      token: this.props.navigation.getParam("token"),
      region: this.props.navigation.getParam("region"),
      fav: false
    };
  }

  _addToFavorite = () => {
    const { providerName, providerService, providerId, fav } = this.state;
    const currentUser = firebase.auth().currentUser.uid;
    this.setState({ fav: !fav });
    const ref = firebase
      .database()
      .ref(`favorites/${currentUser}/${providerId}`);
    if (!fav) {
      ref
        .set({
          ProviderId: providerId,
          providerName: providerName,
          providerService: providerService
        })
        .then(() => alert("Great, Added to your favorite list"));
    } else {
      ref.remove();
    }
  };
  render() {
    const {
      providerName,
      providerService,
      providerId,
      fav,
      gKey,
      region,
      token
    } = this.state;
    return (
      <View style={styles.container}>
        {/* <Text>{gKey}</Text> */}
        <Image
          resizeMode="contain"
          source={require("../assets/marker.png")}
        />

        <View>
          <View>
            <Icon
              name={`ios-heart${fav ? "" : "-empty"}`}
              size={35}
              color="#f00"
              onPress={this._addToFavorite}
            />
          </View>
          <Text>
            <Icon name="ios-star" size={20} color="#f2ba13" />
            <Icon name="ios-star" size={20} color="#f2ba13" />
            <Icon name="ios-star" size={20} color="#f2ba13" />
            <Icon name="ios-star-half" size={20} color="#f2ba13" />
            <Icon name="ios-star-outline" size={20} color="#f2ba13" />
          </Text>
          <Text style={{ fontSize: 19, color: "#000", padding: 5 }}>
            {providerName}
          </Text>
          <Text>
            Service: <Text>{providerService}</Text>
          </Text>

          <View style={{ flexDirection: "row", marginTop: 10 }}>
            <TouchableOpacity
              onPress={() => alert("Message")}
            >
              <Text>
                Message
              </Text>
            </TouchableOpacity>

            <TouchableOpacity
          
              onPress={() =>
                this.props.navigation.navigate("Order", {
                  providerName,
                  providerId,
                  providerService,
                  gKey,
                  token,
                  region
                })
              }
            >
              <Text
              
              >
                Send Order
              </Text>
            </TouchableOpacity>
          </View>
        </View>
        <Roots /> // Here's Tabs 
      </View>
    );
  }
}


const Roots = createAppContainer(NavTabs);
export default ProviderProfile;

And Here is a Tabs Screen "NavTabs"

import {
  createMaterialTopTabNavigator,
} from "react-navigation";
import AboutScreen from "./About";
import GalaryScreen from "./Galary";
import ReviewsScreen from "./Reviews";
export const NavTabs = createMaterialTopTabNavigator(
  {
    About: { screen: AboutScreen },
    Galaty: { screen: GalaryScreen },
    Reviews: { screen: ReviewsScreen }
  },
  {
    tabBarOptions: {
      activeTintColor: "#fff",
      inactiveTintColor: "#ddd",
      tabStyle: {
        justifyContent: "center"
      },
      indicatorStyle: {
        backgroundColor: "#fcc11e"
      },
      style: {
        backgroundColor: "#347ed8"
      }
    }
  }
);

As you see, I want to use the username in Tab "About" or other Tabs

Answer 1

Send params:

this.props.navigation.navigate('RouteName', { /* params go here */ })

Get params:

this.props.navigation.getParam(paramName, defaultValue)

Example:

this.props.navigation.navigate('NameListScreen', { names:["John","Mary"] })

let params = this.props.navigation.getParam(names, [])

Answer 2

I haven't use React Navigation myself but in their documentation say you can pass props to App Containers, so as you have defined the state with the props from the MapScreen you should probably pass them as props where you have defined your NavTabs Component as <Roots />

Also, there is another alternative to want to achieve as they present in here and it will be done in a redux way.