React Native BottomTabNavigator remove white space - javascript

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,
},
}}>

Related

What's wrong with this implementation for headerStyle? I want to hide the shadow/elevation of the header

https://drive.google.com/file/d/1456izDo_zxkFxqAti7Kd4Reaer5mwzOh/view?usp=sharing
I want to hide the shadow of the header but can't do that. I tried to use navigationOptions but couldn't find a way to hide the shadow of the header. backgroundColor is working fine but shadow is not. Please identify the mistake. Thank You.
const Stack = createNativeStackNavigator();
<Stack.Navigator
defaultNavigationOptions={{}}
screenOptions={({navigation}) => ({
headerBackTitleVisible: false,
title: '',
headerStyle: {
backgroundColor: 'papayawhip',
elevation: 0,
shadowOpacity: 0,
borderBottomWidth: 0,
},
headerLeft: () => (
<AppMaterialIcon
onPress={() => navigation.goBack()}
name={'chevron-left'}
style={{marginLeft: -10}}
size={35}
color={colors.kermitGreen}
backgroundColor={colors.white}
/>
),
})}>
<Stack.Screen
name="ForgotPasswordEmail"
component={ForgotPasswordEmailScreen}
/>
</Stack.Navigator>
The thing I just did is setting the headerShadowVisible: false. It worked!!

How do I make a back button for Webview in the stack Navigation

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 I make a back button in the stack navigator? Please Help! 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',
},
});

How do I make a back button for Webview in the stack Navigation

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')}}/>
),
}}
/>

Nested navigator options not working or even showing up

I want to show a back button in the header of a screen that is nested in 2 navigators.
I will first show you how I am nesting the screen, followed by what I have tried
Main stack navigator:
<Provider store = {store}>
<StatusBar style="light" />
<NavigationContainer>
<Stack.Navigator initialRouteName="Login">
<Stack.Screen name="Login"
component={Login}
options= {{
headerLeft: null,
headerTitleStyle: {
fontWeight: 'bold',
fontSize: 20,
color: '#FFFFFF'
},
headerStyle: {
backgroundColor: '#121212'
}
}}/>
<Stack.Screen
name="Tabs"
component={Tabs} <-------------- The screen is nested in tabs
options= {{
title: " ",
headerTitleStyle: {
fontWeight: 'bold',
fontSize: 24,
color: '#FFFFFF'
},
headerStyle: {
backgroundColor: '#121212'
},
}}/>
</Stack.Navigator>
</NavigationContainer>
</Provider>
);
}
}
Tab navigator, nested within the stack navigator as "Tabs":
//Bottom Tabs
function Tabs() {
return (
<Tab.Navigator
initialRouteName="Home"
tabBarOptions={{
activeTintColor:"#FFFFFF",
inactiveTintColor:"#696969",
style: {
backgroundColor: '#000000'
},
}}>
<Tab.Screen
name="Create"
component={createFlowStack} <------------ This stack is where the screen header I want to add a back button to lies
options={{
tabBarLabel: ' ',
tabBarIcon: ({ color, size }) => (
<Ionicons name="md-add-circle" size={size} color={color} />
),
}}
/>
</Tab.Navigator>
);
}
I have deleted the other tabs as they are not relevant to the question. This tab, create, is nesting another stack navigator, createFlowStack:
createFlowStack, which is shown when you click on the bottom tab "create"
<CreateStack.Navigator
initialRouteName="Create"
>
<CreateStack.Screen
name="Create"
component={Create} />
<CreateStack.Screen
name="Screenshot"
component={Screenshot}
// options={({ navigation }) => ({
// headerRight: () => (
// <Button
// onPress={() => navigation.goBack()}
// title="Info"
// color="#fff" />
// ),
// })}
/>
As you can see, the options are commented out, but it wouldn't matter any way. I am trying to show a back button in header left of this screen, but nothing I have tried works.
What I have tried:
headerBackTitle: "back"
headerBackTitle: " "
A custom header left button
headerRight: " "
The custom header right button you see commented out
NOTHING works, nothing shows up, its like one of the navigators that createFlowStack is nested in is overriding everything. Please let me know how to fix this issue!
Updating the expo SDK from 39 to 40 fixed the issue!

Create custom bottom tab navigator in React native

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

Categories