https://github.com/sospedra/react-native-dual

ScrollView, FlatList, SectionList and ListView with dual background
https://github.com/sospedra/react-native-dual

background color flatlist listview react react-native scrollview

Last synced: about 5 hours ago
JSON representation

ScrollView, FlatList, SectionList and ListView with dual background

• Host: GitHub
• URL: https://github.com/sospedra/react-native-dual
• Owner: sospedra
• License: mit
• Created: 2017-11-15T17:45:42.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-03-29T14:18:35.000Z (over 8 years ago)
• Last Synced: 2026-07-13T02:53:36.922Z (about 5 hours ago)
• Topics: background, color, flatlist, listview, react, react-native, scrollview
• Language: JavaScript
• Homepage: https://github.com/sospedra/react-native-dual
• Size: 195 KB
• Stars: 27
• Watchers: 1
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-native-dual

[![Build Status](https://travis-ci.org/sospedra/react-native-dual.svg?branch=master)](https://travis-ci.org/sospedra/react-native-dual)

[![Code Climate](https://img.shields.io/codeclimate/maintainability/sospedra/react-native-dual.svg)]()

[![Code Climate](https://img.shields.io/codeclimate/c/sospedra/react-native-dual.svg)]()

[![David](https://img.shields.io/david/sospedra/react-native-dual.svg)]()

[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

ScrollView, FlatList, SectionList and ListView with vertical dual background

### Check the demo ([live](https://expo.io/@sospedra/react-native-dual-demo) | [source](https://github.com/sospedra/react-native-dual-demo))

| Before (problem) | After (with dual)   |

|------------------|-------------------|

| ![no-dual](https://user-images.githubusercontent.com/3116899/33805424-f3b0875e-ddb8-11e7-8353-352c6bceee75.gif) | ![with-dual](https://user-images.githubusercontent.com/3116899/33805413-c0db71e0-ddb8-11e7-89d0-d1aebbaf7b3b.gif) |

### 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**.

```js

  Mercury

  Venus

  Earth

```

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)*:

```js

  Mars

  Jupiter

  Saturn

```

### 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`