react-native-defer-renderer

This library helps implement lazy rendering for react-native.

Usage no npm install needed!

<script type="module">
  import reactNativeDeferRenderer from 'https://cdn.skypack.dev/react-native-defer-renderer';
</script>

README

react-native-defer-renderer

This library helps implement lazy rendering for react-native.

install

npm install react-native-defer-renderer --save

usage

Let's take news article page for example - a long <Article /> component with <Comment /> component at the bottom. It's efficient only to render <Comment /> component if the user scroll close to the <Comment /> component

Before:

<ScrollView>
  <Article />
  <Comment />
</ScrollView>

After:

<ScrollProvider>
    <Article />
    <ScrollReceiver name="ScrollReceiver" threshold={100}>
        <Comment />
    </ScrollReceiver>
</ScrollProvider>

The library provides two components:

<ScrollProvider />

  • will return a react-native <ScrollView /> with all the props
  • main purpose is to provide scroll position to the child <ScrollReceiver /> component

<ScrollReceiver />

  • warp the component to be lazy rendered
  • will receive scroll position from ` as props
  • when props update, it will decide to render the wrapped component if close enough.

demo

please check the example folder