react-native-banner-lite

A paging banner component. Compatible with iOS and Android.

It made from ScrollView, but it doesn't depend on the property paging. So the banner can be used in all versions of React Native.

Roadmap

see: ROADMAP.md

Preview

Play in the React Native Playground

Getting Started

Installation

$ npm i react-native-banner-lite --save

Usage

Install react-native first

$ npm i react-native -g

Initialization of a react-native project

$ react-native init myproject

Import react-native-banner-lite in the index.ios.js or index.android.js

import BannerLite from 'react-native-banner-lite';

Add the BannerLite component to your code

<BannerLite
  items={[
    {
      title: "Hello",
      subtitle: "World",
      imageURL: "http://h.hiphotos.baidu.com/image/h%3D200/sign=3a225a4129a4462361caa262a8227246/30adcbef76094b36fbaf3bd6aacc7cd98d109dcf.jpg",
      onPress:(index)=>{console.log("tap"+index)}
    },
    {
      title: "How",
      subtitle: "R U",
      imageURL: "http://a4.att.hudong.com/35/64/01300000276819133197645554930.jpg",
      onPress:(index)=>{console.log("tap"+index)}
    },
    {
      title: "R U OK",
      subtitle: "😂😂😂",
      imageURL: "http://pic69.nipic.com/file/20150610/21067407_235515103000_2.jpg",
      onPress:(index)=>{console.log("tap"+index)}
    },
  ]}
/>

Run the project

$ react-native run-ios

$ react-native run-android

See the example code in the Example folder.

Parameters

Name	Type	Description
items	`array`	banner items array

The items is an array of objects. The object contains 4 props.

Name	Type	Description
title	`string`	title of the banner item
subtitle	`string`	subtitle of the banner item
imageURL	`string`	background image of the banner item
onPress	`func`	callback of the banner item tap event