React-native: How to control what keyboard pushes up

Question

The structure of the app is fairly simple: A searchbar, a listview and react-native-tabs at the bottom. The problem: If I click on the searchbar on Android it pushes the whole app up, so I see the tabs directly over the keyboard. But on iOS the keyboard overlays the whole app, without pushing anything up. Is there any way to control that?
I'm happy to share code / screenshots if the question isn't clear.
Thanks

edit:

<View style={{flex:1, backgroundColor:'#f2f2f2'}}>
    <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderSearchResults.bind(this)}
        style={styles.listView}/>
    <KeyboardAvoidingView
        style={styles.addQuestionBar}
        behavior={'position'}>
        <Text>
            Don't see your question?
        </Text>
        <TouchableOpacity>
            <Text>
                Add it
            </Text>
        </TouchableOpacity>
    </KeyboardAvoidingView>
</View>

Answer 1

Set android:windowSoftInputMode="adjustPan" in your manifest file, and it will work as you expect.

E.g.

<application
  android:name=".MainApplication"
  android:allowBackup="true"
  ...
  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    ...
    android:windowSoftInputMode="adjustPan">
    ...
  </activity>
  ...
</application>

Answer 2

For those using Expo

@J KW's answer is correct but if you're using Expo you will have to implement it differently.

Expo uses different configuration terms. In your app.json you have to set the configuration key "softwareKeyboardLayoutMode":"pan" in your android object. Your file might look something like:

{
  "expo": {
    "name": "App",
    ...
    "android":{"softwareKeyboardLayoutMode": "pan"},
    ...
  }
}

Note: If you are receiving a "should NOT have additional property" error, it's likely because you don't have the updated Expo SDK (v.038). Please update your Expo version.

Documentation: https://docs.expo.io/workflow/configuration/

Answer 3

There is new Component called KeyboardAvoidingView from React Native not documented yet but i already use it in my project and its very useful

Code Example:

'use strict'
import { ... , KeyboardAvoidingView } from 'react-native'

class Test extends Component {
  constructor () {
    super()
    this.state = {
      behavior: 'position' 
      // there is three ways to adjust (position , height , padding ) 
    }
  }
    


  render(){
    return (
        <View>
          <KeyboardAvoidingView behavior={this.state.behavior}>
            <TextInput
              style={style.PhoneNumberInput}
              onChangeText={(text) => this.setState({text})}
              value={this.state.text}
              />
          </KeyboardAvoidingView>
        </View>
    )
  }

}


module.exports = Test

and for more details you can check KeyboardAvoidingViewExample

EDIT:

Sorry i just got the wrong idea from the question i think what you are trying to do is stop the android keyboard from pushing the application up here is component that allow you to choose between (Pan, Resize, Nothing) in android

react-native-android-keyboard-adjust

Answer 4

Use android:windowSoftInputMode="adjustResize".

KeyboardAvoidingView and other keyboard-related components don't work quite well if you have "adjustPan" set for your android:windowSoftInputMode in AndroidManifest.xml.

Instead, you should use "adjustResize" and have a wonderful life.

I had "adjustPan" and tried using KeyboardAvoidingView and KeyboardAwareScrollView... nothing worked.

Now, with "adjustResize", i'm not using any keyboard-related component and my android app works. (I might have to use KeyboardAvoiding view on iOS, but it will work out of the box.)

Answer 5

@binkie's answer worked for my expo (Version 44.0.0) app with a slight change. In app.json,

"android":{"softwareKeyboardLayoutMode": "pan"}

In the screen, margin bottom value equal to height of the bottom tab like so

<ScrollView mb="70px">...</ScrollView>

Answer 6

****1) modify the AndroidMainfest.xml in android/src/main/AndroidMainfest.xml u can solve the issue by changing the

       $ android:windowSoftInputMode="adjustResize";
                       to  
       $ android:windowSoftInputMode="adjustPan";


          the problem will be resolvede****

Answer 7

I had the same issue while React Native - Javascript, SafeAreaView and ScrollView fix the problem

<SafeAreaView style={styles.container}>
    <ScrollView  > 
      <View style={styles.body}>
....

 container: {
    flex: 1,
    backgroundColor: 'white' 
  },