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

or

$ 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

Contribution

• @talisk

Questions

Welcome to send Email to me, or open issue on the repository.

The project follow to the MIT license. Welcome contributions.