# react-native-scroll-into-view [![NPM](https://img.shields.io/npm/dm/react-native-scroll-into-view.svg)](https://www.npmjs.com/package/react-native-scroll-into-view) [![NPM](https://img.shields.io/npm/v/react-native-scroll-into-view.svg?style=flat)](https://www.npmjs.com/package/react-native-scroll-into-view) [![Build Status](https://travis-ci.com/slorber/react-native-scroll-into-view.svg?branch=master)](https://travis-ci.com/slorber/react-native-scroll-into-view) [![Twitter Follow](https://img.shields.io/twitter/follow/sebastienlorber.svg?style=social)](https://twitter.com/sebastienlorber) Scroll a ReactNative View ref into the visible portion of a `ScrollView`. Similar to `DOMElement.scrollIntoView()` for web, with some extras. ``` yarn add react-native-scroll-into-view // or npm install react-native-scroll-into-view --save ``` There is **no native code**: this library is compatible with Expo managed workflow. [![expo](https://avatars2.githubusercontent.com/u/12504344?v=3&s=100 'Expo.io')](https://expo.io) --- # Sponsor **[ThisWeekInReact.com](https://thisweekinreact.com)**: the best newsletter to stay up-to-date with the React ecosystem: [![ThisWeekInReact.com banner](https://user-images.githubusercontent.com/749374/136185889-ebdb67cd-ec78-4655-b88b-79a6c134acd2.png)](https://thisweekinreact.com) --- # Why ? On long scrollable forms, can ensure errors become visible to the user on submit: ![Formik example](https://media.giphy.com/media/1j8PXENzl0jEdRDWnT/giphy.gif) Building some kind of "sections index": ![Sections example](https://media.giphy.com/media/PPTRZRXzHFfOWVpogv/giphy.gif) But really you are free to build whatever you want with it # Features: - Declarative component API - Imperative hook API - Configurable at many levels - Different alignment modes - Insets - Typescript definitions - Support for composition/refs/other ScrollView wrappers (`Animated.ScrollView`, `react-native-keyboard-aware-scroll-view`, `glamorous-native`...) Note we don't plan to support anything else than ScrollView. Virtualized lists generally offer methods to scroll to a given index. # Minimal hooks example ```js import { View, Text, ScrollView } from 'react-native'; import { wrapScrollView, useScrollIntoView, } from 'react-native-scroll-into-view'; const CustomScrollView = wrapScrollView(ScrollView); function MyScreen() { return ( ); } function MyScreenContent() { const scrollIntoView = useScrollIntoView(); const viewRef = useRef(); return ( <> // in android if the scroll is not working then add renderToHardwareTextureAndroid this to view Some long ScrollView content Will be scrolled into view on button press ); } ``` # API ```js import { ScrollIntoView, // enhanced View container wrapScrollView, // simple wrapper, no config wrapScrollViewConfigured, // complex wrapper, takes a config useScrollIntoView, // access hook for imperative usage } from 'react-native-scroll-into-view'; // Available options with their default value const options = { // auto: ensure element appears fully inside the view (if not already inside). It may align to top or bottom. // top: align element to top // bottom: align element to bottom // center: align element at the center of the view align: 'auto', // Animate the scrollIntoView() operation animated: true, // By default, scrollIntoView() calls are throttled a bit because it does not make much sense // to scrollIntoView() 2 elements at the same time (and sometimes even impossible) immediate: false, // Permit to add top/bottom insets so that element scrolled into view // is not touching directly the borders of the scrollview (like a padding) insets: { top: 0, bottom: 0, }, // Advanced: use these options as escape hatches if the lib default functions do not satisfy your needs computeScrollY: (scrollViewLayout, viewLayout, scrollY, insets, align) => {}, measureElement: viewRef => {}, }; // Wrap the original ScrollView const CustomScrollView = wrapScrollView(ScrollView); // Use the wrapped CustomScrollView as a replacement of ScrollView function MyScreen() { return ( ); } // Implement ScreenContent (inner of the ScrollView) with the useScrollIntoView and refs function ScreenContent() { const scrollIntoView = useScrollIntoView(); const viewRef = useRef(); return ( <> Some long ScrollView content Will be scrolled into view on button press ); } // Or implement ScreenContent (inner of the ScrollView) with class + declarative ScrollIntoView component class ScreenContent extends React.Component { render() { return ( <> This will scroll into view on mount This will scroll into view on mount and will be centered This will scroll into view on mount without any animation This will not throttle scrollIntoView calls, as by default it does not make much sense to scroll into view multiple elements at the same time... This will scroll into view whenever enabled becomes true This will scroll into view whenever scrollIntoViewKey changes This will scroll into on update (if it becomes enabled, or key changes) This will scroll into view on mount with custom option props (this.scrollIntoViewRef = ref)} > This will scroll into view when the button is pressed

react-native-scroll-into-view

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past