CODEWITHSUNDEEP
reactjsreact-native
Rajesh
Rajesh

Reputation: 556

How to get textInputs into focus in react-native?

Im new to react-native and may be the question Im asking can be very noob. But Im not able to find any reference for it somehow.

enter image description here

There are 6 text inputs in the picture, but we can merely see 4 when keyboard appears, so how can we get 5th text input into visible area when keyboard is still there ?

Upvotes: 0

Views: 1547

Answers (1)

Janic Duplessis
Janic Duplessis

Reputation: 687

I assume you want to scroll the input when clicked so it is visible when the keyboard is opened. There is a nice library to handle this easily.

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

const Screen = React.createClass({

  _scrollToInput(event) {
    this.refs.scrollview.scrollToFocusedInput(event, event.nativeEvent.target);
  },

  render() {
    return (
      <KeyboardAwareScrollView ref="scrollview">
        <View>
          <TextInput onFocus={this._scrollToInput}/>
        </View>
      </KeyboardAwareScrollView>
    );
  },
});

Upvotes: 1

Related Questions