react-native-dual
ScrollView, FlatList, SectionList and ListView with vertical dual background
live | source)
Check the demo (Before (problem) | After (with dual) |
---|---|
Usage
Instead of using normal React Native component favour the Dual one and share two
special props: bottom
and top
to set the colors you want to display.
<DualScrollView bottom='cadetblue' top='rebeccapurple' keyboardShouldPersistTaps='always' // Use standard RN API also> <Text>Mercury</Text> <Text>Venus</Text> <Text>Earth</Text></DualScrollView>
If you don't specify a bottom
color will fallback to the component style
(if you're already passing a style object there's no need for bottom
extra prop):
<DualScrollView top='rebeccapurple' keyboardShouldPersistTaps='always' // Use standard RN API also style= backgroundColor: 'lemonchiffon' > <Text>Mars</Text> <Text>Jupiter</Text> <Text>Saturn</Text></DualScrollView>
API
Exposed components are:
- DualFlatList
- DualListView (notice will be deprecated by React Native in the future)
- DualScrollView
- DualSectionList
And all of them intakes both top
and bottom
props:
top: string
bottom?: string
Also ScrollView
accepts:
animated: bool
- switch fromScrollView
component toAnimated.ScrollView