React-native: How to control what keyboard pushes up

React Native

React Native Problem Overview


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>

React Native Solutions


Solution 1 - React Native

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>

Solution 2 - React Native

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/

Solution 3 - React Native

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

Solution 4 - React Native

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.)

Solution 5 - React Native

@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>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questiondv3View Question on Stackoverflow
Solution 1 - React NativeJephView Answer on Stackoverflow
Solution 2 - React NativebinkieView Answer on Stackoverflow
Solution 3 - React NativeAbdulaziz AlkharashiView Answer on Stackoverflow
Solution 4 - React NativeFilip SavicView Answer on Stackoverflow
Solution 5 - React NativeShri ramView Answer on Stackoverflow