Should this work for Android? I was having an issue with a view in iOS and Android and I put this component in place. It seemed to fix the iOS version, but the Android version still behaves the same (the keyboard covers the content in the ScrollView).

getting keyboardWillshow event should be registered via the Keyboard module warning in RN 0.27.0

Hey Guys,

I've used this library for a while now and it's been great but I just saw that react native released in RN 0.29. Although I like this module, I generally will revert to the react native stock code instead of using an addition module. Has anyone used it? Is it any good?

Here's a link to the commit adding <KeyboardAvoidingView />

Upgraded to 0.2.0 (which fixes some scrolling issues on Android) but now iOS is broken

It doesn't seem to work in 0.1.2.
When I set alwaysBounceHorizontal & alwaysBounceVertical as false, as in #35 (I faced the same issue),
it wouldn't autofocus, and when I manually scroll to the desired TextInput and dismiss the keyboard the scrollView is stuck at its position.
Is there a guideline or things to keep in mind with this? Most of the textinputs are hidden behind the keyboard in my case.

this module works for me but intially when it renders it shows scrollbar, and behaves as like of scrollview. what is the purpose of behaving like scrollview? i only need scrolling view up when i input text in textfield. Give me some suggestion.

I am following the example to try auto-scroll to TextInput in ScrollView, however I got:

Any idea where I might go wrong?

We tested this component with and without the RN Navigator component, and when we use it with the Navigator as a wrapper to all our views, the keyboard-aware stops working.
We are working on Android.
Any thoughts on this?

Do you support both iOS and Android? Thanks.

When focusing on a textinput it throws the error. I tried fixing using the answer from http://stackoverflow.com/questions/32730736/undefined-is-not-an-object-evaluating-frames-end-height-of-react-native-keyb . the error disappeared but the scroll-view just does not work now.

Anyone else had this issue?

In the KeyboardAwareMixin.js const _KAM_EXTRA_HEIGHT = 75 is the default.
It is hardcoded and we have to manually change the extra height there, but will break with a new upgrade. Is there a way you can allow to set it via props? Something like this:
<KeyboardAwareScrollView extraHeight={120}?

Hey!

Thanks for react-native-keyboard-aware-scroll-view! All works great apart from the issue in which all of the TextFields which are not contained within stop working. The error appears after the keyboard is presented :

When using the KeyboardAwareListView I get the following warning:

This happens because the propType renderScrollComponent is required in the RN ListView component.

I solved the warning by overriding the renderScrollComponent and marking is as not required in the KeyboardAwareListView component.

/* @flow */

import React, { PropTypes } from 'react'
import { ListView } from 'react-native'
import KeyboardAwareMixin from './KeyboardAwareMixin'

const KeyboardAwareListView = React.createClass({
  propTypes: {
    ...ListView.propTypes,
    viewIsInsideTabBar: React.PropTypes.bool,
    resetScrollToCoords: PropTypes.shape({
      x: PropTypes.number,
      y: PropTypes.number,
    }),
    renderScrollComponent: React.PropTypes.func, //Added this line
  },
  mixins: [KeyboardAwareMixin],

  componentWillMount: function () {
    this.setViewIsInsideTabBar(this.props.viewIsInsideTabBar)
    this.setResetScrollToCoords(this.props.resetScrollToCoords)
  },

  render: function () {
    return (
      <ListView
        ref='_rnkasv_keyboardView'
        keyboardDismissMode='interactive'
        contentInset={{bottom: this.state.keyboardSpace}}
        showsVerticalScrollIndicator={true}
        {...this.props}
      />
    )
  },
})

export default KeyboardAwareListView

Is this a valid solution?

I am getting this error while trying to use the KeyboardAwareScrollView component.
It seems the 'Keyboard' keyword in Keyboard.addListener is not defined or not recognized.
Has anyone else faced the error?
Any help appreciated.

Has anyone come across this error?

