react-native-split-image-list's Introduction

react-native-split-image-list

Make your image lists more interactive or at least more visually appealing with this beautiful split image list.

Installation

Use yarn or npm to install react-native-split-image-list.

yarn add react-native-split-image-list

npm install react-native-split-image-list --save

Usage

import SplitImageList from 'react-native-split-image-list'

...
render () {
  return <SplitImageList data={images}>
}

react-native-split-image-list requires an image property of type String on each item eg

const images = [
  { image: 'url-to-image'},
  { image: 'url-to-image2'},
  { image: 'url-to-image3'}
]

Along with rendering images, you have the ability to render overlays for each items using the renderOverlay prop eg:

const images = [
  { image: 'url-to-image', title: 'one'},
  { image: 'url-to-image2', title: 'two'},
  { image: 'url-to-image3', title: 'three'}
]

 renderItems = (item) => {
    return <View >
      <Text>{item.title.toUpperCase()}</Text>
    </View>
  }

 render () {
  return <SplitImageList data={images} renderOverlay={this.renderItems}>
}

Api

Prop	Type	Required	Description
count	int	no	Number of splices to give image (Default 3)
imageWidth	int	no	Width of each item (Default window width)
imageHeight	int	no	Height of each item (Default window width)
data	Array	yes	Arrays of items to display, each item requires and image attr
renderOverlay	func	no	applies an overlay of your choice, returns (item, index)