React Native Navigation Custom Border - reactjs

I am a beginner in React Native. I want to configure the React Navigation 5.x with custom style. And I am unable to trim border-bottom like following. Please help me with This.
Custom Style for React Navigation
My Current Code:
function StackNavigator() {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerStyle: styles.header,
headerBackImage: () => (
<Image
style={styles.headerBack}
source={require("../assets/icons/64x/chevron-left.png")}
/>
),
headerLeftContainerStyle: {
alignItems: "flex-start",
paddingHorizontal: theme.sizes.padding / 2
},
headerTitleStyle: styles.headerTitle
}}
>
<Stack.Screen
name="Login"
component={LoginScreen}
options={{ headerShown: true }}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
header: {
height: theme.sizes.base * 5,
backgroundColor: Colors.white,
borderWidth: 0,
elevation: 0,
borderBottomWidth: 1,
borderBottomColor: Colors.grayLight
},
headerBack: {
height: 20,
width: 20
},
headerTitle: {
fontSize: 18,
fontFamily: "Quicksand",
letterSpacing: -1
}
});
Thank you in advance.


You can add this style to the cardStyle property of the screenOptions:
function StackNavigator() {
<NavigationContainer>
<Stack.Navigator
screenOptions={{
cardStyle : { backgroundColor : 'lightgray', margin : 15 },
headerStyle: styles.header,
headerBackImage: () => (
<Image
style={styles.headerBack}
source={require("../assets/icons/64x/chevron-left.png")}
/>
),
headerLeftContainerStyle: {
alignItems: "flex-start",
paddingHorizontal: theme.sizes.padding / 2
},
headerTitleStyle: styles.headerTitle
}}
>
<Stack.Screen
name="Login"
component={LoginScreen}
options={{ headerShown: true }}
/>
</Stack.Navigator>
</NavigationContainer>
}
Which will produce something like this:

Related

How to manage nested navigations so that Homepage displays Navbar when signed in?

