Bottom Tab Bar is pushed upward when the keyboard opens

Question

The solution provided in this thread is applicablle to all the screens but I need to implement it only on some specific screen how to do this ?

I tried below things but they are impact all the screens

screenOptions={{
 tabBarHideOnKeyboard: true,
 }}
<application
 <activity
 
 <!-- android:windowSoftInputMode="adjustResize" Added this --> 
 
 </activity>
 
 </application>

• PhantomSpooks: Have you tried storing style in state, and then updating the state when the keyboard shows/dismisses? reactnative.dev/docs/0.74/keyboard#addlistener
• PhantomSpooks: You can style the tabBar using the screenOptions prop reactnavigation.org/docs/bottom-tab-navigator/#tabbarstyle

Answer 1

This can be resolved by wraping the Screen Content that is showing the keyboard, with KeyboardAvoidingView as shown in below example:

import { KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
function MyScreen() {
 return (
 <KeyboardAvoidingView
 behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
 style={{ flex: 1 }}
 >
 <ScrollView>
 {/* Screen content goes here */}
 </ScrollView>
 </KeyboardAvoidingView>
 );
}

Keep in mind to use the behaviour property as it is shown in the example.