diff --git a/docs/functions/LazyChild.LazyChild.html b/docs/functions/LazyChild.LazyChild.html index 5da0a72..deff4f1 100644 --- a/docs/functions/LazyChild.LazyChild.html +++ b/docs/functions/LazyChild.LazyChild.html @@ -1 +1 @@ -LazyChild | react-native-lazy-scrollview

Function LazyChild

Settings

Member Visibility
+LazyChild | react-native-lazy-scrollview

Function LazyChild

Settings

Member Visibility
diff --git a/docs/functions/LazyScrollView.LazyScrollView.html b/docs/functions/LazyScrollView.LazyScrollView.html index 5e6f7d4..b35fd3f 100644 --- a/docs/functions/LazyScrollView.LazyScrollView.html +++ b/docs/functions/LazyScrollView.LazyScrollView.html @@ -1,2 +1,2 @@ LazyScrollView | react-native-lazy-scrollview

Function LazyScrollView

  • LazyScrollView(__namedParameters): Element

  • ScrollView to wrap Lazy Children in.

    -

    Parameters

    • __namedParameters: Props

    Returns Element

Settings

Member Visibility
+

Parameters

Returns Element

Settings

Member Visibility
diff --git a/docs/index.html b/docs/index.html index b6529f9..ea84bcb 100644 --- a/docs/index.html +++ b/docs/index.html @@ -8,86 +8,16 @@

react-native-lazy-scrollview

CI

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.

-

Example: Say you have some components lower in your scoll that make expensive api calls. Give them a skeleton loader, make your threshold 300, and trigger your api call when the component is within 300 px of the bottom of the ScrollView by passing yourApiCall to the LazyChild that wraps your component. And then say you're like "yeah but I also want to know when 75% of this api-heavy component is viewable". Then set the percentVisibleThreshold on the LazyChild wrapping that sucker to 0.75, then trigger and analytic call with onVisibilityEnter! This will fire every time the component leaves or enters. It has onVisibilityExit

-demo +

Example: Say you have some components lower in your scoll that make expensive api calls. Give them a skeleton loader, make your threshold 300, and trigger your api call when the component is within 300 px of the bottom of the ScrollView by passing yourApiCall to the onEnterThresholdPass prop on the LazyChild that wraps your component. And then say you're like "yeah but I also want to know when 75% of this api-heavy component is viewable". Then set the percentVisibleThreshold on the LazyChild wrapping that sucker to 0.75, then trigger and analytic call with onVisibilityEnter! This will fire every time the component leaves or enters. It has onVisibilityExit, which you can use if you're feeling super froggy and want to pause a video when it goes under a certain percentage of viewable area, and if then you can use onExitThresholdPass to unmount the video and replace it with a spacer.

⚠️ 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 300 pixels below the bottom
    <LazyScrollView offset={300} showsVerticalScrollIndicator={false}>
      <CoolComponentA />
      <VideoPlayer />
      <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 onVisibilityEnter = async () => {
    analyticsCall();
    setPaused(false);
  };

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

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

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

const videoURl = 'https://youtu.be/wfJnni0oBPE?si=kRdIUcq4l5dfGfqV';

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

  const onThresholdPass = async () => {
    setLoading(false);
  };

  // Fired when LazyChild has 25% visibility
  const onVisibilityEnter = async () => {
    analyticsCall();
    setPaused(false);
  };

  // Fired when LazyChild is less that 25% visible after being visible
  const onVisibilityExit = async () => {
    setPaused(true);
  };

  return (
    <LazyChild
      onThresholdPass={onThresholdPass}
      onVisibilityEnter={onVisibilityEnter}
      percentVisibleThreshold={0.25}
    >
      {loading ? (
        <SkeletonLoader />
      ) : (
        <VideoPlayer paused={paused} videoUrl={videoUrl} />
      )}
    </LazyChild>
  );
}
+
API Documentation

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

