react-native-dual

View, ScrollView, ListView and FlatList with dual background

Usage no npm install needed!

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

README

react-native-dual

Build Status Code Climate Code Climate David JavaScript Style Guide

ScrollView, FlatList, SectionList and ListView with vertical dual background

Check the demo (live | source)

Before (problem) After (with dual)
no-dual 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