how to pass props from Home screen to BottomTabBar screen of home screen in react native?

Question

I have home screen -> below is my bottomtabbar inside home screen. I want to pass props from the home screen to bottomtabbar screen on navigation.

for eg in above picture, if I select an item from dropdown -> I want to pass that as navigation prop to consult screen which is on my bottomtabbar.

Any idea how to do it? Any leads would be great.

AppNavigation.js

export function BottomTabBar() {
  return (
    <Tab.Navigator
      lazy={false}
      initialRouteName="Home"
      tabBarOptions={{
        labelStyle: {
          color: '#FF1493',
          fontSize: 12,
        },
      }}>
    
      <Tab.Screen
        name="Home"
        // uncommnet below line to see new Home Tab
        component={HomeTabScreen}
        // uncomment below see old Home Tab
        // component={HomeScreen}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({color, size}) => (
            <MaterialIcon name="home" color="#FF1493" size={30} />
          ),
        }}
      />
      <Tab.Screen
        name="Consult"
        component={ConsultationHomeScreen}
        initialParams={{
          uri: 'some url',
        }}
        options={{
          tabBarLabel: 'Consult',
          tabBarIcon: ({color, size}) => (
            <FontAwesomeIcon name="stethoscope" color="#FF1493" size={30} />
          ),
        }}
      />
      <Tab.Screen
        name="Plans"
        component={PlansTabScreen}
        options={{
          tabBarLabel: 'Plans',
          tabBarIcon: ({color, size}) => (
            <MaterialCommunityIcons
              name="crown-outline"
              color="#FF1493"
              size={30}
            />
          ),
        }}
      />
      <Tab.Screen
        name="Chat"
        component={ChatTabScreen}
        options={{
          tabBarLabel: 'Chat',
          tabBarIcon: ({color, size}) => (
            <MaterialCommunityIcons
              name="chat-outline"
              color="#FF1493"
              size={30}
            />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

function HomeMain() {
  return (
    <HomeMainStack.Navigator>
      <HomeMainStack.Screen
        name="drawer"
        component={HomeScreenNavigationDrawer}
        options={{headerShown: false}}
      />
      <HomeMainStack.Screen
        name="Homeb"
        component={BottomTabBar}
        options={{headerShown: false}}
      />
    </HomeMainStack.Navigator>
  );
}

function RootNavigator() {
  function LogoTitle(props) {
    return (
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          marginVertical: 10,
        }}>
        <Image
          style={{width: 31.44, height: 31.2}}
          source={Images.symptomcheck_bot1}
        />
        <Text
          style={{
            marginLeft: 10,
            color: '#FFFFFF',
            fontStyle: 'italic',
            fontSize: 14,
          }}>
          {props.children}
        </Text>
      </View>
    );
  }
  return (
    <RootStack.Navigator initialRouteName="Home">
      <RootStack.Screen
        name="Home"
        component={HomeMain}
        options={{headerShown: false}}
      />

      <RootStack.Screen
        name="online"
        component={OnlineConsultationWebviewScreen}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="actual"
        component={ActualConsultationWebviewScreen}
        options={{headerShown: false}}
      />
      <RootStack.Screen name="baby" component={BabyAccuteIllnessScreen} />
      <RootStack.Screen
        name="vaccinelist"
        component={VaccinationListScreen}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Vaccination',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 18,

            width: '100%',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -70 : 50,
          },
        }}
      />
      <RootStack.Screen
        name="vaccinationdetail"
        component={VaccinationDetailScreen}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="carePlan"
        component={CarePlan}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Care Plan',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -70 : 50,
          },
        }}
      />
      <RootStack.Screen
        name="carePlanDetailed"
        component={CarePlanDetailed}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Care Plan',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -70 : 50,
          },
        }}
      />
      <RootStack.Screen
        name="vaccinereadmore"
        component={VaccinationDetailreadMoreScreen}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="symptomChecker"
        component={SymptomChecker}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Symptom Checker',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
            width: '100%',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -70 : 50,
          },
          headerTitle: (props) => <LogoTitle {...props} />,
        }}
      />
      <RootStack.Screen
        name="symptomCheckerSearch"
        component={SymptomCheckerSearch}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Hi! I’m ISHA, your health care assistant',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? 0 : 50,
          },
          headerTitle: (props) => <LogoTitle {...props} />,
        }}
      />
      <RootStack.Screen
        name="symptomCheckerQA"
        component={SymptomCheckerQA}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Hi! I’m ISHA, your health care assistant',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? 0 : 50,
          },
          headerTitle: (props) => <LogoTitle {...props} />,
        }}
      />
      <RootStack.Screen
        name="symptomCheckerAssessmentReport"
        component={symptomCheckerAssessmentReport}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Assessment Report',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -70 : 50,
          },
        }}
      />
      <RootStack.Screen
        name="symptomCheckerDetailReport"
        component={SymptomCheckerDetailReport}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Detail Report',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -100 : 50,
          },
        }}
      />
      <RootStack.Screen
        name="plactivityplanner"
        component={PLActivityPlanner}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="plactivityplannerdetail"
        component={PLActivityPlannerDetail}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="plactivityplannerreport"
        component={PLActivityPlannerReport}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="todaysgoal"
        component={TodaysGoalScreen}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="mealdesc"
        component={MealDescriptionScreen}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="nutritionassessment"
        component={NutritionAssessment}
        options={{
          // gesturesEnabled: false,
          // headerBackTitleVisible: false,
          // headerBackTitle: null,
          title: 'Nutrition Assessment',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 20,

            width: '100%',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -70 : 50,
          },
        }}
      />
      <RootStack.Screen
        name="nutritionassessmentreport"
        component={NutritionAssessmentReport}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'NutriCheck',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 20,

            width: '100%',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -70 : 50,
          },
        }}
      />

      <RootStack.Screen
        name="lactation"
        component={LaSelectSymptoms}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Hi! I’m ISHA, your health care assistant',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? 0 : 50,
          },
          headerTitle: (props) => <LogoTitle {...props} />,
        }}
      />
      <RootStack.Screen
        name="laQuestionAnswer"
        component={LaQuestionAnswer}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Hi! I’m ISHA, your health care assistant',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? 0 : 50,
          },
          headerTitle: (props) => <LogoTitle {...props} />,
        }}
      />
      <RootStack.Screen
        name="laSymptomCheckReport"
        component={LaSymptomCheckReport}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Assessment Report',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {},
        }}
      />
      <RootStack.Screen
        name="laSymptomCheckerDetailReport"
        component={LaSymptomCheckerDetailReport}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Lactation',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {
            // left: Platform.OS === 'ios' ? -70 : 50,
            // alignItems: 'center',
          },
        }}
      />
      <RootStack.Screen
        name="healthConditions"
        component={HealthConditions}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Health Conditions',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -70 : 50,
          },
        }}
      />
      <RootStack.Screen
        name="developmentscreening"
        component={DevelopmentScreeningInfo}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="dailyreadslisting"
        component={DailyReadsListingScreen}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="login"
        component={LoginScreen}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="otp"
        component={OtpScreen}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="growthPattern"
        component={GrowthPattern}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Growth Pattern',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -70 : 50,
          },
        }}
      />
    </RootStack.Navigator>
  );
}

P.S: I want to pass props from 'Home' to 'consult'

If you are using redux/context api's this should be fairly straightforward. — Swarup Bam, Dec 16 '20 at 06:59
I am not as of now @SwarupBam but could you brief how to do it using context api? — TRINA CHAUDHURI, Dec 16 '20 at 07:03
@TRINACHAUDHURI Redux/context will keep your data at one place. You don't have to pass data through component props. Refer this https://reactjs.org/docs/context.html — Swarup Bam, Dec 16 '20 at 08:20

score 0 · Answer 1 · edited Sep 25 '22 at 09:29

Use Context Api like this:


export const HomeContext = createContext({
 value: initital value here
});

const Home = () => {
const [value, setValue] = useState(initial value)
  return (
    <HomeContext.Provoider value={{value}}>
     <BottomTabs />
    </HomeContext.Provoider>
  );
}

Bottom tab Screens you can access the context value using useContext.

For example, let's say you have a search screen. In bottom tabs then:

import {HomeContext} from './Home';

const Search = () => {

const {value} = useContext(HomeContext);

 return (
  <View>
    // UI
  </View>
 )
}

how to pass props from Home screen to BottomTabBar screen of home screen in react native?

1 Answers1