react-native-lazy-scrollview

Lazy ScrollView for React Native.

---

Motivation

To provide an easy way to trigger logic when a child (or nested child) of a ScrollView passes a threshold scroll value. This is useful when you have a screen with dynamic content that you don't want to unmount when it scrolls offscreen, but also would like to lazy load. Also provides ability to trigger additional logic when a percentage of your component is visible in the ScrollView.

⚠️ Limitations

Currently only supports vertical ScrollView.

Installation

yarn add react-native-lazy-scrollview

This library requires reanimated. Follow their installation instructions.

Usage

// MyCoolHomeScreen.tsx
import { LazyScrollView } from 'react-native-lazy-scrollview';
import { CoolComponentA, CoolComponentB, CoolComponentC } from './components';

export function MyCoolHomeScreen() {
  return (
    // Trigger onThresholdReached when child is 100 pixels above the bottom
    <LazyScrollView offset={-100} showsVerticalScrollIndicator={false}>
      <CoolComponentA />
      <CoolComponentB />
      <CoolComponentC />
    </LazyScrollView>
  );
}

// CoolComponentC.tsx
import { View } from 'react-native';
import { LazyChild } from 'react-native-lazy-scrollview';
import { ContentView, SkeletonLoader } from './components';

export function CoolComponentC() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  const onThresholdPass = async () => {
    try {
      const fetchedData = await someExpensiveApiCall();
      setData(fetchedData);
      setLoading(false);
    } catch (e) {
      setLoading(false);
    }
  };

  // Fired when LazyChild has 75% visibility
  const onPercentVisibleThresholdPass = async () => {
    analyticsCall();
  };

  if (!data) {
    // Trigger has fired and no data :(
    return null;
  }

  return (
    <LazyChild
      onThresholdPass={onThresholdPass}
      onPercentVisibleThresholdPass={onPercentVisibleThresholdPass}
      percentVisibleThreshold={0.75}
    >
      {loading ? <SkeletonLoader /> : <ContentView data={data} />}
    </LazyChild>
  );
}

API

LazyScrollView

Prop	Type	Optional	Default	Description
offset	number	Yes	0 (bottom of LazyScrollView)	How far above or below the bottom of the LazyScrollView the threshold trigger is. Negative is above, positive it below.

LazyChild

Prop	Type	Optional	Default	Description
onThresholdPass	function	No	-	Callback that will fire when top of View passes threshold trigger.
percentVisibleThreshold	number (Unit Interval)	Yes	1	Percentage of LazyChild that will trigger onPercentVisibleThresholdPass.
onPercentVisibleThresholdPass	function	Yes	-	Callback that will fire when percentVisibleThreshold is visible above bottom of LazyScrollView. Note that this trigger is tied to the bottom of the LazyScrollView, not the threshold.
ignoreZeroMeasurement	boolean	Yes	true	Protects against firing callback on measurement with zero value. Good to set to false if you know the LazyChild is the first item in the LazyScrollview.

Example

To run the example app, clone the repo

cd example
yarn install

yarn ios
# or
yarn android

License

MIT

---

Made with create-react-native-library