Skip to content

chunghe/react-native-defer-renderer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 provided
  • main purpose is to provide scroll position from <ScrollView /> to the child <ScrollReceiver /> component

<ScrollReceiver />

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

example

please check the example folder

$ cd example

$ npm install

$ react-native run-ios or react-native run-android

demo

ios

android

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published