2016-05-15 15:22:25.758 [error][tid:com.facebook.react.ShadowQueue][RCTModuleMethod.m:58] Argument 0 (NSNumber) of RCTUIManager.measureLayout must not be null
2016-05-15 15:22:25.784 [error][tid:com.facebook.react.ShadowQueue][RCTModuleMethod.m:58] Argument 0 (<null>) of RCTUIManager.measureLayout could not be processed. Aborting method call.

I think I followed the instructions correctly. The error appears after I tap the textInput. I'm running React 0.14.5 and React Native 0.25.1.

Hey,
here is my code related to #18 (comment)

I'm using the following structure

video.js

Posting extends from React.Component {

  constructor(props) {
    super(props);
}

_scrollToInput (event, reactNode) {
 this.refs.scroll.scrollToFocusedInput(event, reactNode)
}

render() {
  return 
    (<View>
     <Video/>
      <KeyboardAwareScrollView ref='scroll'>
        <CommentItem/>
        <CommentItem/>
        <TextInput onFocus={this._scrollToInput}/>
     </KeyboardAwareScrollView>
    </View>)
 }

}

If I click on the text input, reactNode is null. I'm using RN 0.25.1

The android version no UIManager.viewIsDescendantOf method. So
// Automatically scroll to focused TextInput
if (this.props.enableAutoAutomaticScroll) {
const currentlyFocusedField = TextInput.State.currentlyFocusedField()
if (!currentlyFocusedField) {
return
}
UIManager.viewIsDescendantOf(
currentlyFocusedField,
this.getScrollResponder().getInnerViewNode(),
(isAncestor) => {
if (isAncestor) {
this.scrollToFocusedInputWithNodeHandle(currentlyFocusedField)
}
}
)
}

this code has problem. How solve it?

Using the latest version on RN 0.32:

When focusing on a text input that requires scrolling, it'll correctly readjust the position of the text input to above the keyboard, but then dismisses the keyboard. Strangely, if you tap on the text input again, the keyboard will pop up, but then dismiss itself after entering a single character. Then focusing on that text input again will allow you to write whatever you'd like.

Issue only seen on Android. Has anyone else seen this behavior?

Edit: Looking at the mixin some more, it seems the latest release only works on iOS - the keyboard events are never triggered on Android, and would throw an error if they were for using UIManager. Is there something needed for Android to keep the keyboard up - maybe in the manifest file?

I am trying to implement the library in tcombform this is my code:

