react-native-dual

ScrollView, FlatList, SectionList and ListView with vertical dual background

Check the demo (live | source)

| 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 from ScrollView component to Animated.ScrollView