I have two navigators and the idea is to have the main navigation container to hold the general pages: Home, SignIn, SignUp, confirmEmail and NewPassword but once the user login in to Home I would like the navigation bar to display and have its own navigation routings.
Navigation.js:
<NavigationContainer>
<Stack.Navigator screenOptions={{headerShown: false}}>
{user ? (
<Stack.Screen name="HomeScreen" component={HomeScreen} />
) : (
<>
<Stack.Screen name="SignIn" component={SignInScreen} />
<Stack.Screen name="SignUp" component={SignUpScreen} />
<Stack.Screen name="ConfirmEmail" component={ConfirmEmailScreen} />
<Stack.Screen
name="ResetPassword"
component={ResetPasswordScreen}
/>
<Stack.Screen name="NewPassword" component={NewPasswordScreen} />
</>
)}
</Stack.Navigator>
</NavigationContainer>
Navbar.js
const Navbar = () => {
const tabOffsetValue = useRef(new Animated.Value(0)).current;
return (
// <NavigationContainer>
<Tab.Navigator
screenOptions={{
tabBarShowLabel: false,
headerShown: false,
// Floating Tab Bar...
tabBarStyle: {
backgroundColor: 'white',
position: 'absolute',
// Max Height...
borderRadius: 10,
// Shadow...
},
}}>
{
// Tab Screens....
// Tab ICons....
}
<Tab.Screen
name={'Home'}
component={HomeScreen}
options={{
tabBarIcon: ({focused}) => (
<View
style={{
// centring Tab Button...
position: 'absolute',
top: 20,
}}>
<Icon
name="home"
size={20}
color={focused ? 'red' : 'gray'}></Icon>
</View>
),
}}
listeners={({navigation, route}) => ({
// Onpress Update....
tabPress: e => {
Animated.spring(tabOffsetValue, {
toValue: 0,
useNativeDriver: true,
}).start();
},
})}>
</Tab.Screen>
HomeScreen.Js
const HomeScreen = () => {
const signOut = () => {
Auth.signOut();
};
return (
<View>
<Navbar/>
<Text style={{fontSize: 24, alignSelf: 'center'}}>Welcome to Flimpi</Text>
<Text
onPress={signOut}
style={{
width: '100%',
textAlign: 'center',
color: 'red',
marginTop: 'auto',
marginVertical: 20,
fontSize: 20
}}>
Sign Out!
</Text>
</View>
);
};
Expectedly I am getting the following error:
Require cycle: src/screens/HomeScreen/index.js -> src/components/Navbar/index.js -> src/components/Navbar/Navbar.js -> src/screens/HomeScreen/index.js
Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
The Error makes sense but I just do not know how to structure the code

React Navigation / Native flickers when use custom header component

When I change screens with react-native-navigation I have a flicker of underlying background on ios, when I change screens with standard navigation everything is going smooth but with the custom one it look like it applies background color too late, is there some prop I should be aware of when dealing with custom header bar?
this is the code of custom header:
export const CustomNavigation = (props: NativeStackHeaderProps) => {
const styles = useStyleSheet(themedStyles);
return (
<SafeAreaView style={styles.wrapper}>
<Pressable onPress={props.navigation.goBack}>
<ArrowLeftIcon />
</Pressable>
<Text>{props.options.title}</Text>
<Pressable>
<NavMenuIcon />
</Pressable>
</SafeAreaView>
);
};
const themedStyles = StyleService.create({
wrapper: {
height: Platform.OS === "ios" ? 100 : 70,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
paddingHorizontal: spacing.regular,
transform: Platform.OS === "ios" ? [{ translateY: 20 }] : [],
backgroundColor: "#fff",
},
});
app.tsx
const Stack = createNativeStackNavigator<RootStackParamList>();
return (
<SafeAreaProvider onLayout={onLayoutRootView}>
<NavigationContainer>
<ApplicationProvider {...eva} theme={{ ...eva.light, ...theme }}>
<ReduxProvider store={store}>
<Stack.Navigator
initialRouteName="Home"
screenOptions={{
header: (props) => <CustomNavigation {...props} />,
}}
>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Scheduler"
component={ScheduleScreen}
options={{
title: "Plan your booking",
}}
/>
<Stack.Screen
name="LocationPicker"
component={PickLocationScreen}
/>
</Stack.Navigator>
</ReduxProvider>
</ApplicationProvider>
</NavigationContainer>
</SafeAreaProvider>
On android it looks ok, there is no background flash, only on ios. Thanks for any suggestions.

How to access the nested navigator and how to setup properly the authentication flow

I'm quite new on react native this is just a practice project. now I have module regarding on authentication of users and how will navigate dashboard via conditioning the set asyncstorage item if the storage filtered that this storage has true value the user who access will directly move his/her screen to the AuthenticatedDriverScreen.
My Question:
How to navigate in a nested navigator?
How to call the getItem storage item on Navigator Screens?
My Error:
The action 'NAVIGATE' with payload {"name":"BindedScreenComponent","params":{"screen":"DriverDashboard"}} was not handled by any navigator.
Do you have a screen named 'BindedScreenComponent'?
I have already coded some functionality like Navigators Screen, Login Screen Etc. on the next paragraph I will share to you guys the code in every screens. I hope you will understand guys what I mean.
Navigator.JS
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const Bind = createStackNavigator();
const UnauthenticatedScreen = () => {
return (
<Stack.Navigator>
<Stack.Screen
name="Login"
component={Login}
options=
{{
headerShown: false,
}}
/>
<Stack.Screen
name="Registration"
component={Register}
options={{
headerStyle: {
backgroundColor: '#4ABDFF'
},
headerTitleStyle: {
color: '#fff',
},
headerTintColor: '#fff',
}}
/>
<Stack.Screen
name="Privacy"
component={PrivacyPolicy}
options={{
headerStyle: {
backgroundColor: '#4ABDFF'
},
headerTitleStyle: {
color: '#fff',
},
headerTitle: 'Privacy Policy',
headerTintColor: '#fff',
}}
/>
<Stack.Screen
name="RegistrationSuccess"
component={RegistrationSuccess}
options=
{{
headerShown: false,
}}
/>
<Stack.Screen
name="ForgotPassword"
component={ForgotPassword}
options={{
headerStyle: {
backgroundColor: '#4ABDFF'
},
headerTitleStyle: {
color: '#fff',
},
headerTitle: 'Forgot Password',
headerTintColor: '#fff',
}}
/>
</Stack.Navigator>
)
}
const BindedScreenComponent = () => {
return (
<Bind.Navigator>
<Bind.Screen
name="DriverDashboard"
component={DriverDashboard}
options={{
headerStyle: {
backgroundColor: '#4ABDFF',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
headerTitle: 'Driver Dashboard'
}}
/>
<Bind.Screen
name="DriverProfile"
component={DriverProfile}
options={{
headerStyle: {
backgroundColor: '#4ABDFF'
},
headerTitleStyle: {
color: '#fff',
},
headerTitle: 'Profile',
headerTintColor: '#fff',
}}
/>
</Bind.Navigator>
)
}
const AuthenticatedDriverScreen = () => {
return (
<Drawer.Navigator drawerContent={props => <CustomDriverDrawer {...props} />} initialRouteName="DriverDashboard">
<Drawer.Screen
name="DriverDashboard"
component={BindedScreenComponent}
options={
{
drawerLabel: 'Home',
drawerIcon: ({ focused, color, size }) => (
<Icon type="font-awesome" name="home" style={{ fontSize: size, color: color }} />
),
}
}
/>
</Drawer.Navigator>
)
}
class Navigator extends React.Component {
constructor(props) {
super(props);
this.state = {
phone_number:'',
password:''
}
}
render() {
const isLogin = false
// try {
// const value = await AsyncStorage.getItem('access_token');
// if (value !== null) console.log(value)
// } catch (error) { // Error retrieving data }
return (
<NavigationContainer>
{isLogin ? <AuthenticatedDriverScreen /> : <UnauthenticatedScreen />}
</NavigationContainer>
)
}
}
export default Navigator;
Login.JS
const UserInfo = {phone_number:'09361876184', password: '123456'}
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
phone_number:'',
password:''
}
}
LoginSubmitFunction = async () => {
const phone_number = this.state.phone_number;
const password = this.state.password;
if(UserInfo.phone_number === phone_number && UserInfo.password === password) {
await AsyncStorage.setItem('userToken', '1');
this.props.navigation.navigate('BindedScreenComponent',{screen:'DriverDashboard'});
}else {
alert('Username or Password is Incorrect!');
}
}
render() {
return (
<SafeAreaView style={[styles.container, { backgroundColor: '#ffff' }]}>
<StatusBar barStyle="dark-content" backgroundColor="#ffff" />
<ScrollView>
<View style={{ marginTop: 60 }}>
<Text style={{ fontSize: 25, fontWeight: 'bold' }}>LOGO</Text>
<Text style={{ fontSize: 20, fontWeight: 'bold', marginTop: 30 }}>Login your credential</Text>
</View>
<View style={{ marginTop: 30 }}>
<TextInput
onChangeText={(phone_number) => this.setState({phone_number})}
value={this.state.phone_number}
placeholder="+63"
keyboardType='numeric'
style={{ height: 50, borderRadius: 5, paddingLeft: 20, borderColor: '#EEEEEE', borderWidth: 1, backgroundColor: '#EEEEEE' }}
/>
<TextInput
onChangeText={(password) => this.setState({password})}
value={this.state.password}
placeholder="Password"
secureTextEntry={true}
style={{ marginTop: 20, borderRadius: 5, paddingLeft: 20, height: 50, borderColor: '#EEEEEE', borderWidth: 1, backgroundColor: '#EEEEEE' }}
/>
</View>
<View style={{ marginTop: 30 }}>
<TouchableOpacity
onPress={this.LoginSubmitFunction}
style={{ height: 70 }} >
<Text style={{ backgroundColor: '#4ABDFF', fontSize: 20, textAlign: 'center', padding: 10, borderRadius: 5, color: '#ffff' }}>Login</Text>
</TouchableOpacity>
</View>
<View style={{ marginTop: 0, alignItems: 'center' }}>
<Text onPress={() => this.props.navigation.navigate('ForgotPassword')} style={{ fontSize: 17 }}>Forgot Password?</Text>
<Text style={{ fontSize: 17, marginTop: 10 }}>Don't have an account yet? <Text style={{ textDecorationLine: 'underline', color: '#4ABDFF', fontWeight: 'bold' }} onPress={() => this.props.navigation.navigate('Registration')}>Register Here</Text></Text>
</View>
</ScrollView>
</SafeAreaView>
)
}
}
const styles = StyleSheet.create({
container: { flex: 2, padding: 40 },
});
export default Login;
Output:

The action 'NAVIGATE' with payload {"name":"BindedScreenComponent","params":{"screen":"DriverDashboard"}} was not handled by any navigator.
Because your LoginScreen in UnauthenticatedScreen stack. But UnauthenticatedScreen not contain any screen has name "BindedScreenComponent".
With use isLogin variable to check login, You dont need use NAVIGATE.
await AsyncStorage.setItem('userToken', '1');
userToken is key, and has value is '1' in AsyncStorage.
In your Navigator.JS, You can call it:
const isLogin = await AsyncStorage.getItem('userToken') === '1'
if isLogin = true, it return AuthenticatedDriverScreen . And else, return UnauthenticatedScreen

how to create a drawer using React Native?

I want to create a drawer that appears only on my homescreen,
had tried using React Native side menu but that just hides the drawer behind then tried using createdrawernavigator
but I have a bottomtabnavigator inside stacknavigator, and am stuck on how to implement drawer navigator on top of that
below is my navigation.js
const RootStack = createStackNavigator();
const Tab = createBottomTabNavigator();
const AuthStack = createStackNavigator();
// const Drawer = createDrawerNavigator();
function AuthNavigator() {
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 (
<AuthStack.Navigator initialRouteName="login">
<AuthStack.Screen
name="login"
component={LoginScreen}
options={{headerShown: false}}
/>
<AuthStack.Screen
name="otp"
component={OtpScreen}
options={{headerShown: false}}
/>
<AuthStack.Screen name="addchild" component={AddChild} />
<AuthStack.Screen
name="acceptinvitescreen"
component={AcceptInviteScreen}
/>
<AuthStack.Screen
name="Home"
component={BottomTabBar}
options={{
headerShown: false,
}}
/>
<AuthStack.Screen
name="online"
component={OnlineConsultationWebviewScreen}
/>
<AuthStack.Screen
name="actual"
component={ActualConsultationWebviewScreen}
/>
<AuthStack.Screen name="baby" component={BabyAccuteIllnessScreen} />
<AuthStack.Screen name="vaccinelist" component={VaccinationListScreen} />
<AuthStack.Screen
name="vaccinationdetail"
component={VaccinationDetailScreen}
/>
<AuthStack.Screen
name="vaccinereadmore"
component={VaccinationDetailreadMoreScreen}
/>
<AuthStack.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} />,
}}
/>
<AuthStack.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} />,
}}
/>
<AuthStack.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} />,
}}
/>
<AuthStack.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,
},
}}
/>
<AuthStack.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,
},
}}
/>
<AuthStack.Screen
name="plactivityplanner"
component={PLActivityPlanner}
options={{headerShown: false}}
/>
<AuthStack.Screen
name="plactivityplannerdetail"
component={PLActivityPlannerDetail}
options={{headerShown: false}}
/>
<AuthStack.Screen
name="plactivityplannerreport"
component={PLActivityPlannerReport}
options={{headerShown: false}}
/>
<AuthStack.Screen
name="todaysgoal"
component={TodaysGoalScreen}
options={{headerShown: false}}
/>
<AuthStack.Screen
name="mealdesc"
component={MealDescriptionScreen}
options={{headerShown: false}}
/>
<AuthStack.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,
},
}}
/>
<AuthStack.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,
},
}}
/>
</AuthStack.Navigator>
);
}
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: 'https://qa.parentlane.com/doctors/launch-home?app_type=0',
}}
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 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={BottomTabBar}
options={{headerShown: false}}
/>
<RootStack.Screen
name="online"
component={OnlineConsultationWebviewScreen}
/>
<RootStack.Screen
name="actual"
component={ActualConsultationWebviewScreen}
/>
<RootStack.Screen name="baby" component={BabyAccuteIllnessScreen} />
<RootStack.Screen name="vaccinelist" component={VaccinationListScreen} />
<RootStack.Screen
name="vaccinationdetail"
component={VaccinationDetailScreen}
/>
<RootStack.Screen
name="vaccinereadmore"
component={VaccinationDetailreadMoreScreen}
/>
<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="developmentscreening"
component={DevelopmentScreeningInfo}
options={{headerShown: false}}
/>
<RootStack.Screen
name="login"
component={LoginScreen}
options={{headerShown: false}}
/>
<RootStack.Screen
name="otp"
component={OtpScreen}
options={{headerShown: false}}
/>
</RootStack.Navigator>
);
}
// function DrawerRootNavigator() {
// return (
// <Drawer.Navigator>
// <Drawer.Screen name="Home" component={RootNavigator} />
// </Drawer.Navigator>
// );
// }
// function DrawerAuthNavigator(){
// return(
// <Drawer.Navigator>
// <Drawer.Screen name="login" component={AuthNavigator}/>
// </Drawer.Navigator>
// )
// }
export default function SwitchRootNavigator(props) {
const signedIn = props.signedIn;
return (
<NavigationContainer>
{signedIn != null &&
signedIn != undefined &&
signedIn != '' &&
signedIn != {} ? (
<RootNavigator />
) : (
<AuthNavigator />
)}
</NavigationContainer>
);
}
Could anyone please guide me how do I wrap my "Home" with a drawernavigator which would have a button navigating to the login screen?
have been stuck since long, any leads would be great.

