Cannot auto-scroll to TextInput

[allanjsx]

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

Any idea where I might go wrong?

[ms88privat]

+1

[xp19870106]

The same problem! anyone solved this issue?

[KBLNY]

+1

[alvaromb]

Sorry guys, will try to reproduce the error, but I need some piece of code to do that, do you have any?

[KBLNY]

Hi,
FYI, I have a KeyboardAwareScrollView with 2 TextInput.

According to the following post, you have to tweak the instructions a bit like: #5

  <TextInput ref='foo' onFocus={(event) => {
        this._scrollToInput(event, 'foo');
    }}/>

  _scrollToInput (event, refName) {
    let node = React.findNodeHandle(this.refs[refName]);
    let extraHeight = 70; // height of your text input 
    this.refs.scrollView.scrollToFocusedInput(event, node, extraHeight);
  },

[nickmaxwell10]

I am getting the same error. +1. Tried @KBLNY's solution above, no luck.

[alvaromb]

Will try to solve this ASAP, but I’m facing an enormous amount of work, sorry :(

Á�lvaro Medina Ballester
amedina@apsl.net

On 14 Apr 2016, at 09:49, Nick Maxwell notifications@github.com wrote:

I am getting the same error. +1. Tried @KBLNY https://github.com/KBLNY's solution above, no luck.

—
You are receiving this because you commented.
Reply to this email directly or view it on GitHub #8 (comment)

[KBLNY]

@nickmaxwell10 Do you have the same issue? You sure you replaced the refs name, function names, etc. with yours? Did you tried from scratch with only one TextInput in your page?

[nickmaxwell10]

@KBLNY, I have not tried from scratch. Mine is actually quite a complicated use-case. I have multiple ListViews in a ScrollableTabView. I simply tried to replace my ListViews with KeyboardAwareListViews, add in the refs on the text inputs and implement the _scrollToInput function. It crashed on this line this.refs.scrollView.scrollToFocusedInput(event, node, extraHeight); with the "Argument 0 (NSNumber) or RCTUIManager.measureLayout must not be null" error. I'll have to do some re-working on a simpler use-case.

[nickmaxwell10]

@KBLNY Just tried from a scratch file, still getting the error with the following code on RN 0.23.0

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  Image,
  TextInput,
  View,
} = React;


import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'

