Scroll to the end of an Animated ScrollView

[louisnw01]

Hi!

It doesn't seem like there is a straightforward way to scroll to the end of a scrollview container when using an animatedRef, as this gets rid of the scrollToEnd method.

Are there any examples of how to do this whenever the length of the animated scrollview changes?

Thanks!

[MatiPl01]

Hey!

You can simply use scrollTo(aref, 0, Infinity, animated). Just pass an Infinity as the scroll offset and it will scroll to the end of your scrollable.

[cveklica]

not working on iOS and new arch

[MatiPl01]

What do you mean? I tested it out and it scrolls the srollable.

[cveklica]

it works very nice on iOS, on android there is no animation, goes straight to end, and messes with UI (not sure how that is possible since it is very simple). It works nice only if number is appropriate (animation depends on number on android, not constant as on iOS. Like animation duration is fixed, and depending on number it goes very fast or slow).
In the end I used onContentSizeChange and useSharedValue to store scrollView height for it to work.
I am on new arch, RN 0.81.5 and "react-native-reanimated": "4.2.1", react-native-worklets": "0.7.1"

[MatiPl01]

Ok, will test on Android. You said that it doesn't work on iOS before, so I checked iOS only.

[MatiPl01]

Ok @cveklica, I can see this issue but the same problem happens when I use scrollTo from react-native so this doesn't seem to be a reanimated problem but something is broken in the React Native itself.

---

What I can suggest is storing the size of the scrollable content and using the exact distance instead. For example, you can use the onContentSizeChange callback on the FlatList but you have to keep in mind that it measures only the currently rendered content so if more items are rendered, then this value will change over time and you won't truly scroll to the end.

Screen.Recording.2026-02-19.at.16.21.34.mp4

Source code

import React, { useCallback } from 'react';
import {
  Text,
  Button,
  View,
  StyleSheet,
  ListRenderItem,
  FlatList,
} from 'react-native';
import {
  useAnimatedRef,
  scrollTo,
  useSharedValue,
} from 'react-native-reanimated';
import { scheduleOnUI, getRuntimeKind } from 'react-native-worklets';

const DATA = Array.from({ length: 200 }, (_, i) => i + 1);

export default function EmptyExample() {
  const [animated, setAnimated] = React.useState(true);
  const aref = useAnimatedRef<FlatList<number>>();
  const contentHeight = useSharedValue(0);

  const handleContentSizeChange = (w: number, h: number) => {
    contentHeight.value = h;
  };

  const scrollFromJS = () => {
    console.log(getRuntimeKind());
    aref.current?.scrollToOffset({ offset: contentHeight.value, animated });
  };

  const scrollFromUI = () => {
    scheduleOnUI(() => {
      console.log(getRuntimeKind());
      scrollTo(aref, 0, contentHeight.value, animated);
    });
  };

  const scrollToTop = () => {
    aref.current?.scrollToOffset({ offset: 0, animated });
  };

  const renderItem = useCallback<ListRenderItem<number>>(
    ({ item }) => <Text style={styles.text}>{item}</Text>,
    []
  );

  return (
    <View style={{ flex: 1 }}>
      <View style={styles.buttons}>
        <Button onPress={scrollFromJS} title="Scroll from JS" />
        <Button onPress={scrollFromUI} title="Scroll from UI" />
        <Button onPress={scrollToTop} title="Scroll to Top" />
        <View
          style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }}>
          <Text style={styles.switchLabel}>Animated</Text>
          <Button
            title={animated ? 'On' : 'Off'}
            onPress={() => setAnimated((a) => !a)}
          />
        </View>
      </View>
      <FlatList
        ref={aref}
        data={DATA}
        renderItem={renderItem}
        style={styles.fill}
        onContentSizeChange={handleContentSizeChange}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  fill: {
    flex: 1,
    width: '100%',
  },
  text: {
    fontSize: 32,
    textAlign: 'center',
    padding: 16,
  },
  buttons: {
    marginTop: 20,
    marginBottom: 20,
    alignItems: 'center',
  },
  switchLabel: {
    fontSize: 18,
    marginRight: 8,
  },
});

Another approach is to calculate the expected content height manually if all your list items are of the same height (<number of items> * <item size + gap>).

If you use a ScrollView, where all items are rendered at once, you won't have this problem.