react-native-scroll-to-child

Scroll a ReactNative View ref into the visible portion of a ScrollView.

1pnpm install react-native-scroll-to-child

---

Why fork?

The original project ain't really maintained anymore and I needed horizontal scroll support. I might decide to rewrite some of the more dated parts in the future; but for now this works well enough.

Features:

• Declarative component API
• Imperative hook API
• Configurable at many levels
• Different alignment modes
• Insets
• Supports both vertical and horizontal ScrollViews.
• Typescript definitions
• Support for composition/refs/other ScrollView wrappers (Animated.ScrollView, react-native-keyboard-aware-scroll-view, glamorous-native...)

Minimal hooks example

1import { View, Text, ScrollView } from 'react-native';
2import {
3  wrapScrollView,
4  useScrollIntoView,
5} from 'react-native-scroll-to-child';
6
7const CustomScrollView = wrapScrollView(ScrollView);
8
9function MyScreen() {
10  return (
11    <CustomScrollView>
12      <MyScreenContent />
13    </CustomScrollView>
14  );
15}
16
17function MyScreenContent() {
18  const scrollIntoView = useScrollIntoView();
19  const viewRef = useRef();
20  return (
21    <>
22      <Button onPress={() => scrollIntoView(viewRef.current)}>
23        Scroll a view ref into view
24      </Button>
25      // in android if the scroll is not working then add renderToHardwareTextureAndroid this to view
26      <View style={{ height: 100000 }}>
27        <Text>Some long ScrollView content</Text>
28      </View>
29
30      <View ref={viewRef}>
31        <Text>Will be scrolled into view on button press</Text>
32      </View>
33    </>
34  );
35}

API

1import {
2  ScrollIntoView, // enhanced View container
3  wrapScrollView, // simple wrapper, no config
4  wrapScrollViewConfigured, // complex wrapper, takes a config
5  useScrollIntoView, // access hook for imperative usage
6} from 'react-native-scroll-to-child';
7
8// Available options with their default value
9const options = {
10  // auto: ensure element appears fully inside the view (if not already inside). It may align to top or bottom.
11  // start: align element to the top or to the left
12  // end: align element to the bottom or to the right
13  // center: align element at the center of the view
14  align: 'auto',
15
16  // Animate the scrollIntoView() operation
17  animated: true,
18
19  // By default, scrollIntoView() calls are throttled a bit because it does not make much sense
20  // to scrollIntoView() 2 elements at the same time (and sometimes even impossible)
21  immediate: false,
22
23  // Permit to add top/bottom insets so that element scrolled into view
24  // is not touching directly the borders of the scrollview (like a padding)
25  insets: {
26    top: 0,
27    bottom: 0,
28  },
29
30  // Advanced: use these options as escape hatches if the lib default functions do not satisfy your needs
31  computeScrollY: (scrollViewLayout, viewLayout, scrollY, insets, align) => {},
32  computeScrollX: (scrollViewLayout, viewLayout, scrollX, insets, align) => {},
33  measureElement: viewRef => {},
34};
35
36// Wrap the original ScrollView
37const CustomScrollView = wrapScrollView(ScrollView);
38
39// Use the wrapped CustomScrollView as a replacement of ScrollView
40function MyScreen() {
41  return (
42    <CustomScrollView
43      // Can provide default options (overrideable)
44      scrollIntoViewOptions={scrollIntoViewOptions}
45    >
46      <ScreenContent />
47    </CustomScrollView>
48  );
49}
50
51// Implement ScreenContent (inner of the ScrollView) with the useScrollIntoView and refs
52function ScreenContent() {
53  const scrollIntoView = useScrollIntoView();
54  const viewRef = useRef();
55
56  return (
57    <>
58      <Button
59        onPress={() => {
60          scrollIntoView(viewRef.current, options);
61        }}
62      >
63        Scroll a view ref into view
64      </Button>
65
66      <View style={{ height: 100000 }}>
67        <Text>Some long ScrollView content</Text>
68      </View>
69
70      <View ref={viewRef}>
71        <Text>Will be scrolled into view on button press</Text>
72      </View>
73    </>
74  );
75}

You can also configure the HOC:

1const CustomScrollView = wrapScrollViewConfigured({
2  // SIMPLE CONFIG:
3  // ScrollIntoView default/fallback options
4  options: scrollIntoViewOptions,
5
6  // ADVANCED CONFIG:
7  // Use this if you use a ScrollView wrapper that does not use React.forwardRef()
8  refPropName: 'ref',
9  // unwraps the ref that the wrapped ScrollView gives you (this lib need the bare metal ScrollView ref)
10  getScrollViewNode: ref => ref,
11  // fallback value for throttling, can be overriden by user with props
12  scrollEventThrottle: 16,
13})(ScrollView);

All these hoc configurations can also be provided to the CustomScrollView as props.

License

MIT

Some code is inspired from contribution of @sebasgarcep of an initial scrollIntoView support for react-native-keyboard-aware-scroll-view