export function MyCoolHomeScreen() {
  return (
    // Trigger onThresholdReached when child is 300 pixels below the bottom
    <LazyScrollView offset={300} showsVerticalScrollIndicator={false}>
      <CoolComponentA />
      <VideoPlayer />
      <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 onEnterThresholdPass = async () => {
    try {
      const fetchedData = await someExpensiveApiCall();
      setData(fetchedData);
      setLoading(false);
    } catch (e) {
      setLoading(false);
    }
  };

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

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

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

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

const videoURl = 'https://youtu.be/wfJnni0oBPE?si=kRdIUcq4l5dfGfqV';

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

  const onEnterThresholdPass = async () => {
    setLoading(false);
  };

  // Fired when LazyChild has 25% visibility
  const onVisibilityEnter = async () => {
    analyticsCall();
    setPaused(false);
  };

  // Fired when LazyChild is less that 25% visible after being visible
  const onVisibilityExit = async () => {
    setPaused(true);
  };

  return (
    <LazyChild
      onEnterThresholdPass={onEnterThresholdPass}
      onVisibilityEnter={onVisibilityEnter}
      percentVisibleThreshold={0.25}
    >
      {loading ? (
        <SkeletonLoader />
      ) : (
        <VideoPlayer paused={paused} videoUrl={videoUrl} />
      )}
    </LazyChild>
  );
}
 

 
-
API
LazyScrollView

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
PropTypeOptionalDefaultDescription
offsetnumberYes0 (bottom of LazyScrollView)How far above or below the bottom of the LazyScrollView the threshold trigger is. Negative is above, positive it below.

-
LazyChild

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
PropTypeOptionalDefaultDescription
onThresholdPassfunctionNo-Callback that will fire when top of View passes threshold trigger.
percentVisibleThresholdnumber (Unit Interval)Yes1Percentage of LazyChild that will trigger onPercentVisibleThresholdPass.
onVisibilityEnterfunctionYes-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. Will refire if LazyChild leaves screen and comes back.
onVisibilityExitfunctionYes-Callback that will fire after LazyChild has become visible using percentVisibleThreshold and then goes back under that threshold. Will refire each time LazyChild enters screen and leaves.
ignoreZeroMeasurementbooleanYestrueProtects 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
 

@@ -95,4 +25,4 @@ 
react-native-lazy-scrollview

 
License
MIT

 

 
Made with create-react-native-library

-
Settings
Member Visibility
On This Page
MotivationInstallationUsageAPIExampleLicense

+
Settings
Member Visibility
On This Page
MotivationInstallationUsage ExamplesExampleLicense

diff --git a/docs/interfaces/LazyChild.LazyChildProps.html b/docs/interfaces/LazyChild.LazyChildProps.html
index a983eae..ed6091a 100644
--- a/docs/interfaces/LazyChild.LazyChildProps.html
+++ b/docs/interfaces/LazyChild.LazyChildProps.html
@@ -1,15 +1,21 @@
 LazyChildProps | react-native-lazy-scrollview
Interface LazyChildProps
LazyChildProps

-
interface LazyChildProps { 
    children: ReactNode; 
    ignoreZeroMeasurement?: boolean; 
    onEnterThresholdPass?: (() => void); 
    onExitThresholdPass?: (() => void); 
    onVisibilityEnter?: (() => void); 
    onVisibilityExit?: (() => void); 
    percentVisibleThreshold?: number; 
}
Properties
children
+
interface LazyChildProps { 
    children: ReactNode; 
    ignoreZeroMeasurement?: boolean; 
    onEnterThresholdPass?: (() => void); 
    onExitThresholdPass?: (() => void); 
    onVisibilityEnter?: (() => void); 
    onVisibilityExit?: (() => void); 
    percentVisibleThreshold?: number; 
}
Properties
children
 ignoreZeroMeasurement?
 onEnterThresholdPass?
 onExitThresholdPass?
 onVisibilityEnter?
 onVisibilityExit?
 percentVisibleThreshold?
-
 Properties
children
children: ReactNode
OptionalignoreZeroMeasurement
ignoreZeroMeasurement?: boolean
Protects against firing callback on measurement with zero value.  Default is true.  Good to set to false if you know the LazyChild is the first item in the LazyScrollview.

-
OptionalonEnterThresholdPass
onEnterThresholdPass?: (() => void)
Callback to fire when the LazyChild passes the LazyScrollView's offset after being offscreen

-
OptionalonExitThresholdPass
onExitThresholdPass?: (() => void)
Callback to fire when the LazyChild passes the LazyScrollView's offset after being onscreen

-
OptionalonVisibilityEnter
onVisibilityEnter?: (() => void)
Callback to fire when the LazyChild's viewable area exceeds the percentVisibleThreshold.

-
OptionalonVisibilityExit
onVisibilityExit?: (() => void)
Callback to fire when the LazyChild's viewable area goes under the percentVisibleThreshold after being above it.

-
OptionalpercentVisibleThreshold
percentVisibleThreshold?: number
How much of the LazyChild should be visible before the percent visible threshold is passed.  For example, 0.5 would fire onPercentVisibleThresholdPass when 50% of the LazyChild is visible.  This has no effect if onPercentVisibleThresholdPass is not provided.  Defaults to 1.0.

-
Settings
Member Visibility
On This Page
Properties

+
 Properties
children
children: ReactNode
OptionalignoreZeroMeasurement
ignoreZeroMeasurement?: boolean
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.

+
Default Value
true
+

+
+
OptionalonEnterThresholdPass
onEnterThresholdPass?: (() => void)
Callback to fire when the LazyChild passes the LazyScrollView's offset after being offscreen

+
OptionalonExitThresholdPass
onExitThresholdPass?: (() => void)
Callback to fire when the LazyChild passes the LazyScrollView's offset after being onscreen

+
OptionalonVisibilityEnter
onVisibilityEnter?: (() => void)
Callback to fire when the LazyChild's viewable area exceeds the percentVisibleThreshold.

+
OptionalonVisibilityExit
onVisibilityExit?: (() => void)
Callback to fire when the LazyChild's viewable area goes under the percentVisibleThreshold after being above it.

+
OptionalpercentVisibleThreshold
percentVisibleThreshold?: number
How much of the LazyChild should be visible before the percent visible threshold is passed.  For example, 0.5 would fire onPercentVisibleThresholdPass when 50% of the LazyChild is visible.  This has no effect if onPercentVisibleThresholdPass is not provided.

+
Default Value
1.0
+

+
+
Settings
Member Visibility
On This Page
Properties

diff --git a/docs/interfaces/LazyScrollView.LazyScrollViewProps.html b/docs/interfaces/LazyScrollView.LazyScrollViewProps.html
index 4a00368..2e5ea03 100644
--- a/docs/interfaces/LazyScrollView.LazyScrollViewProps.html
+++ b/docs/interfaces/LazyScrollView.LazyScrollViewProps.html
@@ -1,6 +1,6 @@
-LazyScrollViewProps | react-native-lazy-scrollview
Interface LazyScrollViewProps
interface LazyScrollViewProps { 
    offset?: number; 
}
Properties
offset?
-
 Properties
Optionaloffset
offset?: number
How far above or below the bottom of the ScrollView the threshold trigger is. Negative is above, postive it below. Defaults to 0 (bottom of ScrollView).  Accepts ScrollView props.

-
Default Value
0 (bottom of ScrollView).
+LazyScrollViewProps | react-native-lazy-scrollview
Interface LazyScrollViewProps
interface LazyScrollViewProps { 
    offset?: number; 
}
Properties
offset?
+
 Properties
Optionaloffset
offset?: number
How far above or below the bottom of the ScrollView the threshold trigger is. Negative is above, postive it below. Accepts ScrollView props.

+
Default Value
0 (bottom of ScrollView)
 

 
-
Settings
Member Visibility
On This Page
Properties

+
Settings
Member Visibility
On This Page
Properties

diff --git a/docs/media/demo.gif b/docs/media/demo.gif
deleted file mode 100644
index 2676501..0000000
Binary files a/docs/media/demo.gif and /dev/null differ
diff --git a/docs/modules/LazyChild.html b/docs/modules/LazyChild.html
index 33d29ab..27c20b2 100644
--- a/docs/modules/LazyChild.html
+++ b/docs/modules/LazyChild.html
@@ -1,3 +1,3 @@
-LazyChild | react-native-lazy-scrollview
Module LazyChild
Index
Interfaces
LazyChildProps
+LazyChild | react-native-lazy-scrollview
Module LazyChild
Index
Interfaces
LazyChildProps
 
Functions
LazyChild
 
Settings
Member Visibility

diff --git a/docs/modules/LazyScrollView.html b/docs/modules/LazyScrollView.html
index d9c3967..200a8cd 100644
--- a/docs/modules/LazyScrollView.html
+++ b/docs/modules/LazyScrollView.html
@@ -1,3 +1,3 @@
-LazyScrollView | react-native-lazy-scrollview
Module LazyScrollView
Index
Interfaces
LazyScrollViewProps
+LazyScrollView | react-native-lazy-scrollview
Module LazyScrollView
Index
Interfaces
LazyScrollViewProps
 
Functions
LazyScrollView
 
Settings
Member Visibility