CODEWITHSUNDEEP
javascriptreact-native
Molly Harper
Molly Harper

Reputation: 2453

React Native KeyboardAvoidingView covers last text input

I'm using React Native's Keyboard Avoiding View with the behavior set to padding (testing on Android).

I have multiple TextInputs on my screen. When I click the final TextInput, the keyboard covers it. I am now able to scroll down due to padding added from KeyboardAvoidingView, but it would be ideal to have it auto scroll on focus.

<Content>
  <KeyboardAvoidingView behavior='padding'>
    <TextInput placeholder='Example 1' />
    <TextInput placeholder='Example 2' />
    <TextInput placeholder='Example 3' />
    <TextInput placeholder='Example 4' />
    <TextInput placeholder='Example 5' />
    <TextInput placeholder='Example 6' />
    <TextInput placeholder='Example 7' />
  </KeyboardAvoidingView>
</Content>

Upvotes: 42

Views: 140209

Answers (7)

Anmol Gurung
Anmol Gurung

Reputation: 1

The issue I encountered was due to react-native-safe-area-context, not the height of the React Navigation header. I fixed it by using useSafeAreaInsets to get the insets, which provides an object such as {"bottom": 34, "left": 0, "right": 0, "top": 59}. I then used the top value from this object for the keyboardVerticalOffset prop, like this:

import {useSafeAreaInsets} from 'react-native-safe-area-context';
...
    const insets = useSafeAreaInsets();
    ...
      <KeyboardAvoidingView
        behavior="padding"
        keyboardVerticalOffset={insets.top}
        style={styles.container}>
      ...
      </KeyboardAvoidingView>

Upvotes: 0

Florin Dobre
Florin Dobre

Reputation: 10232

react-native-keyboard-aware-scroll-view

It's super simple to use and it worked great in both Android and iOS.

It supports older versions of RN too.

Initially I tried the KeyboardAvoidingView but on IOS not even

behavior='position' with keyboardVerticalOffset worked properly.

That used to overlap some content in a strange way.

I have:

RN 0.53.3
react-native-keyboard-aware-scroll-view 0.6.0

I added a few more details about my use case here:

https://stackoverflow.com/a/51151496/1979861

Upvotes: 16

Fadi Abo Msalam
Fadi Abo Msalam

Reputation: 7197

if you are using react-navigation v6 you might need

import { useHeaderHeight } from "@react-navigation/elements";

 const headerHeight = useHeaderHeight();

   <KeyboardAvoidingView
        behavior={Platform.OS === "ios" ? "padding" : undefined}
        style={flexGrow}
        keyboardVerticalOffset={Platform.OS === "ios" ? headerHeight + Constants.statusBarHeight : 0}
      >
   </KeyboardAvoidingView>

Upvotes: 4

Chauhan Krunal
Chauhan Krunal

Reputation: 319

based on @Richard Millen something change in this styles

<ScrollView
  contentContainerStyle={{
    flexGrow: 1,
    padding: 20
  }}
>
  <TextInput
    style = {{ minHeight: 100 }}
  />
  <TextInput
    style = {{ minHeight: 100 }}
  />
  ...
</ScrollView>

Upvotes: 1

Aung Myat Hein
Aung Myat Hein

Reputation: 4188

Depending on platform, Android or IOS, implementation can be vary a little. This is how I did.

Add android:windowSoftInputMode="adjustResize" at AndroidManifest.xml,

 <activity
    android:name=".MainActivity"
    android:launchMode="singleTask"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:windowSoftInputMode="adjustResize">

 </activity>

In your container

    <KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : null}
      keyboardVerticalOffset={Platform.OS === "ios" ? 64 : 0}>
      <ScrollView>
        {...}
      </ScrollView>
    </KeyboardAvoidingView>

keyboardVerticalOffset tells how much the keyboard moves past the textInput.

Upvotes: 41

farmcommand2
farmcommand2

Reputation: 1486

there is prop called keyboardVerticalOffset that you can pass to the KeyboardAvoidingView that will change how much the keyboard moves past the textInput. Sample of my code:

const keyboardVerticalOffset = Platform.OS === 'ios' ? 40 : 0

    return (
      <KeyboardAvoidingView behavior='position' keyboardVerticalOffset={keyboardVerticalOffset}>
        <ListView .../>
      <KeyboardAvoidingView/>
    )

Upvotes: 91

Richard Millen
Richard Millen

Reputation: 209

To add to @Maxwell's answer, sometimes you may need to scroll further than the end of the scroll view to get a component into view, since the added padding is not the full height of the keyboard. Full example below using scrollTo() with y offset as the height of the text input.

import React, { Component } from 'react'
import {
    KeyboardAvoidingView,
    ScrollView,
    View,
    TextInput
} from 'react-native'


export default class Test extends Component {
    render() {
        return (
            <ScrollView style = {{flex:1, backgroundColor: 'white'}} ref = 'scroll'>
              <KeyboardAvoidingView behavior='position' style = {{backgroundColor: 'white', flex: 1}}>
                    <View style = {{height: 400}}/>
                    <TextInput style = {{height: 60}} placeholder='Example 1' />
                    <TextInput style = {{height: 60}} placeholder='Example 2' />
                    <TextInput style = {{height: 60}} placeholder='Example 3' />
                    <TextInput style = {{height: 60}} placeholder='Example 4' onFocus = {() => this.refs['scroll'].scrollTo({y: 60})}/>
              </KeyboardAvoidingView>
            </ScrollView>
        )
    } 
}

Upvotes: 7

Related Questions