https://github.com/talisk/react-native-banner-lite

A banner component with adsorption. Compatible with iOS and Android.
https://github.com/talisk/react-native-banner-lite

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/talisk/react-native-banner-lite
• Owner: talisk
• License: other
• Created: 2016-11-18T10:00:55.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2016-11-21T03:09:50.000Z (about 8 years ago)
• Last Synced: 2024-10-31T19:24:52.208Z (2 months ago)
• Language: JavaScript
• Size: 3.43 MB
• Stars: 48
• Watchers: 3
• Forks: 9
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![npm](https://img.shields.io/npm/v/react-native-banner-lite.svg?style=flat)]()

[![Gemnasium](https://img.shields.io/gemnasium/mathiasbynens/he.svg)]()

[![npm](https://img.shields.io/npm/l/express.svg)]()

# 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](ROADMAP.md)

## Preview

![](/Preview/p01.gif)

**[Play in the React Native Playground](https://rnplay.org/apps/-Ks6Lg)**

## Getting Started

### Installation

```bash

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

```

### Usage

- Install `react-native` first

```bash

$ npm i react-native -g

```

- Initialization of a react-native project

```bash

$ react-native init myproject

```

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

```javascript

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

```

- Add the `BannerLite` component to your code

```javascript

{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

```bash

$ react-native run-ios

```

or

```bash

$ 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](mailto:[email protected])

## Questions

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

The project follow to the MIT license. Welcome contributions.