I might have overcomplicated things in my initial comment. Those screens you would like to have a TabBar on; put those into a bottomTabNavigator. Screens with drawer on are placed into a different drawerNavigator; and these navigators are then nested in a stackNavigator which holds the rest of the screens of your app.
// Navigators
const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();
// screens you want bottom tabs on
function TabScreens() {
return (
<Tab.Navigator>
<Tab.Screen name="A" component={A} />
<Tab.Screen name="B" component={B} />
</Tab.Navigator>
);
}
// screens you want drawer on
function DrawerScreens() {
return (
<Drawer.Navigator>
<Drawer.Screen name="C" component={C} />
<Drawer.Screen name="D" component={D} />
</Tab.Navigator>
);
}
// and both Drawer and Tabs are then nested into Stack
function App() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={TabScreens} />
<Stack.Screen name="Drawer" component={DrawerScreens} />
<Stack.Screen name="E" component={E} />
<Stack.Screen name="F" component={F} />
<Stack.Screen name="G" component={G} />
</Stack.Navigator>
);
}
To navigate between the screens call:
navigation.navigate("navigatorName",{screen: "screenName"})
I might have overcomplicated things in my initial comment.
Example on how it is done with bottomTabNavigator instead of a drawer can be found here:
https://reactnavigation.org/docs/hiding-tabbar-in-screens/