`

I generated the error:
undefined is not an object (Evaluating '_reactNative.Keyboard.addListener')

I have multiple inputs structured like the following, when I tap and focus on an input close to the bottom, I expect the view to scroll to the focused input because the input is underneath the keyboard. But the scroll view doesn't do anything. Am I missing something here? Do I need to call anything from onFocus of each <TextInput>?

    <KeyboardAwareScrollView viewIsInsideTabBar={true}
                                     keyboardShouldPersistTaps={true}>
            <View>
                <View>
                    <TextInput>...</TextInput>
                </View>
                <View>
                    <TextInput>...</TextInput>
                </View>
                <View>
                    <TextInput>...</TextInput>
                </View>
            </View>
    </KeyboardAwareScrollView>

Hi all, firstly, thanks for the component and for your time of maintaining it.

I'm using native-base which uses react-native-keyboard-aware-scroll-view. I was aware of the issue #25 and was waiting for the new react-native and react-native-keyboard-aware-scroll-view versions (respectively 0.32.0 and 0.2.0). Even after the upgrade, I'm still having this issue on IOS when I focus an input and keyboard shows up.

My package.json looks like this:

"dependencies": {
    "buffer": "^4.9.0",
    "native-base": "0.5.7",
    "react": "~15.3.0",
    "react-native": "0.32.0",
    "react-native-code-push": "^1.13.5-beta",
    "react-native-fbsdk": "^0.3.0",
    "react-native-i18n": "0.0.8",
    "react-native-image-picker": "^0.21.5",
    "react-native-keyboard-aware-scroll-view": "0.2.0",
    "react-native-multiple-choice": "0.0.8",
    "react-native-swiper": "^1.4.9",
    "react-native-vector-icons": "^2.0.3",
    "react-redux": "^4.4.5",
    "redux": "^3.5.2",
    "redux-logger": "^2.6.1",
    "redux-persist": "^3.2.2",
    "redux-promise": "^0.5.3",
    "redux-thunk": "^2.1.0",
    "remote-redux-devtools": "^0.3.4",
    "rx": "^4.1.0"
  }

Am I missing something or is this a bug?

Thanks!

I cann't get it to work properly. Here is how it looks for me:

http://i.imgur.com/nO1m1fg.gif

'use strict'

import React, {
    Component,
    AppRegistry,
    Text,
    TextInput,
    View,
    ScrollView,
} from 'react-native'
import { KeyboardAwareScrollView, } from 'react-native-keyboard-aware-scroll-view'

class KeyboardScrollTest extends Component {
    render() {
        return (
            <View style={{height:600}}>
                <View style={{flex:3}}></View>
                <View style={{flex:1}}>
                    <KeyboardAwareScrollView>
                        <TextInput style={{bordrerColor:'black',borderWidth:1,height:40}} />
                    </KeyboardAwareScrollView>
                </View>
            </View>
        )
    }
}

AppRegistry.registerComponent('KeyboardScrollTest', () => KeyboardScrollTest)

I've pushed the code https://github.com/OleksandrBezhan/react-native-keyboard-aware-scroll-view-test

When i input text in textfield, the textfield moves up and provides user to input , but when i completed inputing text and click on done, the textinput field doesnot comes to its original place, i have enabled alwaysBounceVertical={true} and scrollEnabled={false}. what had happened now? i think the view should comes to its original place after text input task is finished.

I use ancestor_check branch and modify the RN core file follow Adds the ability to use UIManager to check if a node is an ancestor , they seems working correct about Text input field component + Redux but when just click a input field in a web page (WebView) it occurred a error like below. my environment is RN0.31 and NativeBase 0.52, NativeBase use the react-native-keyboard-aware-scroll-view as him Content component. Any one can give me some suggest?

Argument 0 (NSNumber) of RCTUIManager.viewIsDescendantOf must not be null

Looks like RN 0.26 broke this plugin, the error I get is
"Super expression must either be null or a function, not undefined"

if(Platform.OS === 'android') {

     try {
       this.scrollToFocusedInputWithNodeHandle(currentlyFocusedField)
     } catch (e) {

     }
  } else {
    UIManager.viewIsDescendantOf(
        currentlyFocusedField,
        this.getScrollResponder().getInnerViewNode(),
        (isAncestor) => {
          if (isAncestor) {
            // Check if the TextInput will be hidden by the keyboard
            UIManager.measureInWindow(currentlyFocusedField, (x, y, width, height) => {
              if (y + height > frames.endCoordinates.screenY) {
                this.scrollToFocusedInputWithNodeHandle(currentlyFocusedField)
              }
            })
          }
        }
    )
  }

KeyboardAwareListView inherited propTypes from ListView. Some of the props there are listed with .isRequired but do have default props set. As KeyboardAwareListView doesn't have default props, this would trigger some warnings in development mode.

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

Hi viewIsInsideTabBar props is not working, I want to remove the offset at the bottom but i can't remove it either way

Given KeyboardAvoidingView is now in Core it would be great to see efforts shifted to help make that component better rather than running down two different roads:

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

Before I complain a bit. Thanks for this. It solved a need that I had. Now, on to my mild rant.

I reloaded my node_modules with my dependency set at "react-native-keyboard-aware-scroll-view": "~0.1.0", to allow non-breaking changes (according to semantic versioning).

This upgraded me from 0.1.0 to 0.1.2. Now KASV requires React Native 0.27. This is a breaking change and should be reserved for a 0.2.0 release. For now, I'll just fix my package.json but you should try to avoid this situation in order to be producing a quality reusable component.

When following the instructions listed in the readme, on react-native 0.24, on iOS. I get the following message

I've traced it down to

_onTextFieldFocused(event, reactNode) {
   this.refs.scroll.scrollToFocusedInput(event, reactNode)
}

When I step into this function, after onFocus={this._onTextFieldFocused} is triggered. event is a ReactSyntheticEvent and reactNode is not defined. It seems that scrollToFocusedInput fails because no reactNode is present.

Any tips?

as you can see, after focusing an InputText, ScrollView has margin on top as much as status bar.

Hi, i have problem when build release.
But developer mode, it working well.
It not working, Can you check it.
I have test with other device like iphone 5, iphone 4s (it not working).

Input emoji:

Input text is ok:

looking at the gifs above, keyboard is disappeared, but the UI doesn't recover to beginning(Input component doesn't drop to bottom).

source code is like this:

 <KeyboardAwareScrollView
        style={styles.container}
        scrollEnabled={false}
        keyboardShouldPersistTaps={true}
        contentInset={{ bottom: PlatformSize({ios: 1, android: 0}) }}
      >
        <ListView
          ref={ref => this.listView = ref}
          style={[styles.ListView, { height: this.listHeight }]}
          enableEmptySections={true}
          dataSource={dataSource}
          renderRow={this.renderRow}
          onContentSizeChange={() => { this.setListViewPosition() }} />
          <View style={styles.footerContainer}>
            <TextInput
              style={styles.inputText}
              value={this.state.commentText}
              autoCapitalize={'none'}
              placeholder={'Enter'}
              multiline={true}
              autoCorrect={false}
              keyboardType='default'
              onChangeText={this._handleTextChange} />
            <SubmitButton
              isPosting={this.props.isPosting}
              onPress={this._onSubmit} />
          </View>
      </KeyboardAwareScrollView>

Getting this error. Any ideas?

Src

class ScrollableLoginScreen extends React.Component {
  _scrollToInput (event, reactNode) {
  // Add a 'scroll' ref to your ScrollView
    this.refs.scroll.scrollToFocusedInput(event, reactNode)
  }

  render() {
    return (
      <KeyboardAwareScrollView ref='scroll'>
        <LoginScreen {...this.props} scrollToInput={this._scrollToInput.bind(this)} />
      </KeyboardAwareScrollView>
    )
  }
}
class LoginScreen extends React.Component {
  render() {
    const {fields, handleSubmit, submitting, error, scrollToInput, ...props} = this.props
    return (
      <View style={styles.screen}>
        <StatusBar hidden={false} />
        <View style={styles.modal}>
          <IconTextInput ref='my-input' iconName="envelope-o" placeholder='Email' style={styles.input} {...fields.email} onFocus={scrollToInput} />
          <IconTextInput iconName="lock" placeholder='Password' style={styles.input} {...fields.password} onFocus={scrollToInput} />
          <Button style={theme.BUTTON} styleDisabled={theme.BUTTON_DISABLED} containerStyle={styles.loginButton} 
            disabled={submitting} onPress={handleSubmit}>LOGIN</Button>
          {submitting && <Spinner />}
          {(!submitting && error) && <Text style={theme.TEXT_ERROR}>{error}</Text>}
        </View>
      </View>
    )
  }
}

It looks like the keyboard isn't positioned quite right - it overlaps the text input.

I think it changed after upgrading to RN 0.29

I am trying to implement the library in tcombform this is my code:

I generated the error:
undefined is not an object (Evaluating '_reactNative.Keyboard.addListener')

Hello,

I followed your instructions but when I focus on the text input I got an error:
undefined is not an object (evaluating this.refs.scroll)

Thanks