redux-first-router-scroll-container-native
A straightforward scroll restoration component for React Native using Redux First Router
Installation
yarn add redux-first-router-scroll-container-native
Usage
scene === 'SCENE1' ? <ScrollContainer component=FlatList// FlatList, ScrollView, SectionList, ListView, etc scrollKey='scene-1' // used to differentiate between multiple scrollViews forceRestore=0 // increment to force restoration after asynchrony > <TouchableOpacity onPress= /> </ScrollContainer> : <ScrollContainer component=ScrollView // ScrollView is default by the way, no need to pass it scrollKey='scene-2' > <TouchableOpacity onPress=back /> </ScrollContainer> const mapState = scene: locationtype mapStateMyComponent
Pros
- no HOCs are needed
- both y and x values can be restored
- no additional
<Provider />
components are needed (it's redux-powered) - scroll position recorded in both
onMomentumScrollEnd
andonScrollEndDrag
- even if you don't use the
back
/next
methods fromredux-first-router
, and you navigate to a route you were just at, it will be determined you are revisiting a page worth of a nifty scroll restoration. Hurray! - increment
forceRestore
or callref.restoreScroll()
after asynchronous events update the page with more data and a longer/wider page. Won't be needed if you are using things likeredux-persist
--that way when you return to the page you already have the data you needed and it renders in its full dimensions on mount :) - will handle the case where you render a
ScrollContainer
in the exact same place within the component tree and React re-uses it and doesn't remount it. In that case, instead ofcomponentDidMount
handling scroll restoration,componentDidUpdate
handles scroll restoration. Long live React! If you want to force mounting a new component, simply give it a uniquekey
prop.
Contributing
We use commitizen, so run npm run commit
to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags and changelogs will automatically be generated based on these commits thanks to semantic-release. Be good.