Skip to content

A banner component with adsorption. Compatible with iOS and Android.

License

Notifications You must be signed in to change notification settings

talisk/react-native-banner-lite

Repository files navigation

npm Gemnasium npm

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

Questions

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

The project follow to the MIT license. Welcome contributions.

About

A banner component with adsorption. Compatible with iOS and Android.

Resources

License

Stars

Watchers

Forks

Packages

No packages published