react-native-dual

1.4.0 • Public • Published

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

Package Sidebar

Install

npm i react-native-dual

Weekly Downloads

3

Version

1.4.0

License

MIT

Unpacked Size

10.3 kB

Total Files

9

Last publish

Collaborators

  • sospedra