React Native Navigation Access Navigation from Stack.Screen

I have a stack navigator set up like this:
<Stack.Navigator initialRouteName="Friends">
<Stack.Screen
name="Friends"
component={Friends}
options={{
title: "Friends",
headerStyle: {
backgroundColor: colors.white,
},
headerTintColor: "#fff",
headerTitleStyle: {
fontWeight: "700",
color: colors.red,
fontSize: 20,
},
headerRight: () => (
<TouchableOpacity
style={{ marginRight: 20 }}
onPress={() => /*NAVIGATE TO ADD FRIEND*/ }
>
<Ionicons name="md-person-add" size={20} color={colors.red} />
</TouchableOpacity>
),
}}
/>
<Stack.Screen
name="AddFriend"
component={AddFriend}
options={{
title: "Add Friend",
headerStyle: {
backgroundColor: colors.white,
},
headerTintColor: "#fff",
headerTitleStyle: {
fontWeight: "700",
color: colors.red,
fontSize: 20,
},
}}
/>
</Stack.Navigator>
As you can see, I have a button on the right side of the header for the Friends screen, and when that button is clicked I'd like to navigate to the Add Friend screen.
However, I don't know how to access the navigation object that you'd typically access via props.navigation inside of the component passed into Stack.Screen.
How can I achieve this?

You can access navigation like below, the options can be a function which takes navigation and route and arguments.
<Stack.Screen
name="Friends"
component={Friends}
options={({navigation})=>({
title: "Friends",
headerStyle: {
backgroundColor: colors.white,
},
headerTintColor: "#fff",
headerTitleStyle: {
fontWeight: "700",
color: colors.red,
fontSize: 20,
},
headerRight: () => (
<TouchableOpacity
style={{ marginRight: 20 }}
onPress={() => navigation.navigate('AddFriend') }
>
<Ionicons name="md-person-add" size={20} color={colors.red} />
</TouchableOpacity>
),
})}
/>

Resources