react native scrollView - scroll to bottom programatically

Question

Im trying to scroll to end of scrollView if user chooses 'Yes' from an alert....using refs. However its not working...can anyone help?

Below is code for scrollView component opening tag

<ScrollView
  ref={ref => {this.scrollView = ref;}}>

Below is code elsewhere in class

      Alert.alert(
        'Scroll to end?',
        [
          {
            text: 'No',
            style: 'cancel',
          },
          {
            text: 'Yes',
            onPress: () => {
              this.scrollView.scrollToEnd();
            },
          },
        ],
      );

You're using functional component or class component? – Nguyễn Khương Apr 07 '21 at 06:32 — Nguyễn Khương, Apr 07 '21 at 06:32

score 0 · Answer 1 · answered Apr 04 '21 at 06:58

It should work in your implementation.

My return statement in render function looks like this

      <SafeAreaView style={styles.container}>
        <Button title={'2-Button Alert'} onPress={this.createTwoButtonAlert} />
        <ScrollView
          style={styles.scrollView}
          ref={ref => {this.scrollView = ref;}}>  // here is ref to my scroll view
          <Text style={styles.text}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            
          </Text>
        </ScrollView>
      </SafeAreaView>

This is my Alert, where I was able to scroll to the bottom using ref

    Alert.alert('Alert Title', 'My Alert Msg', [
      {
        text: 'Cancel',
        onPress: () => console.log('Cancel Pressed'),
        style: 'cancel',
      },
      { text: 'OK', onPress: () => this.scrollView.scrollToEnd() },
    ]);

Take a look at a fully working example snack.

Not sure where are things breaking in your code. Use this as a reference. Maybe, providing more code may help us figure out the problem.

react native scrollView - scroll to bottom programatically

1 Answers1