React-native-keyboard-aware-scroll-view: this.refs.scroll.scrollToFocusedInput is not a function

[pzehle]

Ok I'm a bit tired of getting this error. I followed the example you gave:

Error: this.refs.scroll.scrollToFocusedInput is not a function. (In 'this.refs.scroll.scrollToFocusedInput(reactNode)', 'this.refs.scroll.scrollToFocusedInput' is undefined)

_scrollToInput (reactNode: any) { this.refs.scroll.scrollToFocusedInput(reactNode) }

render() {
    const { title, featured_image, publish_date, author_name, post_body } = this.props.navigation.state.params;
    var datePosted = new Date(publish_date).toString();
    var imageHttps = featured_image.replace(/^http:\/\//i, 'https://');
    return(
        <KeyboardAwareScrollView ref="scroll" style={styles.page}>
            <View style={styles.card}>
                <Image style={styles.image} source={{uri: imageHttps}} />
                <View style={styles.content}>
                    <Text style={styles.title}>{title}</Text>
                    <Text style={styles.postInfo}>Por {author_name}, {datePosted.substr(4,11)}</Text>
                    <View style={styles.separator}></View>
                    {/* REDES SOCIALES (SHARE) */}
                    <Text style={styles.body}>{post_body.replace(/<.+?>/g, '').replace(/&nbsp;/g, ' ')}</Text>
                    {/* REDES SOCIALES (SHARE) */}
                    <View style={styles.separator}></View>
                    <Text style={styles.commentLabel}>Nombre*</Text>
                    <TextInput
                        ref="commentName"
                        style={styles.commentInput}
                        onChangeText={(commentName) => this.setState({commentName})}
                        value={this.state.commentName}
                        onFocus={(event: Event) => {this._scrollToInput(findNodeHandle(event.target))}}
                    />
                </View>
            </View>
        </KeyboardAwareScrollView>
    );
}

Nothing works, please help.

[tibbus]

try :

_scrollToInput = (reactNode: any) => { this.refs.scroll.scrollToFocusedInput(reactNode) }

[pzehle]

Sorry for the late answer. I did what you told me and I'm still getting the same error: "_this.refs.scroll.scrollToFocusedInput is not a function..."
Maybe I'm getting this because I have to views nested inside the KeyboardAwareScrollView? Thanks for the help.

[Swordsman-Inaction]

Works on my side. You can try to bind the component to _scrollToInput function in constructor, like:

constructor(props) {
  super(props);
  this._scrollToInput = this._scrollToInput.bind(this);
}

[Swordsman-Inaction]

@tibbus just realized it has the same effect with yours answer

[pzehle]

Thanks for the answer, but no, still the same error.

[Swordsman-Inaction]

@pzehle Can you provide a minimum sample to re-produce this issue? I cannot re-produce it.

[alvaromb]

Please @pzehle send us a minimum example to try to reproduce the issue.

Thanks!

[alvaromb]

There's a big change coming in the library, https://github.com/APSL/react-native-keyboard-aware-scroll-view/pull/173

This problem should be addressed by now.

[jbaek7023]

Try this.scroll.props.scrollToFocusedInput(reactNode)

[sujitpk-perennial]

I am facing same problem for flatlist. I am trying to scroll to top but no luck. What I wrote is

      this.refs.templateFlatList.scrollToOffset({
        offset: 0,
        animated: false
      })

[martimarkov]

Having the same issue using the latest version.

[sujitpk-perennial]

@martimarkov I solved it using following code.

  scrollToTop = () => {
    this.templateFlatList._component.scrollToOffset({ offset: 0, animated: false });
  }

[webdevinci]

@jbaek7023 that worked for me! Anyway that author can update the documentation? That took way too much time to figure out

[johnstonco]

Thank you @jbaek7023 !

[jbaek7023]

@NoHurryNoPause @webdevinci

Glad it helped 👍

[amazingwebdev]

The name of function scrollToFocusedInput isn't correct.
Instead of that, please use this function. _scrollToFocusedTextInput.