Strange Shadow in TabBar Styles - reactjs

please somebody help me, does anybody know about this strange shadow box in my tab bar? i cant change and its driving me crazy:
So this is my code:
const Tab = createBottomTabNavigator();
export default () => (
<Tab.Navigator
tabBar={props => <CustomTabBar2 {...props} />}
screenOptions={({route}) => ({
headerShown: false,
tabBarShowLabel: true,
tabBarInactiveTintColor: Colors.dark,
tabBarStyle: styles.tabBarStyle,
tabBarActiveTintColor: Colors.primary,
tabBarIcon: ({color, size, focused}) => {
let iconName;
if (route.name === 'Home') {
iconName = focused ? 'ios-home-sharp' : 'ios-home-outline';
} else if (route.name === 'Sequences') {
iconName = focused ? 'settings' : 'settings-outline';
} else if (route.name === 'Animals') {
iconName = focused ? 'wallet' : 'wallet-outline';
} else if (route.name === 'Plants') {
iconName = focused
? 'md-notifications-sharp'
: 'md-notifications-outline';
}
return <Icon name={iconName} size={32} color={color} />;
},
})}>
<Tab.Screen
name="Home"
component={MainStack}
options={{headerShown: false}}
/>
<Tab.Screen
name="Sequences"
component={SequencesStack}
options={{headerShown: false}}
/>
<Tab.Screen name="Animals" component={Animals} />
<Tab.Screen name="Plants" component={Plants} />
</Tab.Navigator>
);
const styles = StyleSheet.create({
tabBarStyle: {
position: 'absolute',
backgroundColor: Colors.transparent,
},
});
and this is the props that im passing to my tab bar
const CustomTabBar = props => {
return (
<View>
<View style={styles.tabBar} />
<BottomTabBar {...props} />
</View>
);
};
export default CustomTabBar;
const styles = StyleSheet.create({
tabBar: {
position: 'absolute',
right: 0,
left: 0,
bottom: 0,
height: 90,
backgroundColor: Colors.white,
borderTopLeftRadius: 35,
borderTopRightRadius: 35,
alignContent: 'center',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
},
});
I tried to change everything in both sides but i cannot find the styles thats making this shadow between my tabbar, is something wrong or anybody has like a example to show me? Thanks so much

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

How to set the background color of Tab.Navigator in 2023?

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>
);
}

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 can I create a custom tabbar using React Navigation 5?

So, here is my tabbar:
I tried to use just a common navigation between screens when pressing the button, but that's not working in my situation. Also all of the methods I saw in google are deprecated. Is there a possibility to make a custom tabbar in React Navigation 5?
You should implement your custom tab bar, I created one as you have shown in the screenshot
Live Snack
import * as React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '#expo/vector-icons';
function HomeScreen() {
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
}}>
<Text>Home!</Text>
</View>
);
}
function SettingsScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
function MyTabBar({ state, descriptors, navigation }) {
return (
<View
style={{
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
flexDirection: 'row',
backgroundColor: '#ccc',
height: 60,
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
justifyContent: 'space-between',
alignItems: 'center',
}}>
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const label =
options.tabBarLabel !== undefined
? options.tabBarLabel
: options.title !== undefined
? options.title
: route.name;
const isFocused = state.index === index;
const onPress = () => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
});
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name);
}
};
const onLongPress = () => {
navigation.emit({
type: 'tabLongPress',
target: route.key,
});
};
return (
<TouchableOpacity
accessibilityRole="button"
accessibilityStates={isFocused ? ['selected'] : []}
accessibilityLabel={options.tabBarAccessibilityLabel}
testID={options.tabBarTestID}
onPress={onPress}
onLongPress={onLongPress}
style={{ flex: 1, justifyContent: 'space-between' }}>
{route.name === 'Home' ? (
<MaterialCommunityIcons
style={{ alignSelf: 'center' }}
name="home"
size={22}
color={isFocused ? '#673ab7' : '#222'}
/>
) : (
<MaterialCommunityIcons
style={{ alignSelf: 'center' }}
name="settings"
color={isFocused ? '#673ab7' : '#222'}
size={22}
/>
)}
<View
style={{
width: 8,
height: 3,
backgroundColor: isFocused ? '#00f' : '#777',
alignSelf: 'center',
}}
/>
</TouchableOpacity>
);
})}
</View>
);
}
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
tabBarOptions={{
showIcon: true,
showLabel: false,
activeTintColor: 'red',
}}
tabBar={(props) => <MyTabBar {...props} />}>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}

Resources