I want to hide the bottom Navigation Bar in React Native Modal.
I have a full-screen mode, set in Main.java, it's workin everywhere, but when I want to open a Modal, the bottom navigation bar just become visible. Can I turn this funciton off?
I need a Modal withouth Navigation Bar.
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
View.SYSTEM_UI_FLAG_FULLSCREEN
View.SYSTEM_UI_FLAG_IMMERSIVE);
Once my solution:
// the screen you try to hide the tab
hideTab(){
let navigation = this.props.navigation.dangerouslyGetParent();
const setParamsAction = navigation.setParams({
showTabBar: false
});
navigation.dispatch(setParamsAction);
}
navigation config:
C2CStack.navigationOptions = ({navigation})=>{
//console.log('===========>C2C navigation options:');
//console.log(navigation);
return {
tabBarLabel: '法币',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name='c2c'
/>
),
tabBarVisible:navigation.state.index==0&&((navigation.state.params && navigation.state.params.showTabBar) !== false)
}
};
The ugly thing is to determine the params belonging to which property and in which level.
Related
App using react-navigation 6
App have TabNavigator and I need to have Drawer that rendered on top of TabNavigator that render Items, that could be selected, and based on what Item was selected I need to change screen in the same Tab in TabNavigator.
The DrawerNavigator solution doesn't fit my needs. Because when user select another Tab from TabNavigator I should change Drawer content for another Tab and lock DrawerLayout on some Tabs
I tried to do the same with DrawerNavigator with CustomLayout but I can't get current routeName in DrawerNavigator to change content based on Tab, I could use TabPress listener but then how I could update DrawerNavigator route from TabNavigator?
I am using DrawerLayout to set up Drawer for my react-native app. And I just wrap TabNavigator with DrawerLayout like that(pseudo code):
const TabNavigator = ({ route, navigation }) => {
return (
<DrawerLayout route={route} navigation={navigation}>
<Tab.Navigator>
<Tab.Screen>
...rest of tabs
</Tab.Navigator>
</DrawerLayout>
)
}
And I am navigation to another screen in DrawerLayout like this when user press on Item:
const onPressItem = () => {
// if Item is not selected then navigate to new screen in the same tab
if(TabSelectedItem !== 'New_Screen_In_The_Same_Tab') {
navigation.replace('New_Screen_In_The_Same_Tab')
navigation.setParams({
TabSelectedItem: 'New_Screen_In_The_Same_Tab',
})
}
// if tab was already selected close the drawer
closeDrawer()
}
So basically everything works except one thing, I noticed that if I just close DrawerLayout everythings is fine, but when I am navigating to new screen I feel like DrawerLayout is lagging, I suppose it could be because I do navigation and all TabNavigator do re-render
Question is:
Could I fix it, or better to use any another solutions for this specific case?
Android phones that have a navigation bar like that from the iPhone, have the default background color as white, which looks really off if my screen's background color is different than white, so I need to change the background color depending on the background color of my screen.
Currently I'm using expo to change that color whenever a screen component loads, but that doesn't work when I'm navigating back to a previous screen.
This is what I have in all of my screens (only with different colors to match my background)
useEffect(() => {
if (Platform.OS === 'android') {
NavigationBar.setBackgroundColorAsync(colors.main);
}
}, []);
How can I make this run when I navigate back to a screen that's already loaded? Or what's another solution to my problem?
You should be able to achieve this by importing StatusBar from React-Native;
import { StatusBar } from 'react-native';
const HomeScreen = ({ navigation }) => {
StatusBar.setBackgroundColor(primary_color)
return (
...
)}
Or you can set it within the return function as such;
return (
<SafeAreaView style={styles.container}>
<StatusBar
animated={true}
backgroundColor="red"
barStyle={statusBarStyle}
showHideTransition={statusBarTransition}
hidden={hidden} />
...
Ref: https://reactnative.dev/docs/statusbar
What I ended up doing is using useIsFocused from #react-navigation/native to tell when the user came back to the screen and then calling NavigationBar.setBackgroundColorAsync again
There is huge problem with bottom tab navigation on android that I'm struggling with and can't find any solution!!
on Android when keyboard shows the bottom tab bar goes upon the keyboard, which is obviously not a desired behaviour!
This happens when softInputMode in Android Manifest is set to adjustResize (which is the default mode for react native), I've tried with adjustPan and resolves the problem, but now when keyboard appears android avoids not only the view but either the header of the app! This behaviour too is not acceptable!
I've also tried with workarounds like listening to keyboard events (didShow, and didHide are only available) and disabling the bottom bar on keyboard appearingt but this leads to many glitches in the app.
The keyboardHidesTabBar prop is also very ugly cause it is an animation that hides the bar that starts after keyboard opening...
Have you tried this solution keyboardHidesTabBar: true in TabBarOptions props.
<Tab.Navigator
tabBarOptions={{
keyboardHidesTabBar: true,
}}
>
<Tab.Screen />
<Tab.Screen />
</Tab.Navigator>
Answer for React Navigation V5 with or without a Custom tabBar
if you use a custom tabBar the keyboardHidesTabBar: true prop is not working but when i change the custom tabBar to default tab bar that prop works but i don't like the behavior of that prop on android, so i used keyboard from react-native to check if the keyboard is active or not and setting the css display prop to 'none'
import { Keyboard, View } from "react-native";
const [keyboardStatus, setKeyboardStatus] = useState<boolean>();
useEffect(() => {
const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
setKeyboardStatus(true);
});
const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
setKeyboardStatus(false);
});
return () => {
showSubscription.remove();
hideSubscription.remove();
};
}, []);
so on the custom tab bar component now we can do like this.
<View style={
[
styles.mainContainer,
keyboardStatus ? styles.hideTabNavigation : null,
]
}
>
// your code here
</View>
Hope this will help someone until they fix this issue!
Suppose you have a drawer navigator created through
const GalioApp = createDrawerNavigator(screens, options);
How can I change the drawer content like in a regular screen? For example change what's written on top to something else, or change a navigator button content for example to change the language of it
You can create custom drawer component and set drawerWidth to width of the screen which will open drawer in fullscreen width. Then you can render your custom view on drawer with contentComponent prop of drawer navigator. For example :
import { Dimensions } from 'react-native';
const { width } = Dimensions.get('screen');
const CustomFullScreenDrawer = (props) => {
return (
// make your custom view here
)
}
const GalioApp = createDrawerNavigator(screens, {
drawerWidth: width,
contentComponent: (props) => <CustomFullScreenDrawer {...props} />
});
Here is the full list of props which helps you to create better custom drawer.
I'm trying to create TabBar using react-navigation createBottomTabNavigator. I want to add this red thing above Tab when it's active. Any ideas how to achieve this? I was thinking about changing Tab container if it's active, but couldn't find how to do this.
If your tabs point to another stack navigators, the best idea would be to pass a custom component to tabBarIcon. Something like that:
SomeStack.navigationOptions = {
tabBarIcon: ({ focused }) => (
<TabBarButton
isFocused={focused} // render red thing above if focused
iconName="icon name"
/>
),
};