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 who

Answer 1

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 2

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 3

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/