CODEWITHSUNDEEP
react-nativeflexboxscrollview
Umid Boltabaev
Umid Boltabaev

Reputation: 692

How do not move view when keyboard shows in React Native?

I have two elements in the screen. The first one is Scrollview with flex and the other is View with fixed height. When keyboard shows up View element goes up.

How to achieve element does not go up?

Ok, here is the code:

<View style={{flex: 1}}>
    <Scrollview style={{flex: 1}}>
        <TextInput />
    </Scrollview>
    <View style={{height: 24}}>
         Two buttons here...
    </View>
</View>

Here is the screenshot: enter image description here

Just want that two footer buttons do not go up when keyboard is shown.

Upvotes: 8

Views: 19505

Answers (2)

Vishal Dhanotiya
Vishal Dhanotiya

Reputation: 2638

You can try following code. It may resolve your issue

<KeyboardAvoidingView
    behavior={Platform.OS == "ios" ? "padding" : "height"}
    keyboardVerticalOffset={Platform.OS == "ios" ? 0 : 20}
    enabled={Platform.OS === "ios" ? true : false}>

  <Text>Hello</Text>
  <Text>World</Text>

</KeyboardAvoidingView>

Upvotes: 9

Shashank Malviya
Shashank Malviya

Reputation: 765

There are 2 ways to achieve this :

KeyboardAvoidingView : https://facebook.github.io/react-native/docs/keyboardavoidingview

<KeyboardAvoidingView
  style={{flex: 1}} 
  behavior={'padding'} 
  keyboardVerticalOffset={65}>
    <FlatList .../>
    <TextInput ... />
</KeyboardAvoidingView>

Android :

Adjust keyboard using android:windowSoftInputMode="adjustPan" settings in your AndroidManifest.xml :

<application
            ...
            >
     <activity
                android:name=".MainActivity"
                android:label="@string/app_name"
                ...
                android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
                android:windowSoftInputMode="adjustPan"
                ...
                android:authorities="${applicationId}">
    </activity>
    </application>

Upvotes: 5

Related Questions