Hello guys I want to create stylish and custom bottom tab navigation in react native can anyone have any idea how to create this mention in above
const customTabBarStyle = {
activeTintColor: '#0091EA',
inactiveTintColor: 'gray',
style: {backgroundColor: 'white' },
}
return (
<Tab.Navigator
initialRouteName="Home"
activeColor="#fff"
tabBarOptions={customTabBarStyle}
shifting="false">
<Tab.Screen
name="Home"
options={{
tabBarLabel: '',
tabBarIcon: ({ color }) => (
<Icon name="home" color={color} size={26} />
)
}}
component={HomeScreen} />
<Tab.Screen
name="Workout"
options={{
tabBarLabel: '',
tabBarIcon: ({ color }) => (
<Icon name="fitness-center" color={color} size={26} />
)
}}
component={WorkoutTabScreen} />
<Tab.Screen
name="Add"
options={{
tabBarLabel: '',
tabBarIcon: ({ color }) => (
<View
style={{
position: 'absolute',
bottom: 0, // space from bottombar
height: 68,
width: 68,
borderRadius: 68,
justifyContent: 'center',
alignItems: 'center',
}}
>
<Icon name="add-circle-outline" color="grey" size={68}/>
</View>
)
}}
component={PayScreenComponent}/>
<Tab.Screen
name="Store"
options={{
tabBarLabel: '',
tabBarIcon: ({ color }) => (
<Icon name="store" color={color} size={26} />
)
}}
component={StoreLandingScreen} />
<Tab.Screen
name="Profile"
options={{
tabBarLabel: '',
tabBarIcon: ({ color }) => (
<Icon name="perm-identity" color={color} size={26} />
)
}}
component={ProfileScreen} />
</Tab.Navigator>
);
In React Navigation V5, there is a prop for Tab.Navigator component which you can pass whole custom bottom bar component
<Tab.Navigator tabBar={(props) => <CustomTabBar/>}>
<Tab.Screen .../>
</Tab.Navigator>
Nice explanation with good example to use custom tab bar using react-navigation
https://dev.to/hrastnik/lets-create-a-custom-animated-tab-bar-with-react-native-3496
Have a look on this great framework, React-Native-Tab-View.
https://github.com/react-native-community/react-native-tab-view
Just use tabBarPosition: bottom and render your Tabs as you'd like to.
import {createBottomTabNavigator,} from 'react-navigation'
const ACTIVE_TAB_COLOR = '#60C3FF'
const INACTIVE_TAB_COLOR = '#aaa'
const BottomStack = createBottomTabNavigator(
{
TAB_WALLET: {
screen:Screen1,
navigationOptions: {
tabBarLabel: 'Screen1',
tabBarIcon: ({ focused }) => <Icon name='iconname' focused={focused} color={focused ? ACTIVE_TAB_COLOR : INACTIVE_TAB_COLOR}/>
}
},
TAB_SEND: {
screen: Screen2,
navigationOptions: {
tabBarLabel: 'Screen2',
tabBarIcon: ({ focused }) => <Icon name='search' focused={focused} color={focused ? ACTIVE_TAB_COLOR : INACTIVE_TAB_COLOR} />
}
},
TAB_ACTIVITIES: {
screen: Screen3,
navigationOptions: {
tabBarLabel: 'Screen3'
tabBarIcon: ({ focused }) => <Icon name='paper' focused={focused} color={focused ? ACTIVE_TAB_COLOR : INACTIVE_TAB_COLOR}/>
}
}
},
{
tabBarPosition: 'bottom',
swipeEnabled: false,
animationEnabled: false,
tabBarOptions: {
activeTintColor: ACTIVE_TAB_COLOR,
inactiveTintColor: INACTIVE_TAB_COLOR,
showLabel: true,
style: {
borderTopWidth: 0,
paddingTop: 3,
paddingBottom: 4,
height: 60,
shadowColor: '#000',
shadowOpacity: 0.1,
shadowRadius: 20,
shadowOffset: { width: 0, height: 0 }
}
}
})
Related
How to remove the Header from my App? Why is the Header displayed?
I want to remove the title from the Header, since each page has its own title, and that title takes up space from the screens.
I do not understand why it is displayed. I'm following a tutorial and as many times as I go through, I don't see a way to remove this.
I have followed the official documentation, but I cannot get rid of this nonsensical Header.
The navigation is handled from the AppStack.js file and the Header titles displayed are handled from the <Tab.Navigator> <Tab.Screen /> </Tab.Navigator>, but this is really the bottom tabs, and however, they are also displayed in the Header.
I show some image of what I cannot remove
How do I remove this Header which is unnecessary?
I have the correct dependencies:
"react": "17.0.2",
"react-native": "0.66.1",
"react-native-gesture-handler": "^ 1.10.3",
"react-native-onboarding-swiper": "^ 1.1.4",
"react-native-reanimated": "^ 2.2.3",
"react-native-safe-area-context": "^ 3.3.2",
"react-native-screens": "^ 3.8.0",
"react-native-vector-icons": "^ 8.1.0",
"react-native-webview": "^ 11.14.1",
"styled-components": "^ 5.3.3"
AppStack.js
import React from 'react'
import { View, TouchableOpacity, Text } from 'react-native'
import { createStackNavigator } from '#react-navigation/stack'
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import Ionicons from 'react-native-vector-icons/Ionicons'
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'
import HomeScreen from '../screens/HomeSreen'
import ChatScreen from '../screens/ChatScreen'
import ProfileScreen from '../screens/ProfileScreen'
import AddPostScreen from '../screens/AddPostScreen'
const Stack = createStackNavigator()
const Tab = createBottomTabNavigator()
const FeedStack = ({ navigation }) => (
<Stack.Navigator>
<Stack.Screen
name="Social React Native"
component={HomeScreen}
options={{
headerTitleAlign: 'center',
headerTitleStyle: {
color: '#2e64e5',
fontFamily: 'Kufam-SemiBoldItalic',
fontSize: 18,
},
headerStyle: {
shadowColor: '#fff',
elevation: 0,
},
headerRight: () => (
<View style={{ marginRight: 10 }}>
<FontAwesome5.Button
name="plus"
size={22}
backgroundColor="#fff"
color="#2e64e5"
onPress={() => navigation.navigate('AddPost')}
/>
</View>
),
}}
/>
<Stack.Screen
name="AddPost"
component={AddPostScreen}
options={{
headerTitleAlign: 'center',
headerStyle: {
backgroundColor: '#2e64e515',
shadowColor: '#2e64e515',
elevation: 0,
},
headerBackTitleVisible: false,
headerBackImage: () => (
<View style={{ marginLeft: 15 }}>
<Ionicons name="arrow-back" size={25} color="#2e64e5" />
</View>
),
}}
/>
<Stack.Screen
name="HomeProfile"
component={ProfileScreen}
options={{
headerTitleAlign: 'center',
headerStyle: {
backgroundColor: '#fff',
shadowColor: '#fff',
elevation: 0,
},
headerBackTitleVisible: false,
headerBackImage: () => (
<View style={{ marginLeft: 15 }}>
<Ionicons name="arrow-back" size={25} color="#2e64e5" />
</View>
),
}}
/>
</Stack.Navigator>
)
const ProfileStack = ({ navigation }) => (
<Stack.Navigator>
<Stack.Screen
name="Profile"
component={ProfileScreen}
options={{
headerShown: false,
}}
/>
</Stack.Navigator>
)
const AppStack = () => {
const getTabBarVisibility = (route) => {
const routeName = route.state
? route.state.routes[route.state.index].name
: '';
if (routeName === 'Chat') {
return false;
}
return true;
}
return (
<Tab.Navigator
screenOptions={{
activeTintColor: '#2e64e5'
}}>
<Tab.Screen
name="Home"
component={FeedStack}
options={({ route }) => ({
tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="home-outline"
color={color}
size={size}
/>
),
})}
/>
<Tab.Screen
name="Messages"
component={ChatScreen}
options={({ route }) => ({
tabBarVisible: getTabBarVisibility(route),
tabBarIcon: ({ color, size }) => (
<Ionicons
name="chatbox-ellipses-outline"
color={color}
size={size}
/>
),
})}
/>
<Tab.Screen
name="Profile"
component={ProfileStack}
options={{
// tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) => (
<Ionicons name="person-outline" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
)
}
export default AppStack
IMAGES:
you can add options={{ headerShown: false }}
<Tab.Screen
name="Messages"
component={ChatScreen}
options={({ route }) => ({
headerShown: false,
tabBarVisible: getTabBarVisibility(route),
tabBarIcon: ({ color, size }) => (
<Ionicons
name="chatbox-ellipses-outline"
color={color}
size={size}
/>
),
})}
/>
I have added a chat to my app with react-native-gifted-chat and I want to remove the taskbar (tabBar) on the specific chat screen, to offer more space and a better user experience.
This happens on iOS and Android
But I can't hide it, despite trying different ways to do it:
Add tabBarVisible: false,
I have added my function
const getTabBarVisibility = (route) => {
const routeName = route.state
? route.state.routes [route.state.index] .name
: '';
if (routeName === 'Chat') {
return false
}
return true
}
I have added react-navigation options:
(https://github.com/react-navigation/react-navigation/issues/7677)
const getTabBarVisible = (route) => {
const routeName = route.state
? route.state.routes [route.state.index] .name
: route.params? .screen || 'Home';
if (routeName === 'Details') {
return false;
}
return true;
}
But I can't get tabBar to hide on this screen.
I show screenshots and the code I have tried to fix this:
const MessageStack = ({ navigation }) => (
<Stack.Navigator>
<Stack.Screen name="Messages" component={MensajeScreen} />
<Stack.Screen
name="Chat"
component={ChatScreen}
options={({ route }) => ({
//tabBarVisible: route.state && route.state.index === 0,
title: route.params.userName,
headerBackTitleVisible: false,
//tabBarVisible:false
})}
/>
</Stack.Navigator>
)
const ProfileStack = ({ navigation }) => (
<Stack.Navigator>
<Stack.Screen
name="Profile"
component={ProfileScreen}
options={{
headerShown: false,
}}
/>
</Stack.Navigator>
)
const AppStack = () => {
const getTabBarVisible = (route) =>{
const routeName = route.state
? route.state.routes[route.state.index].name
: route.params?.screen || 'Home';
if (routeName === 'Details') {
return false;
}
return true;
}
return (
<Tab.Navigator
screenOptions={{
activeTintColor: '#2e64e5'
}}>
<Tab.Screen
name="Home"
component={FeedStack}
options={({ route }) => ({
tabBarLabel: 'Home',
headerShown: false,
tabBarVisible: route.state && route.state.index === 0,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="home-outline"
color={color}
size={size}
/>
),
})}
/>
<Tab.Screen
name="Messages"
component={MessageStack}
options={({ route }) => ({
tabBarVisible: getTabBarVisible(route),
//tabBarVisible:false,
//tabBarVisible: getTabBarVisibility(route),
tabBarVisible: route.state && route.state.index === 0,
headerShown: false,
tabBarIcon: ({ color, size }) => (
<Ionicons
name="chatbox-ellipses-outline"
color={color}
size={size}
/>
),
})}
/>
<Tab.Screen
name="Profile"
component={ProfileStack}
options={{
headerShown: false,
tabBarIcon: ({ color, size }) => (
<Ionicons name="person-outline" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
)
}
export default AppStack
///////////////////////////////////////////////
<Stack.Screen
name="HomeProfile"
component={ProfileScreen}
options={{
headerTitleAlign: 'center',
headerStyle: {
backgroundColor: '#fff',
shadowColor: '#fff',
elevation: 0,
},
headerBackTitleVisible: false,
headerBackImage: () => (
<View style={{ marginLeft: 15 }}>
<Ionicons name="arrow-back" size={25} color="#2e64e5" />
</View>
),
}}
/>
</Stack.Navigator>
);
const MessageStack = ({ navigation }) => (
<Stack.Navigator>
<Stack.Screen name="Messages" component={MensajeScreen} />
<Stack.Screen
name="Chat"
component={ChatScreen}
options={({ route }) => ({
//tabBarVisible: route.state && route.state.index === 0,
title: route.params.userName,
headerBackTitleVisible: false,
//tabBarVisible:false
})}
/>
</Stack.Navigator>
)
const ProfileStack = ({ navigation }) => (
<Stack.Navigator>
<Stack.Screen
name="Profile"
component={ProfileScreen}
options={{
headerShown: false,
}}
/>
</Stack.Navigator>
)
const AppStack = () => {
const getTabBarVisibility = (route) => {
const routeName = route.state
? route.state.routes[route.state.index].name
: '';
if (routeName === 'Chat') {
return false
}
return true
}
return (
<Tab.Navigator
screenOptions={{
activeTintColor: '#2e64e5'
}}>
<Tab.Screen
name="Home"
component={FeedStack}
options={({ route }) => ({
tabBarLabel: 'Home',
headerShown: false,
// tabBarVisible: route.state && route.state.index === 0,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="home-outline"
color={color}
size={size}
/>
),
})}
/>
<Tab.Screen
name="Messages"
component={MessageStack}
options={({ route }) => ({
tabBarVisible: getTabBarVisible(route),
//tabBarVisible:false,
tabBarVisible: getTabBarVisibility(route),
//tabBarVisible: route.state && route.state.index === 0,
headerShown: false,
tabBarIcon: ({ color, size }) => (
<Ionicons
name="chatbox-ellipses-outline"
color={color}
size={size}
/>
),
})}
/>
<Tab.Screen
name="Profile"
component={ProfileStack}
options={{
headerShown: false,
// tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) => (
<Ionicons name="person-outline" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
)
}
export default AppStack
////////////////////////////////////
I have added more code
import React from 'react'
import { View, TouchableOpacity, Text } from 'react-native'
import { createStackNavigator } from '#react-navigation/stack'
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import Ionicons from 'react-native-vector-icons/Ionicons'
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'
import HomeScreen from '../screens/HomeSreen'
import ChatScreen from '../screens/ChatScreen'
import ProfileScreen from '../screens/ProfileScreen'
import AddPostScreen from '../screens/AddPostScreen'
import MensajeScreen from '../screens/MensajeScreen'
import EditarPerfilScreen from '../screens/EditarPerfilScreen'
const Stack = createStackNavigator()
const Tab = createBottomTabNavigator()
const FeedStack = ({ navigation }) => (
<Stack.Navigator>
<Stack.Screen
name="Vinkylim Network"
component={HomeScreen}
options={{
headerTitleAlign: 'center',
headerTitleStyle: {
color: '#2e64e5',
fontFamily: 'Kufam-SemiBoldItalic',
fontSize: 18,
},
headerStyle: {
shadowColor: '#fff',
elevation: 0,
},
headerRight: () => (
<View style={{ marginRight: 10 }}>
<FontAwesome5.Button
name="plus"
size={22}
backgroundColor="#fff"
color="#2e64e5"
onPress={() => navigation.navigate('AddPost')}
/>
</View>
),
}}
/>
<Stack.Screen
name="AddPost"
component={AddPostScreen}
options={{
headerTitleAlign: 'center',
headerStyle: {
backgroundColor: '#2e64e515',
shadowColor: '#2e64e515',
elevation: 0,
},
headerBackTitleVisible: false,
headerBackImage: () => (
<View style={{ marginLeft: 15 }}>
<Ionicons name="arrow-back" size={25} color="#2e64e5" />
</View>
),
}}
/>
<Stack.Screen
name="HomeProfile"
component={ProfileScreen}
options={{
//tabBarVisible:false,
headerTitleAlign: 'center',
headerStyle: {
backgroundColor: '#fff',
shadowColor: '#fff',
elevation: 0,
},
headerBackTitleVisible: false,
headerBackImage: () => (
<View style={{ marginLeft: 15 }}>
<Ionicons name="arrow-back" size={25} color="#2e64e5" />
</View>
),
}}
/>
</Stack.Navigator>
);
const MessageStack = ({ navigation }) => (
<Stack.Navigator>
<Stack.Screen name="Messages" component={MensajeScreen} />
<Stack.Screen
name="Chat"
component={ChatScreen}
options={({ route }) => ({
//tabBarVisible: route.state && route.state.index === 0,
title: route.params.userName,
headerBackTitleVisible: false,
//tabBarVisible:false
})}
/>
</Stack.Navigator>
)
const ProfileStack = ({ navigation }) => (
<Stack.Navigator>
<Stack.Screen
name="Profile"
component={ProfileScreen}
options={{
headerShown: false,
}}
/>
<Stack.Screen
name="EditProfile"
component={EditarPerfilScreen}
options={{
headerTitle: 'Edit Profile',
headerBackTitleVisible: false,
headerTitleAlign: 'center',
headerStyle: {
backgroundColor: '#fff',
shadowColor: '#fff',
elevation: 0,
},
}}
/>
</Stack.Navigator>
)
const AppStack = () => {
const getTabBarVisibility = (route) => {
const routeName = route.state
? route.state.routes[route.state.index].name
: '';
if (routeName === 'Chat') {
return false
}
return true
}
/* const getTabBarVisible = (route) =>{
const routeName = route.state
? route.state.routes[route.state.index].name
: route.params?.screen || 'Home';
if (routeName === 'Details') {
return false;
}
return true;
} */
return (
<Tab.Navigator
screenOptions={{
activeTintColor: '#2e64e5'
}}>
<Tab.Screen
name="Home"
component={FeedStack}
options={({ route }) => ({
tabBarLabel: 'Home',
headerShown: false,
// tabBarVisible: route.state && route.state.index === 0,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="home-outline"
color={color}
size={size}
/>
),
})}
/>
<Tab.Screen
name="Messages"
component={MessageStack}
options={({ route }) => ({
//tabBarVisible: getTabBarVisible(route),
//tabBarVisible:false,
tabBarVisible: getTabBarVisibility(route),
tabBarVisible: route.state && route.state.index === 0,
headerShown: false,
tabBarIcon: ({ color, size }) => (
<Ionicons
name="chatbox-ellipses-outline"
color={color}
size={size}
/>
),
})}
/>
<Tab.Screen
name="Profile"
component={ProfileStack}
options={{
headerShown: false,
// tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) => (
<Ionicons name="person-outline" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
)
}
export default AppStack
Screenshots
import {getFocusedRouteNameFromRoute} from '#react-navigation/native';
function getTabVisible(route) {
const routeName = getFocusedRouteNameFromRoute(route) ?? 'Chat';
if (routeName === 'Chat') {
return 'none';
}
return 'flex';
}
<Tab.Screen
options={({route}) => ({
tabBarStyle: {display: getTabVisible(route)},
})
/>
I'm struggling with a navigation problem in React Navigation 5.x I have the following project structure, where (1) is a Stack Navigator, (2, 3 and 4) are different stacks nested in (1).
What I want to achieve: I want (1) header buttons to: go back a screen and go back to home.
(1):
<NavigationContainer>
<Stack.Navigator screenOptions={{cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS, gestureDirection: 'vertical'}} >
<Stack.Screen
name='Home'
component={Pages.Home}
options={({navigation}: any) => ({
headerLeft: () =>
<TouchableOpacity onPress={() => navigation.navigate('Menu')}>
<Icon name='menu' size={Mixins.scaleHeight(25)} color={Colors.WHITE} style={{marginLeft: 20}}/>
</TouchableOpacity>,
headerRight: props => <Icon name='bell' size={Mixins.scaleHeight(20)} color={Colors.WHITE} style={{marginRight: 20}}/>,
headerTitle: '',
headerStyle: [{elevation: 0, borderWidth: 0, shadowOpacity: 0, borderColor: Colors.TRANSPARENT, backgroundColor: Colors.PRIMARY}],
cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS,
})}
/>
<Stack.Screen
name='Menu'
component={Pages.Menu}
options={({navigation}: any) => ({
headerStyle: [{elevation: 0, borderWidth: 0, shadowOpacity: 0, borderColor: Colors.TRANSPARENT, backgroundColor: Colors.PRIMARY}],
headerRight: () =>
<TouchableOpacity onPress={() => navigation.popToTop()}>
<Icon name='close' size={Mixins.scaleHeight(25)} color={Colors.WHITE} style={{marginRight: 20}}/>
</TouchableOpacity>,
headerTitle: '',
headerLeft: () => <></>,
})}
/>
<Stack.Screen
name='Stack2'
component={Stack2}
options={({route, navigation}: any) =>( {
headerStyle: [{elevation: 0, borderWidth: 0, shadowOpacity: 0, borderColor: Colors.TRANSPARENT, backgroundColor: Colors.PRIMARY}],
headerBackTitle: ' ',
headerTitle: '',
headerBackTitleStyle: {color: '#fff'},
headerLeft: () =>
<TouchableOpacity onPress={() => navigation.goBack()}>
<HeaderBackImage textRegular='Stack' textBold='2'/>
</TouchableOpacity>,
headerRight: props =>
<TouchableOpacity onPress={() => navigation.popToTop()}>
<Icon name='close' size={Mixins.scaleHeight(24)} color={Colors.WHITE} style={{marginRight: 20}}/>
</TouchableOpacity>,
})}
/>
<Stack.Screen
name='Stack3'
component={Stack3}
options={({route, navigation}: any) =>( {
headerStyle: [{elevation: 0, borderWidth: 0, shadowOpacity: 0, borderColor: Colors.TRANSPARENT, backgroundColor: Colors.PRIMARY}],
headerBackTitle: ' ',
headerTitle: '',
headerBackTitleStyle: {color: '#fff'},
headerLeft: () =>
<TouchableOpacity onPress={() => navigation.goBack()}>
<HeaderBackImage textRegular='Stack' textBold='3'/>
</TouchableOpacity>,
headerRight: props =>
<TouchableOpacity onPress={() => navigation.popToTop()}>
<Icon name='close' size={Mixins.scaleHeight(24)} color={Colors.WHITE} style={{marginRight: 20}}/>
</TouchableOpacity>,
})}
/>
<Stack.Screen
name='Stack4'
component={Stack4}
options={({route, navigation}: any) =>( {
headerStyle: [{elevation: 0, borderWidth: 0, shadowOpacity: 0, borderColor: Colors.TRANSPARENT, backgroundColor: Colors.PRIMARY}],
headerBackTitle: ' ',
headerTitle: '',
headerBackTitleStyle: {color: '#fff'},
headerLeft: () =>
<TouchableOpacity onPress={() => navigation.goBack()}>
<HeaderBackImage textRegular='Stack' textBold='4'/>
</TouchableOpacity>,
headerRight: props =>
<TouchableOpacity onPress={() => navigation.popToTop()}>
<Icon name='close' size={Mixins.scaleHeight(24)} color={Colors.WHITE} style={{marginRight: 20}}/>
</TouchableOpacity>,
})}
/>
</Stack.Navigator>
</NavigationContainer>
(2):
const Stack2 = () => (
<Stack.Navigator screenOptions={{gestureDirection: 'horizontal'}}>
<Stack.Screen
name='ScreenA'
component={Pages.ScreenA}
options={{
headerShown: false,
}}
/>
<Stack.Screen
name='ScreenB'
component={Pages.ScreenB}
options={{
headerShown: false,
}}
/>
<Stack.Screen
name='ScreenC'
component={Pages.ScreenC}
options={{
headerShown: false,
}}
/>
<Stack.Screen
name='ScreenD'
component={Pages.ScreenD}
options={{
headerShown: false,
}}
/>
</Stack.Navigator>);
Problem: The (1) header navigation.goBack() won't go back a single screen on (2, 3 or 4) stack, it's going back from (2, 3 or 4) to (1) directly.
Is there a way to access (2, 3 or 4) navigation props from (1) header?
Try putting the back buttons in the screens of stacks 2,3,4.
How do I make a back button in the stack navigator for web view? Please Help! I keep on trying, but I just get errors. If you can provide me with a code with a back arrow icon. I deleted it, but I actually have five different pages. All of them have a bottom navigation bar, a stack navigation bar, and is using webview. How do a back button in the stack navigator? Thank you!
// pages
function HomeScreen({ navigation }) {
return (
<WebView
source={{
uri: 'https://www.stoodnt.com/'
}}
style={{ marginTop: -120 }}
/>
);
}
// Stack Navigation
const HomeStack = createStackNavigator();
function HomeStackScreen() {
return (
<HomeStack.Navigator>
<HomeStack.Screen name="Home" component={HomeScreen} />
</HomeStack.Navigator>
);
}
// Bottom Navigation
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = focused
? 'ios-home'
: 'ios-home';
}
return <Ionicons name={iconName} size={40} color={'orange'} />;
},
})}
tabBarOptions={{
activeTintColor: '#000000',
inactiveTintColor: '#616161',
labelStyle: {
fontSize: 11,
},
style: {
backgroundColor: '#F7F7F7',
},
}}
>
<Tab.Screen name="Home" component={HomeStackScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
You can try this
import { HeaderBackButton } from '#react-navigation/stack';
<HomeStack.Screen
name="Home"
component={HomeScreen}
options={{
headerLeft: ({navigation}) => (
<HeaderBackButton onPress={()=>{navigation.navigate('PAGE NAME')}}/>
),
}}
/>
I'm facing a problem with my Bottom Tab Navigator. I get a white space between my tabs and the end of the screen of my iPhone 11 Simulator. On a iPhone 8 Simulator I don't have these white space. There is also a small white space above the Tabs. How can I remove this space? I'm not able to find a solution and I'm running out of time. Thanks!
This is my implementation so far:
DetailsNavigation.js
const DetailsNavigation = ({ route }) => {
return (
<Tab.Navigator
tabBarOptions={{
activeBackgroundColor: colors.primary,
activeTintColor: colors.secondary,
inactiveBackgroundColor: colors.secondary,
inactiveTintColor: colors.primary,
labelStyle: {
fontSize: 13,
marginBottom: 5,
},
}}
>
<Tab.Screen
name="DetailsScreen"
options={{
title: "Portfolio",
tabBarIcon: ({ color, size }) => (
<MaterialIcons name="account-box" size={24} color={color} />
),
}}
children={() => <DetailsScreen worker={route.params} />}
/>
<Tab.Screen
name="RatingScreen"
component={RatingScreen}
options={{
title: "Bewertungen",
tabBarIcon: ({ color, size }) => (
<MaterialIcons name="star" size={24} color={color} />
),
}}
/>
</Tab.Navigator>
);
};
export default DetailsNavigation;
DetailsNavigation.js is implemented here:
WorkersNavigation.js
const WorkersNavigation = (props) => {
return (
<Stack.Navigator>
<Stack.Screen
name="WelcomeScreen"
component={WelcomeScreen}
options={{ headerShown: false }}
></Stack.Screen>
<Stack.Screen
name="WorkersScreen"
component={WorkersScreen}
options={{ headerShown: false }}
></Stack.Screen>
<Stack.Screen
name="DetailsNavigation"
component={DetailsNavigation}
options={{ headerShown: false }}
></Stack.Screen>
</Stack.Navigator>
);
};
export default WorkersNavigation;
The white space found on iPhone X devices and above is called the Safe Area and exists to ensure appropriate insetting based on the device and context. Refer to the official Human Interface Guidelines for more information.
The react-navigation's BottomTabNavigator supports safe areas out-of-the-box for the default BottomTabBar, so in order to remove the SafeArea under it, you need to override the settings provided for the BottomTabNavigator.
<Tab.Navigator
tabBarOptions={ {
...
safeAreaInsets: {
bottom: 0,
},
} }
>
...
</Tab.Navigator>
I think you are wrap outside of WorkersNavigation like this
<SafeAreaView>
<WorkersNavigation />
</SafeAreaView>
screenOptions={({route}) => ({
tabBarStyle: {backgroundColor: '#436332', borderTopColor: '#23321A'},
tabBarLabelStyle: {
fontWeight: '600',
fontSize: 12,
},
tabBarActiveTintColor: '#f1c522',
tabBarInactiveTintColor: '#f4f1de',
tabBarActiveBackgroundColor: '#436332',
tabBarInactiveBackgroundColor: '#436332',
})}
Add this lines at your TabNavigator screenOptions:
tabBarItemStyle: {borderWidth: 1, borderColor:'#101010'},
tabBarStyle: {paddingBottom:0, backgroundColor: '#101010'},
and if you use <SafeAreaView>, delete it.
In my case for remove bottom space I need to set the height for tabBarStyle and also for tabBarItemStyle:
<Tab.Navigator
initialRouteName={ScreenNames.Home}
screenOptions={{
tabBarItemStyle: {
height: 53,
},
tabBarStyle: {
height: 53,
},
}}>
For remove upper white space:
<Tab.Navigator
initialRouteName={ScreenNames.Home}
screenOptions={{
tabBarStyle: {
borderTopWidth: 0,
elevation: 0,
},
}}>