I am using #react-navigation/bottom-tabs V6. I am trying to have transparent background on bottom. So far I cannot figure it out how to do it. Any ideas?
Result so far:
Code so far:
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
const theme = {
colors: {
background: "transparent",
},
};
<NavigationContainer theme={theme}>
<Tab.Navigator
screenOptions={{ headerShown: false }}
tabBarOptions={{
style: {
backgroundColor: 'transparent',
borderTopWidth: 0,
elevation: 0,
}
}}
>
<Tab.Screen
name="HomeNavigation"
component={HomeNavigation}
options={{
tabBarLabel: "Home",
tabBarIcon: ({ color, size }) => <Icon />,
}}
/>
<Tab.Screen name="Home" component={Home} />
</Tab.Navigator>
</NavigationContainer>
How can I get rid off this background?
Ok so this is the solution
first:
<Tab.Navigator
screenOptions={{
headerShown: false,
tabBarStyle: {
position: "absolute",
left: 0,
bottom: 0,
elevation: 0,
borderTopWidth: 0,
},
}}
>
and also this have to be added to the container:
const theme = {
colors: {
background: "transparent",
},
};
<NavigationContainer theme={theme}>
<BottomUserNavigation />
</NavigationContainer>
The Tab.Navigator Not have props called tabBarOptions.
the tabBarOptions found in screenOptions.
You can do that ->
<NavigationContainer theme={theme}>
<Tab.Navigator
screenOptions={{
headerShown: false,
tabBarStyle: { backgroundColor: "transparent" },
}}
>
<Tab.Screen
name="HomeNavigation"
component={HomeNavigation}
options={{
tabBarLabel: "Home",
tabBarIcon: ({ color, size }) => <Icon />,
}}
/>
<Tab.Screen name="Home" component={Home} />
</Tab.Navigator>
</NavigationContainer>
Just add tabBarStyle props in the tabBarStyle and set the styles
Or you can add screen options for only one screen like that.
<NavigationContainer theme={theme}>
<Tab.Navigator
screenOptions={{
headerShown: false,
}}
>
<Tab.Screen
name="HomeNavigation"
component={HomeNavigation}
options={{
tabBarLabel: "Home",
tabBarIcon: ({ color, size }) => <Icon />,
tabBarStyle:{backgroundColor:"transparent"}
}}
/>
<Tab.Screen name="Home" component={Home} />
</Tab.Navigator>
</NavigationContainer>
Related
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
MyDrawer.js
function BottomTabNavigator() {
return (
<Tab.Navigator
initialRouteName="MainHome"
screenOptions={({ route }) => ({
headerShown: false,
tabBarLabelStyle: { fontSize: RFPercentage(1.60) },
tabBarInactiveTintColor: "#444444",
tabBarActiveTintColor: "#444444",
tabBarStyle: {
height: verticalScale(70),
paddingBottom: scale(10),
},
})}>
<Tab.Screen
name={"AccountsScreen"}
component={AccountsScreen}
options={{
title: "ACCOUNTS",
tabBarIcon: ({ color, size }) => (
<Image source={require("./img/bankTab.png")}
style={{ width: scale(30), height: scale(30), borderRadius: 0 }} />
),
}}
/>
<Tab.Screen
name={"McoinScreen"}
component={McoinScreen}
options={{
title: "MCOINS",
tabBarIcon: ({ color, size }) => (
<Image source={require("./img/dollar.png")}
style={{ width: scale(30), height: scale(30), borderRadius: 24 }} />
),
}}
/>
<Tab.Screen
name={"MainHome"}
component={MainHome}
options={{
title: "GET CASH",
tabBarIcon: ({ color, size }) => (
<Image source={require("./img/coinimg.png")}
style={{ width: scale(30), height: scale(30), borderRadius:0 }} />
),
}}
/>
<Tab.Screen
name={"ActivityScreen"}
component={ActivityScreen}
options={{
title: "ACTIVITY",
tabBarIcon: ({ color, size }) => (
<Image source={require("./img/activity.png")}
style={{ width: scale(30), height: scale(28), borderRadius: 0 }} />
),
}}
/>
<Tab.Screen
name={"ProfileScreen"}
component={ProfileScreen}
options={{
title: "PROFILE",
tabBarIcon: ({ color, size }) => (
<Image source={require("./img/profileimg.png")}
style={{ width: scale(26), height: scale(26), borderRadius:0 }} />
),
}}
/>
</Tab.Navigator>
);
}
const MyDrawer = () => {
return (
<Drawer.Navigator
drawerContent={props => <CustomeDrawer {...props} />}
initialRouteName="MainHome"
screenOptions={{
headerShown: false,
headerTransparent: false,
drawerActiveBackgroundColor: '#fff',
drawerActiveTintColor: '#fff',
drawerInactiveBackgroundColor: '#fff',
drawerStyle: {
width: scale(250),
},
drawerLabelStyle: { fontSize: RFPercentage(3), color: '#000' }
}}>
<Drawer.Screen
name="Home"
component={BottomTabNavigator}
options={{
title: "Get Cash",
drawerIcon: ({ color }) => (
<Image style={{ width: scale(25), height: scale(25), }}
source={require('./img/rupee.png')} />
)
}}
screenOptions={{
headerShown: true,
}}
/>
<Drawer.Screen
name="AccountsScreen"
component={AccountsScreen}
options={{
title: "Activity",
drawerIcon: ({ color }) => (
<Image style={{ width: scale(25), height: scale(25), }}
source={require("./img/page.png")} />
)
}}
screenOptions={{
headerShown: true,
}}
/>
<Drawer.Screen
name="FriendsScreen"
component={FriendsScreen}
options={{
title: "Friends",
drawerIcon: ({ color }) => (
<Image style={{ width: scale(25), height: scale(25), }}
source={require("./img/friends.png")} />
)
}}
screenOptions={{
headerShown: true,
}}
/>
<Drawer.Screen
name="ReferEnrnScreen"
component={ReferEnrnScreen}
options={{
title: "Refer & Earn",
drawerIcon: ({ color }) => (
<Image style={{ width: scale(25), height: scale(25), }}
source={require("./img/invite.png")} />
)
}}
screenOptions={{
headerShown: true,
}}
/>
<Drawer.Screen
name="ShopScreen"
component={ShopScreen}
options={{
title: "Shop",
drawerIcon: ({ color }) => (
<View style={{ flexDirection: 'row' }}>
<Image style={{ width: scale(25), height: scale(25), }}
source={require("./img/cart.png")} />
<View style={{
marginLeft:deviceWidth/2.10, position: 'absolute',
backgroundColor: "#2192FF", height: verticalScale(25),
width: scale(50), borderRadius: 5,
marginTop:verticalScale(5),
alignItems: 'center', justifyContent: 'center'
}}>
<Text style={{ color: "#fff",fontSize: RFPercentage(2) }}>New</Text>
</View>
</View>
)
}}
screenOptions={{
headerShown: true,
}}
/>
<Drawer.Screen
name="HelpScreen"
component={HelpScreen}
options={{
title: "Help",
drawerIcon: ({ color }) => (
<Image style={{ width: scale(25), height: scale(25),}}
source={require("./img/help.png")} />
)
}}
screenOptions={{
headerShown: true,
}}
/>
<Drawer.Screen
name="AboutusScreen"
component={AboutusScreen}
options={{
title: "About us",
drawerIcon: ({ color }) => (
<Image style={{ width: scale(25), height: scale(25)}}
source={require('./img/information.png')}/>
)
}}
screenOptions={{
headerShown: true,
}}
/>
</Drawer.Navigator>
);
}
App.js
const App = () => {
return (
<NavigationContainer>
<StatusBar backgroundColor="#000" />
<Stack.Navigator initialRouteName="Language" screenOptions={{ headerShown: false }}>
<Stack.Screen name="Splash" component={Splash} />
<Stack.Screen name="HomeScreen" component={HomeScreen} options={horizontalAnimation} />
<Stack.Screen name='PermissionPage' component={PermissionPage} options={horizontalAnimation} />
<Stack.Screen name='Login' component={Login} options={horizontalAnimation} />
<Stack.Screen name='MobileNumber' component={MobileNumber} options={verticalAnimation} />
<Stack.Screen name='PhoneSetting' component={PhoneSetting} />
<Stack.Screen name='ConformOtp' component={ConformOtp} options={verticalAnimation} />
<Stack.Screen name='StatusScreen' component={StatusScreen} options={horizontalAnimation} />
<Stack.Screen name='IncomeReceive' component={IncomeReceive} options={verticalAnimation} />
<Stack.Screen name='ReferralCode' component={ReferralCode} options={horizontalAnimation} />
<Stack.Screen name='Language' component={Language} options={horizontalAnimation} />
<Stack.Screen name='MainHome' component={MyDrawer} options={verticalAnimation} />
<Stack.Screen name='Notification' component={Notification} options={horizontalAnimation} />
<Stack.Screen name='KycForm' component={KycForm} options={horizontalAnimation} />
</Stack.Navigator>
</NavigationContainer>
);
}
Output:
here img active screen is get coin
but when I navigate to profile screen tab bar is hide
I'm creating a app,it's releted to loan
I want output like this if I click only profile screen then my tab bar is hide only for profile screen,
I don't know how to do that,
any one can help me ?
Thank you!
The below code is for bottom tab navigator how do I change color of it!
I tried many things like changing the color of the background using style options tried screen options color but it was not working I even activetint color and other but it was only icons and all .If anyone can help me regarding this I would be grateful :)
<Tab.Navigator initialRouteName='CustomerStack'
screenOptions={({ route, }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
let rn = route.name;
if (rn === "CustomDrawer") {
iconName = focused ? 'home' : 'home'
}
else if (rn === "CustomerStack") {
iconName = focused ? 'home' : 'home'
}
else if (rn === "Cart") {
iconName = focused ? 'shopping-cart' : 'shopping-cart'
} else if (rn === "Account") {
iconName = focused ? 'user' : 'user'
}
return <User name={iconName} size={size} color={color} />
},
})}>
This is what I tried
<Tab.Navigator
tabBarOptions={{
activeTintColor: '#e91e63',
style: {
backgroundColor: 'orange',
},
}}
>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>
Try in this way:
<Tab.Navigator
screenOptions={{
tabBarStyle: {
backgroundColor: 'orange',
},
}}>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>
According to the new official document you can check below code:
<Tab.Navigator
initialRouteName="Feed"
activeColor="white"
labelStyle={{ fontSize: 12 }}
shifting={true}
labeled={true}
>
<Tab.Screen
name="Feed"
component={Feed}
options={{
tabBarLabel: 'Home',
tabBarColor: 'red',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="home" color={color} size={26} />
),
}}
/>
<Tab.Screen
name="Notifications"
component={Notifications}
options={{
tabBarLabel: 'Updates',
tabBarColor: 'blue',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="bell" color={color} size={26} />
),
}}
/>
<Tab.Screen
name="Profile"
component={Profile}
options={{
tabBarLabel: 'Profile',
tabBarColor: 'green',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="account" color={color} size={26} />
),
}}
/>
</Tab.Navigator>
Set the background color of Tab.Navigator like below and also you can set tabBarActiveTintColor and tabBarInactiveTintColor so no need to set tintcolor on particular component:
import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
function HomeScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
function SettingsScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator screenOptions={{
tabBarStyle: {
backgroundColor: 'orange',
},
tabBarActiveTintColor: 'red',
tabBarInactiveTintColor: 'green',
}}>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}
I am trying to create my Authentication flow where I store my token in async storage, upon mounting my entry point checks the state of token if it is null then it goes to AuthNavigator or RootNavigator, however upon adding the code I have tried build many a times, each time it is being stuck at the splashscreen and not moving forward, my code is as follows:
App.js
import 'react-native-gesture-handler';
import React, {useEffect,useState} from 'react';
import SwitchRootNavigator from './src/navigationNative/AppNavigation';
import AsyncStorage from '#react-native-community/async-storage';
export default function App() {
const [userObject,setUserObject]=useState({});
const getData = async () => {
try {
const jsonValue = await AsyncStorage.getItem('user_object');
// return jsonValue != null ? JSON.parse(jsonValue) : null;
setUserObject(jsonValue);
} catch (e) {
console.log(e);
}
};
useEffect(() => {
getData();
});
return(
<>
{console.log('objjjj',userObject)}
<SwitchRootNavigator signedIn={userObject}/>
</>);
}
AppNavigation.js:
import * as React from 'react';
import {View, Image, Text, Platform} from 'react-native';
import {NavigationContainer} from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import LoginScreen from '../screens/authentication/LoginScreen.native';
import OtpScreen from '../screens/authentication/OtpScreen.native';
import HomeScreen from '../screens/HomeScreen/HomeScreen.native';
import ConsultationHomeScreen from '../screens/Consult/ConsultationHomeScreen';
import PlansScreen from '../screens/PlansScreen';
import AcceptInviteScreen from '../screens/AcceptInviteScreen';
import OnlineConsultationWebviewScreen from '../screens/Consult/OnlineConsultationWebviewScreen';
import ActualConsultationWebviewScreen from '../screens/Consult/ActualConsultationWebviewScreen';
import VaccinationDetailreadMoreScreen from '../screens/HomeScreen/screens/Vaccination/VaccinationDetailreadMoreScreen';
import PLActivityPlanner from '../screens/activityplanner/PLActivityPlanner';
import PLActivityPlannerDetail from '../screens/activityplanner/PLActivityPlannerDetail';
import PLActivityPlannerReport from '../screens/activityplanner/PLActivityPlannerReport';
import SymptomChecker from '../screens/symptom-checker/symptom-checker';
import SymptomCheckerSearch from '../screens/symptom-checker/symptom-checker-search';
import symptomCheckerAssessmentReport from '../screens/symptom-checker/symptom-checker-assessment-report';
import SymptomCheckerQA from '../screens/symptom-checker/symptom-checker-question-answer';
import AddChild from '../screens/Child/AddChild';
import BabyAccuteIllnessScreen from '../screens/Consult/BabyAccuteIllnessScreen';
import VaccinationListScreen from '../screens/HomeScreen/screens/Vaccination/VaccinationListScreen';
import VaccinationDetailScreen from '../screens/HomeScreen/screens/Vaccination/VaccinationDetailScreen';
import SymptomCheckerDetailReport from '../screens/symptom-checker/symptom-checker-detail-report';
import TodaysGoalScreen from '../screens/diet/TodaysGoalScreen';
import MealDescriptionScreen from '../screens/diet/MealDescriptionScreen';
import {Images} from '../assets/index.js';
import HomeTabScreen from '../screens/HomeScreen/HomeTabScreen';
const RootStack = createStackNavigator();
const Tab = createBottomTabNavigator();
const AuthStack = createStackNavigator();
function AuthNavigator() {
return (
<AuthStack.Navigator>
<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.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={PlansScreen}
options={{
tabBarLabel: 'Plans',
tabBarIcon: ({color, size}) => (
<MaterialCommunityIcons
name="crown-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>
<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.Navigator>
);
}
export default function SwitchRootNavigator(props) {
const signedIn = props.signedIn;
return (
<NavigationContainer>
{signedIn != null && signedIn != undefined && signedIn != '' ? (
<RootNavigator />
) : (
<AuthNavigator />
)}
</NavigationContainer>
);
}
the console is showing up to be as follows:
we can clearly see from the above image that the object is null, hence my entrypoint file is rendering, however the app is not moving forward to the LoginScreen.
Kindly help, any lead would be great, thanks.
Looks like it is an infinite loop of useEffect because of no dependency and once it sets the state hook of setUserObject, function component got re-render and re-trigger useEffect.
Please add dependency array empty [] and let me know if it fixes.
Example :
useEffect(() => {
getData();
},[]);
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: