CODEWITHSUNDEEP
react-nativereact-native-navigationreact-navigation-bottom-tab
Dheeraj Kumar
Dheeraj Kumar

Reputation: 11

Bottom Tab Bar is pushed upward when the keyboard opens

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>

Upvotes: 1

Views: 82

Answers (1)

Afnan Khakwani
Afnan Khakwani

Reputation: 3

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.

Upvotes: 0

Related Questions