wix-incubator/react-native-keyboard-aware-scrollview

Created by artald

react-native-keyboard-aware-scrollview

A helper component meant to be used as a drop-in replacement for RN ScrollView which handles the ScrollView insets properly when the keyboard is shown or hides so all the content is scrollable and available to the user.

Installation

Install using npm:

npm i react-native-keyboard-aware-scrollview --save

How To Use

Simply import the new component:

import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scrollview'

Now use it as you would normally do with a ScrollView to wrap arround TextInput components:

<KeyboardAwareScrollView style={styles.container}>
    <TextInput style={styles.textInput} placeholder={'My Input'}/>
</KeyboardAwareScrollView>

Auto-Scrolling for TextInput components

Normally this component will just take care of handling the content inset. If you wish for KeyboardAwareScrollView to automatically scroll to a TextInput that gets focus (so it's ensured to be visible), you can add an attribute called getTextInputRefs - a callback in which you can return an array of references to the TextInput components that auto-scrolling to be handled for. KeyboardAwareScrollView will look for the focused TextInput in the array and make sure it's visible by scrolling to it's location.

Example:

<KeyboardAwareScrollView style={styles.container} getTextInputRefs={() => { return [this._textInputRef];}}>
    <TextInput style={styles.textInput} placeholder={'My Input'} ref={(r) => { this._textInputRef = r; }}/>
</KeyboardAwareScrollView>

Example Project

Check out the full example project here.

In the example folder, perform npm install and then run it from the Xcode project.

react-native-keyboard-aware-scrollview's Issues

react nativekeyboard aware scrollview work wrong view render later

sorry my english too bad but i have issuse.

• I have 2 button
• when click them it will render another view
• i used react-native-keyboard-aware-scrollview
• But it worked wrong for me.
• here my code

     <KeyboardAwareScrollView
          resetScrollToCoords={{ x: 0, y: 0 }}
          scrollEnabled={true}
          contentContainerStyle={{flex:1}}
        >
          <View style={[Cs.header.main,]}>
            <Image
              source={require("../../static/images/ic_logo.png")}
              style={{ width: 100, height: 100 }}
            />
            <Text style={Cs.body.button.signUp.btnSignUp}>Đăng Ký Cơ Sở</Text>
          </View>
            {this.props.renderView()}
        </KeyboardAwareScrollView >

this._keyboardAwareView.props.contentInset.bottom is undefined (Workaround)

System:
Windows10
react-native: 0.63.2
react: 16.11.0
react-native-keyboard-aware-scrollview: 2.1.0
expo: 39.0.5
expo-cli: 3.28.6

I wanted to use the scrollToBottom function on a <KeyBoardAwareScrollView>.

<KeyboardAwareScrollView
                style={{flex: 1, backgroundColor: 'white'}}
                keyBoardShouldPersistTaps = "always"
                ref={(ref) => {
                    this.listRef = ref;
                }}
                getTextInputRefs={() => {return [this.emailRef, this.passwordRef, this.firstnameRef, this.lastnameRef];}}
>

I used a obviously a ref for that (

(ref) => {this.listRef = ref;}

I got the Error: TypeError: undefined is not an object (evaluating 'this._keyboardawarView.props.contentInset')

I found the line in KeyboardAwareBase.js: 129

After I deleted this element ( + this._keyboardAwareView.props.contentInset.bottom) it worked just fine!

Could you please fix this issue? I'm needing this view and it would be awesome if it worked!

Thanks in advance

setNativeProps is not a function

So I was trying to tweak component props directly to avoid re rendering whole of screen. but calling setNativeProps on referenced keyboardAwareScrollView does not work...

I have tried basic SrollView as well, it works well with setNativeProps

onScroll does not propogates

Ive tried to put my own onScroll method on the KeyboardAwareScrollView but i see that you override the method internally inside your components - how can I listen to the event of scrolling then and react to it?
thanks in advance

event.endCoordinates.height error in KeyboardAwareBase.js

For some reason when I am using this module in my app, I get the following error.
Any help is greatly appreciated.

will it supports Android?

Hi @artald, I tried the given example https://github.com/wix/react-native-keyboard-aware-scrollview/blob/master/example/index.ios.js for react native android, but it showing an error!

This is the error im getting

Thanks in Advance

Scroll be aware of a picker component

Is there a posibility to make the scoll view aware of the picker

This library has not been updated since Nov 2019. Workarounds: 1. https://github.com/APSL/react-native-keyboard-aware-scroll-view 2. KeyboardAvoidingView & ScrollView

Workarounds

Given this library hasn't been updated since Nov 2019, for anyone reading this I recommend the following workarounds:

1. Use https://github.com/APSL/react-native-keyboard-aware-scroll-view

2. Use the built in KeyboardAvoidingView, and ScrollView from React Native

// TypeScript example 😬
import React from 'react';
import { KeyboardAvoidingView, ScrollView, KeyboardAvoidingViewProps } from 'react-native';

type Props = KeyboardAvoidingViewProps & { children: React.ReactNode };

const KeyboardAwareScrollView = (props: Props): JSX.Element => {
  const { children } = props;

  return (
    <KeyboardAvoidingView style={{ flex: 1 }} {...props}>
      <ScrollView contentContainerStyle={{ flexGrow: 1 }}>{children}</ScrollView>
    </KeyboardAvoidingView>
  );
};

export default KeyboardAwareScrollView;

Inspired by this post by pepperedpopcorn on Reddit

Related issue: APSL/react-native-keyboard-aware-scroll-view#493

textinputref.isfocused is not a function

I have encountered this error while usign useRef hook

can you please give an example how to use this with useRef hook or functional component.

Here is my code:

const [household, setHousehold] = useState('')
const householdRef = useRef(null)

return(
 <KeyboardAwareScrollView getTextInputRefs={() => { return [householdRef] }} style={styles.container}>
    <TextInput multiline={true} placeholderTextColor={inputPlaceholderTextColor} placeholder='write your answer here..' style={styles.input} />
    <TextInput multiline={true} placeholderTextColor={inputPlaceholderTextColor} placeholder='write your answer here..' style={styles.input} />
    <TextInput multiline={true} placeholderTextColor={inputPlaceholderTextColor} placeholder='write your answer here..' style={styles.input} />
    <TextInput multiline={true} placeholderTextColor={inputPlaceholderTextColor} placeholder='write your answer here..' style={styles.input} />
    <TextInput {...props} ref={householdRef} multiline={true} placeholderTextColor={inputPlaceholderTextColor} placeholder='write your answer here..' style={styles.input} />
 </KeyboardAwareScrollView>
)

This is just a test so i have set only one ref.

{
 "versions": {
           "react": "16.13.1",
           "react-native": "0.63.2",
           "react-native-keyboard-aware-scrollview": "^2.1.0",
 },
"device": "iPhoneX"
}

The prop "scrollToInputAdditionalOffset" is not documented

Is there a reason why the prop "scrollToInputAdditionalOffset" is not documented?

Android problem

I have this error on Android (is ok on iOS) :

undefined is not an object (evaluating 'ScrollViewManager.getContentSize')

License

As far as I see the project has no Open Source license. Is it intentional?

`keyboardWillShow` event should be registered via the Keyboard module

RN yields this warning, looks like this API will change in near future.
Applies to all keyboard* events registered via DeviceEmitter.

Warning deprecated ComponentWillMount

Hi!
The ComponentWillMount is deprecated and will be removed in the next major version. Use componentDidMount

Update to use prop-types package

React.PropTypes is deprecated

Repository outdated?

npm already has version 1.1.7, this repository has no mention of that version anywhere (no tags, no commits)

keyboard scrollview created extra white space at bottom on android

Hi,

I am using ModalWrapper and inside there is another view. on ios it works fine. for android when keyboard opens i am unable to textinput content.

I tried to use react-native-keyboard-aware-scroll-view inside modalWrapper, but with it, topmost text input is getting hidden and there is extra white space at bottom of screen

Extra padding after keyboard was shown

Hi,

I have one small issue, not sure if it my fault our it is an bug.

Bug appears only after keyboard has been shown. It adds extra padding/margin in top. Gifs below:

This is real padding before keyboard has shown:

And this is after keyboard has been shown:

Code for this:

index.ios.js

import React, { Component } from 'react';

import {
  AppRegistry,
  Navigator,
  Text,
  StyleSheet,
  StatusBar,
  View
} from 'react-native';

import Login from './components/login';

export default class app extends Component {
  render() {
    return (
      <View style={styles.container}>
        <StatusBar
          backgroundColor="transparent"
          barStyle="default"
          translucent={true}
        />
        <Navigator
          initialRoute={{ name: 'Login', title: 'Login', component: Login, navigationBarHidden: true }}
          renderScene={(route, navigator) => {
            return <route.component navigator={navigator}/>;
          }}
          navigationBar={
             <Navigator.NavigationBar
               routeMapper={{
                 LeftButton: (route, navigator, index, navState) => {
                   return null;
                 },
                 RightButton: (route, navigator, index, navState) => {
                   return null;
                 },
                 Title: (route, navigator, index, navState) => {
                   return (
                     <Text style={styles.navigationBarText}>{route.title}</Text>
                   );
                 }
               }}
               style={styles.navigationBar}
               navigationStyles={Navigator.NavigationBar.StylesIOS}
             />
          }
        />
      </View>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1
  },
  navigationBar: {
    backgroundColor: 'red'
  },
  navigationBarText: {
    marginVertical: 10,
    fontSize: 16,
    fontWeight: '700'
  }
});

AppRegistry.registerComponent('app', () => app);

login.js

import React, {Component} from 'react';

import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scrollview'

import {
  Text,
  StyleSheet,
  TextInput,
  View,
  ScrollView,
  KeyboardAvoidingView
} from 'react-native';

import Register from './register';

class Login extends Component {
  render() {
    return (
      <View style={styles.View}>
        <KeyboardAwareScrollView keyboardDismissMode="interactive" keyboardShouldPersistTaps={true} getTextInputRefs={() => {
          return [this._firstNameTI, this._lastNameTI, this._countryTI, this._stateTI, this._addrTI, this._emailTI, this._msgTI, this._notesTI];
        }}>
          <TextInput style={styles.TextInput} placeholder={'First Name'} ref={(r) => { this._firstNameTI = r; }} returnKeyType={'next'} onSubmitEditing={(event) => this._lastNameTI.focus()}/>
          <TextInput style={styles.TextInput} placeholder={'Last Name'} ref={(r) => { this._lastNameTI = r; }} returnKeyType={'next'} onSubmitEditing={(event) => this._countryTI.focus()}/>
          <TextInput style={styles.TextInput} placeholder={'Country'} ref={(r) => { this._countryTI = r; }} returnKeyType={'next'} onSubmitEditing={(event) => this._stateTI.focus()}/>
          <TextInput style={styles.TextInput} placeholder={'State'} ref={(r) => { this._stateTI = r; }} returnKeyType={'next'} onSubmitEditing={(event) => this._addrTI.focus()}/>
          <TextInput style={styles.TextInput} placeholder={'Address'} ref={(r) => { this._addrTI = r; }} returnKeyType={'next'} onSubmitEditing={(event) => this._emailTI.focus()}/>
          <TextInput style={styles.TextInput} keyboardType="email-address" placeholder={'Email'} ref={(r) => { this._emailTI = r; }} returnKeyType={'next'} onSubmitEditing={(event) => this._msgTI.focus()}/>
          <TextInput style={styles.TextInput} placeholder={'Message'} ref={(r) => { this._msgTI = r; }} returnKeyType={'next'} onSubmitEditing={(event) => this._notesTI.focus()}/>
          <TextInput style={styles.TextInput} placeholder={'Notes'} ref={(r) => { this._notesTI = r; }} returnKeyType={'go'}/>
        </KeyboardAwareScrollView>
      </View>
    );
  }
}

var styles = StyleSheet.create({
  View: {
    flex: 1,
    paddingTop: 64
  },
  TextInput: {
    borderWidth: 1,
    height: 40,
    marginTop: 5,
    marginLeft: 5,
    marginRight: 5,
    paddingHorizontal: 5
  }
});

export default Login

when set multiline={true} not working

Only scroll to view when view is hidden under keyboard

See the attachment. Such handling looks messy and should not happen.

Does this package work with Expo?

It would seem so since we don't need to do any native binary things but just checking to make sure -- is it compatible with expo.io?

Error thrown when selecting input

I got this error when I select an input (on the first or second time after render) in a KeyboardAwareScrollView. I did nothing special, just wrapped a KeyboardAwareScrollView around some inputs from UI Kitten. I'm running the latest version of this package with React Native 0.63.2, no Expo, on iPhone 11 iOS 13.6.

On Android6, it is not working when I set android:windowSoftInputMode="adjustResize"

Hi.
Thanks for creating such nice library.
But I've one issue on Android.
On Android, if I set android:windowSoftInputMode="adjustResize" on AndroidManifest file, this feature not works.
If I remove this configuration, it works but I have to use this configuration.
Is there anyway to use this feature with using android:windowSoftInputMode="adjustResize"?

White space when keyboard dismisses

White space appears in place for keyboard when keyboard dismisses

here are the steps to reproduce :

1. login to app - android
2. tap on any ticket
3. tap on text entry type
4. enter space by tapping on space bar
5. tap on DONE button
   keyboard area will be masked by the blank white screen
   

is there a way to use scrollTo with KeyboardAwareScrollView?

I am not able to use scrollTo with KeyboardAwareScrollView. Am I missing something?

Doesn't work

When keyboard appears, the scrollview doesn't scroll at all.

Works intermittently on a large multiline TextInput field

Given that I have a multiline TextInput with content that exceeds the height of the viewport, the KeyboardAwareScrollView component intermittently works. I find that while the content is scrolling (scroll bars are visible) and you are quick enough to keep scrolling up and down it works fine. As soon as the scroll bars disappear, it then takes multiple attempts to get the scroll working again.

I have tested my code using a large View instead of the TextInput and it works without fail every time, so it's definitely misbehaving with multiline inputs.

not work on RN 0.42

not work on RN 0.42

Joining forces

Hi!

I'm the author of https://github.com/APSL/react-native-keyboard-aware-scroll-view

I would love to know if we could join forces into our repo.

Thanks.

After click on the return in the keyboard, keyboard not get closed

I have used react-native-keyboard-aware-scrollview, but the keyboard not closed after click on the return