CODEWITHSUNDEEP
react-nativeexpo
Sandeep Thomas
Sandeep Thomas

Reputation: 4759

Custom Footer Covering the Text Input when keyboard popsup React Native

I am very new with React native and just trying with an app for my church where members can register.

Here is the snack

Here I have a multiline textbox for address. But its causing some problem with IOS and Android.

In IOS, the footer is not making any trouble. But content is not scrolling up or I have no idea what we are typing in the input

enter image description here

But in Android, the problem causing is from Footer

When we start focusing on that multiline textbox for entry, the keyboard pops up, but the Footer also moves up and hides the input area.

enter image description here

After some search I found there is some wrapper like ScrollView.

So I wrapped my view in layout page which holds the components like this

  <ScrollView>
    <View style={styles.content}>{children}</View>
  </ScrollView>

But that hiding the registration page completely for Android and I can see some top portions of Registration page in IOS.

enter image description here

Please help

Upvotes: 0

Views: 103

Answers (1)

Bhavin Parghi
Bhavin Parghi

Reputation: 176

Please add android:windowSoftInputMode="adjustResize" to your android:name=".MainActivity"

in AndroidManifest.xml

Upvotes: 0

Related Questions