move the view up when keyboard as shown in react-native

Question

hai i am trying to move the view up when keyboard as shown using react-native,I followed the @sherlock's comment in (How to auto-slide the window out from behind keyboard when TextInput has focus? i got an error like this

I don't know how to resolve this error, can any one help me how to resolve this, any help much appreciated.

score 0 · Answer 1 · answered Nov 12 '15 at 15:42

There's a great discussion about this in the react-native github issues https://github.com/facebook/react-native/issues/3195#issuecomment-147427391

I'd start there, but here are a couple more links you may find useful, one of which is mentioned already in the article you referenced...

score 0 · Answer 2 · answered Jan 24 '16 at 17:43

In my library "react-native-form-generator" (https://github.com/MichaelCereda/react-native-form-generator) i did the following.

I created a Keyboard Aware scroll view (partially modified from https://github.com/facebook/react-native/issues/3195#issuecomment-146518331)

the following it's just an excerpt

export class KeyboardAwareScrollView extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      keyboardSpace: 0,
    }
    this.updateKeyboardSpace = this.updateKeyboardSpace.bind(this)
    this.resetKeyboardSpace = this.resetKeyboardSpace.bind(this)
  }


  updateKeyboardSpace (frames) {

    let coordinatesHeight = frames.endCoordinates.height;
    const keyboardSpace = (this.props.viewIsInsideTabBar) ? coordinatesHeight - 49 : coordinatesHeight
    this.setState({
      keyboardSpace: keyboardSpace,
    })

  }

  resetKeyboardSpace () {
    this.setState({
      keyboardSpace: 0,
    })
  }

  componentDidMount () {
    // Keyboard events
    DeviceEventEmitter.addListener('keyboardWillShow', this.updateKeyboardSpace)
    DeviceEventEmitter.addListener('keyboardWillHide', this.resetKeyboardSpace)
  }

  componentWillUnmount () {
    DeviceEventEmitter.removeAllListeners('keyboardWillShow')
    DeviceEventEmitter.removeAllListeners('keyboardWillHide')
  }

  scrollToFocusedInput (event, reactNode, extraHeight = 69) {
    const scrollView = this.refs.keyboardScrollView.getScrollResponder();
    setTimeout(() => {
      scrollView.scrollResponderScrollNativeHandleToKeyboard(
        reactNode, extraHeight, true
      )
    }, 220)
  }

  render () {
    return (
      <ScrollView
        ref='keyboardScrollView'
        keyboardDismissMode='interactive'
        contentInset={{bottom: this.state.keyboardSpace}}
        showsVerticalScrollIndicator={true}
        style={this.props.style}>
        {this.props.children}
      </ScrollView>
    )
  }

Then i use it like any other scrollview

import { KeyboardAwareScrollView } from 'react-native-form-generator'
...
handleFormFocus(event, reactNode){
   this.refs.scroll.scrollToFocusedInput(event, reactNode)
}
...
  <KeyboardAwareScrollView ref='scroll'>
    <Form ref='registrationForm'
      onFocus={this.handleFormFocus.bind(this)}
      onChange={this.handleFormChange.bind(this)}
      label="Personal Information">
      ........
    </Form>
</KeyboardAwareScrollView>

on change my component (Form) will call scrollToFocusedInput in KeyboardAwareScrollView (using the ref).

i suggest to check the code of my library (see the link on top), or simply use it (everything it's already tested and working).

If you have further questions just comment

move the view up when keyboard as shown in react-native

2 Answers2