var Example = React.createClass({
  getInitialState: function() {
    return {}
  },
  scrollToInput: function(event, reactNode) {
    this.refs.scroll.scrollToFocusedInput(event, reactNode)
  },
  render: function() {
    return (
      <View style={styles.container}>
        <KeyboardAwareScrollView ref='scroll'>
          <View style={{flex:1, }}>
            <TextInput ref='input1' onFocus={this.scrollToInput} style={{height: 30, width: 100, borderColor:'#F00', borderWidth:1}} />
          </View>
        </KeyboardAwareScrollView>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

module.exports = Example;

[nickmaxwell10]

@KBLNY Ok, your fix works... Working demo in RN 0.23.0

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  Image,
  TextInput,
  TouchableHighlight,
  AsyncStorage,
  View,
  AlertIOS,
} = React;


import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'

var Example = React.createClass({
  componentDidMount: function() {
  },
  getInitialState: function() {
    return {}
  },
  scrollToInput: function(event, refName) {
    let node = React.findNodeHandle(this.refs[refName]);
    let extraHeight = 70; // height of your text input 
    this.refs.scrollView.scrollToFocusedInput(event, node, extraHeight);
  },
  render: function() {
    return (
      <View style={styles.container}>
        <KeyboardAwareScrollView ref='scrollView'>
          <View style={styles.textContainer}>
            <TextInput ref='foo' onFocus={(event) => {
                  this.scrollToInput(event, 'foo');
              }} style={{height: 30, width: 100, borderColor:'#F00', borderWidth:1}}/>
          </View>
          <View style={styles.textContainer}>
            <TextInput ref='foo1' onFocus={(event) => {
                  this.scrollToInput(event, 'foo1');
              }} style={{height: 30, width: 100, borderColor:'#F00', borderWidth:1}}/>
          </View>
          <View style={styles.textContainer}>
            <TextInput ref='foo2' onFocus={(event) => {
                  this.scrollToInput(event, 'foo2');
              }} style={{height: 30, width: 100, borderColor:'#F00', borderWidth:1}}/>
          </View>
        </KeyboardAwareScrollView>

      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  textContainer: {
    flex:1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical:100,
  },
});

module.exports = Example;

[nickmaxwell10]

Ok, it broke when I added multiple scrollviews in a react-native-scrollable-tab-view. Am I doing something wrong here?

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  Image,
  TextInput,
  TouchableHighlight,
  AsyncStorage,
  View,
  AlertIOS,
} = React;


import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'

var ScrollableTabView = require('react-native-scrollable-tab-view');

var Example = React.createClass({
  componentDidMount: function() {
  },
  getInitialState: function() {
    return {}
  },
  scrollToInput: function(event, refName) {
    let node = React.findNodeHandle(this.refs[refName]);
    let extraHeight = 70; // height of your text input 
    var index = this.refs.scrollTabView.state.currentPage;
    this.refs['scrollView_'+index].scrollToFocusedInput(event, node, extraHeight);
  },
  renderScrollViews: function() {
    var views = [];
    var renderRow = this.renderRow;
    for(var i = 0; i < 7; i++) {
      var scrollRef = 'scrollView_'+i;
      views.push(
        <KeyboardAwareScrollView key={scrollRef} ref={scrollRef}>
          <View style={styles.textContainer}>
            <TextInput ref={'foo'+i} onFocus={(event) => {
                  this.scrollToInput(event, 'foo'+i);
              }} style={{height: 30, width: 100, borderColor:'#F00', borderWidth:1}}/>
          </View>
          <View style={styles.textContainer}>
            <TextInput ref={'foo1'+i} onFocus={(event) => {
                  this.scrollToInput(event, 'foo1'+i);
              }} style={{height: 30, width: 100, borderColor:'#F00', borderWidth:1}}/>
          </View>
          <View style={styles.textContainer}>
            <TextInput ref={'foo2'+i} onFocus={(event) => {
                  this.scrollToInput(event, 'foo2'+i);
              }} style={{height: 30, width: 100, borderColor:'#F00', borderWidth:1}}/>
          </View>
        </KeyboardAwareScrollView>
      );
    }
    return views;
  },
  render: function() {
    return (
      <View style={styles.container}>
        <ScrollableTabView ref="scrollTabView" edgeHitWidth={500} >
          {this.renderScrollViews()}
        </ScrollableTabView>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  textContainer: {
    flex:1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical:100,
  },
});

module.exports = Example;

[alvaromb]

Have you tried to console.log the refs?

For instance,

scrollToInput: function(event, refName) {
  let node = React.findNodeHandle(this.refs[refName]);
  // Check the ref and the node
  console.log('Node', node);
  console.log('refName', refName);
  let extraHeight = 70; // height of your text input 
  var index = this.refs.scrollTabView.state.currentPage;
  // Check your selected tab
  console.log('index', index);
  this.refs['scrollView_'+index].scrollToFocusedInput(event, node, extraHeight);
  // Check also the scroll view index
  console.log('scrollView_', `scrollView_${index}`);
},

[alvaromb]

Ok, I tried your code but it seems you have a bug somewhere in your refs creation. This is an output of the debugger. You'll see that you're trying to find a node that doesn't exist with ref foo7. Once the React node is null, the error appears.

[alvaromb]

@nickmaxwell10 this code works

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  Image,
  TextInput,
  TouchableHighlight,
  AsyncStorage,
  View,
  AlertIOS,
} = React;


import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'

var ScrollableTabView = require('react-native-scrollable-tab-view');

var Example = React.createClass({
  componentDidMount: function() {
  },
  getInitialState: function() {
    return {}
  },
  scrollToInput: function(event, refName) {
    let node = React.findNodeHandle(this.refs[refName]);
    let extraHeight = 70; // height of your text input
    var index = this.refs.scrollTabView.state.currentPage;
    this.refs['scrollView_'+index].scrollToFocusedInput(event, node, extraHeight);
  },
  renderScrollViews: function() {
    var views = [];
    var renderRow = this.renderRow;
    for(var i = 0; i < 7; i++) {
      var scrollRef = 'scrollView_'+i;
      // Use fixed constants to set the input refs
      const ref1 = `foo${i}`
      const ref2 = `foo1${i}`
      const ref3 = `foo2${i}`
      views.push(
        <KeyboardAwareScrollView key={scrollRef} ref={scrollRef}>
          <View style={styles.textContainer}>
            <TextInput ref={ref1} onFocus={(event) => {
                  this.scrollToInput(event, ref1);
              }} style={{height: 30, width: 100, borderColor:'#F00', borderWidth:1}}/>
          </View>
          <View style={styles.textContainer}>
            <TextInput ref={ref2} onFocus={(event) => {
                  this.scrollToInput(event, ref2);
              }} style={{height: 30, width: 100, borderColor:'#F00', borderWidth:1}}/>
          </View>
          <View style={styles.textContainer}>
            <TextInput ref={ref3} onFocus={(event) => {
                  this.scrollToInput(event, ref3);
              }} style={{height: 30, width: 100, borderColor:'#F00', borderWidth:1}}/>
          </View>
        </KeyboardAwareScrollView>
      );
    }
    return views;
  },
  render: function() {
    return (
      <View style={styles.container}>
        <ScrollableTabView ref="scrollTabView" edgeHitWidth={500} >
          {this.renderScrollViews()}
        </ScrollableTabView>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  textContainer: {
    flex:1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical:100,
  },
});

module.exports = Example;

The problem was that once you execute the onFocus event, the i index is beyond bounds so the node can't be found. I've patched your code but please do not take it as an optimum solution.

@allanjsx @ms88privat @xp19870106 please consider posting your code or debugging the findNodeHandle result, because this error is produced once you send null as a node.