We are using createBottomTabNavigator. In one of the tab contains search bar at the top. While clicking on that search bar, we are opening the keyboard. But the keyboard pushing up the bottom tab bar also. We need the bottom tab bar remains at the bottom when opening keyboard.
const SignedIn = createBottomTabNavigator(
{
Followers: {
screen: FollowerStack,
...
},
Search: {
screen: SearchStack,
},
Home: {
screen: HomeStack,
},
Bookmarks: {
screen: BookmarkStack,
},
Profile: {
screen: ProfileStack,
}
},
{
initialRouteName: "Home",
tabBarPosition: 'bottom',
swipeEnabled: false,
animationEnabled: false,
tabBarOptions: {
keyboardHidesTabBar: true,
showIcon: true,
showLabel: false,
activeTintColor: "red",
inactiveTintColor: "gray",
adaptive: true,
safeAreaInset: {
bottom: "always"
},
style: {
position: 'relative',
backgroundColor: "#F9F8FB",
height: TAB_NAVIGATOR_DYNAMIC_HEIGHT,
paddingTop: DeviceInfo.hasNotch() ? "5%" : "0%",
minHeight: TAB_NAVIGATOR_DYNAMIC_HEIGHT,
width: '100%',
bottom: 0
}
}
}
);
I used React navigation 5, is this what you want?
<SignedIn.Navigator
tabBarOptions={{
keyboardHidesTabBar: true
}}
}>
</SignedIn.Navigator>
The document to read here.
只需转到AndroidManifest.xml
文件并更改/添加内部activity
标签:
android:windowSoftInputMode="adjustPan"
I got solution for this problem. Previously, I have done a minor mistake while configuring 'react-native-android-keyboard-adjust'. Now it is working fine. So we can change the 'windowSoftInputMode' for a particular component using this library - https://www.npmjs.com/package/react-native-android-keyboard-adjust
I was having the exact same issue. Following are the two ways I successfully tackled it.
"softwareKeyboardLayoutMode":"pan"
to the app.json like below"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
},
"softwareKeyboardLayoutMode":"pan"
}
by doing this, the bottom navigator was staying hidden behind the keyboard. however, the ScrollView
containing TextInputs
was not working the way I wanted it to. the whole app screen was getting translated by the height of the keyboard, hiding half of my ScrollView
and everything above it (Header and stuff).
"softwareKeyboardLayoutMode"
so that it defaults to height
(this causes the CustomBottomTabNav
to rise above the keyboard as the whole screen gets squeezed in the remaining height) step 2: dynamically reset the position of CustomBottomTabNav
when the keyboard is active. In the screen containing TextInputs
<ScrollView style={{ height: keyboard.keyboardShown? 510 - keyboard.keyboardHeight: 510}}>
/* lots of text inputs*/
</ScrollView>
In the CustomBottomTabNav
tabBarOptions={{
...otherStuff,
style={{ bottom: keyboard.keyboardShown? -100: -10, ...otherStuff}}
}}
This second method is working much more reliably. I tried keyboardAvoidingView
but was unable to wrap my head around its unpredictable behavior.
Found it, just add your bottom navigation into a view making that view of dimensions of the screen, this way:
import React from 'react'
import { StyleSheet, Text, View, Dimensions } from 'react-native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const { width, height } = Dimensions.get("window")
const Tab = createBottomTabNavigator()
export default function () {
return (
<View style={{
width,
height,
}}>
<Tab.Navigator>
<Tab.Screen
name="Screen1"
component={Component}
/>
<Tab.Screen
name="Screen2"
component={Component}
/>
<Tab.Screen
name="Screen3"
component={Component}
/>
</Tab.Navigator>
</View>
)
}
Please use this on
<Tab.Navigator
screenOptions={{
tabBarHideOnKeyboard: true
}}
/>
I am sure it will work perfectly
If you are using a TextInput in the search bar you could hide the bottom tab when TextInput is focused (and the keyboard shows) like so:
const [searchBarFocused, setSearchBarFocused] = useState(false)
In the markup:
<TextInput
onFocus = {()=> setSearchBarFocused(true)}
onBlur = {()=> setSearchBarFocused(false)}
/>
//Other code
{!searchBarFocused && <CustomBottomTab/>}
For finegrained control put a ref on the textInput to blur/focus and what not programmatically.
Also, you can check out RN:s KeyboardAvoidingView
screenOptions={{ headerShown: false, tabBarActiveTintColor: '#1a3c43', tabBarInactiveTintColor: '#1a3c43', tabBarActiveBackgroundColor: 'white', tabBarInactiveBackgroundColor: '#1a3c43',
tabBarHideOnKeyboard: true,
tabBarstyle: {
backgroundColor: '#1a3c43',
paddingBottom: 3
}
}}
<Tab.Navigator screenOptions={{ tabBarHideOnKeyboard: Platform.OS!== 'ios'}}>
</Tab.Navigator>
It will work perfectly for both platforms in react native
I doubt this question is ever going to be closed but in case someone stumbles over this problem and needs an answer, I'd recommend looking through the following thread:
https://github.com/react-navigation/react-navigation/issues/6700
Tl;Dr When supplying the framework with a custom navbar, you have to take care of the hiding of the said bar on keyboard opening. This is because it is the default android behaviour.
So either change the manifest configuration as the author already described as his first solution that didn't work.
OR modify your component to listen to the react-natives KEYBOARD. keyboardDidShow & keyboardDidHide Events and either move it down with bottomMargin: -XYZ or hide it completely with a flag.
following two responses on github helped me:
https://github.com/react-navigation/react-navigation/issues/6700#issuecomment-625985764
https://github.com/react-navigation/react-navigation/issues/618#issuecomment-303975621
In case someone wnats to use my code as a reference
interface BottomTabStateProps {
// unrelated Props
}
interface BottomTabDispatchProps {
// unrelated service dispatchers
}
interface BottomTabState {
navVisible: boolean;
}
class BottomTabContainerClass extends React.Component<
BottomTabStateProps & BottomTabDispatchProps & NavigationInjectedProps, BottomTabState
> {
constructor(props: BottomTabStateProps & BottomTabDispatchProps & NavigationInjectedProps) {
super(props);
this.state = {
navVisible: true
};
}
componentDidMount() {
Keyboard.addListener('keyboardDidShow', () => this.keyboardDidShow());
Keyboard.addListener('keyboardDidHide', () => this.keyboardDidHide());
}
componentWillUnmount() {
Keyboard.removeAllListeners('keyboardDidShow');
Keyboard.removeAllListeners('keyboardDidHide');
}
keyboardDidShow() {
this.setState({ navVisible: false });
}
keyboardDidHide() {
this.setState({ navVisible: true });
}
render() {
return (
<View>
{
this.state.navVisible &&
<View>
// add custom Navbar here
</View>
}
</View>
);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.