1.0.6 • Published 3 years ago

react-native-flatlist-slider v1.0.6

Weekly downloads
344
License
MIT
Repository
github
Last release
3 years ago

React-Native-FlatList-Slider

Custom Image Slider Component in React Native

Screenshot

Install

npm i react-native-flatlist-slider

Import

 import {FlatListSlider} from 'react-native-flatlist-slider';

Usage

Screenshot

Images from URI

  const images = [
   {
    image:'https://images.unsplash.com/photo-1567226475328-9d6baaf565cf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60',
    desc: 'Silent Waters in the mountains in midst of Himilayas',
   },
  {
    image:'https://images.unsplash.com/photo-1455620611406-966ca6889d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1130&q=80',
    desc:
      'Red fort in India New Delhi is a magnificient masterpeiece of humans',
  },
  ]
  
  <FlatListSlider 
    data={images} 
  />

Images from Local

  const images = [
   {
    banner:'require('./images/banner1.png'),
    desc: 'Silent Waters in the mountains in midst of Himilayas',
   },
  {
    banner:'require('./images/banner2.png'),
    desc:
      'Red fort in India New Delhi is a magnificient masterpeiece of humans',
  },
  ]

<FlatListSlider data={images} imageKey={'banner'} local />

![Screenshot](https://raw.githubusercontent.com/KPS250/React-Native-FlatList-Slider/master/src/screenshots/image2.png)

<FlatListSlider data={images} width={275} timer={5000} component={} onPress={item => alert(JSON.stringify(item))} indicatorActiveWidth={40} contentContainerStyle={{paddingHorizontal: 16}} />

![Screenshot](https://raw.githubusercontent.com/KPS250/React-Native-FlatList-Slider/master/src/screenshots/image3.png)

<FlatListSlider data={images} height={240} timer={5000} onPress={item => alert(JSON.stringify(item))} contentContainerStyle={{paddingHorizontal: 16}} indicatorContainerStyle={{position:'absolute', bottom: 20}} indicatorActiveColor={'#8e44ad'} indicatorInActiveColor={'#ffffff'} indicatorActiveWidth={30} animation />

### Props for Customization

| Prop                    | Type         | Default      | Description                                        |
| :---------------------: | :----------: | :----------: | :------------------------------------------------: |
| data                    | Array        | []           | Array of objects with images                       |
| imageKey                | String       | ‘image'      | Key for image in object                            |
| local                   | Boolean      | false        | Image to be loaded from URI or local               |
| width                   | Number       | screenWidth  | Width of Item in list                              |
| height                  | Number       | 230          | Height of Item in list                              |
| loop                    | Boolean      | true         | Enable infinite scroll for list                    |
| separatorWidth          | Number       | 0            | Width of separator between list items              |
| autoscroll              | Boolean      | true         | Enable autoScroll for list                         |
| timer                   | Number       | 3000         | Timer for scroll in milliseconds                   |
| onPress                 | Function     |              | Function to call on Item press                     |
| contentContainerStyle   | Object       |              | Styling slider container                           |
| component               | Component    |              | Stateful/Stateless custom component for list item  |
| currentIndexCallback    | Function     |              | Callback for image change with index               |
| indicator               | Boolean      | true         | Flag to render indicator                           |
| indicatorStyle          | Object       |              | Indicator Style                                    |
| indicatorContainerStyle | Object       |              | Indicator Container Style                          |
| indicatorActiveColor    | String       | '#3498db'    | Active indicator color                             |
| indicatorInActiveColor  | String       | '#bdc3c7'    | Inactive indicator color                           |
| indicatorActiveWidth    | Number       | 6            | Active Indicator Width                             |
| removeClippedSubviews   | Boolean      | true         | Flatlist prop for performance                      |
| animation               | Boolean      | true         | Animate indicator change                           |\

### Props passed to Custom Component

| Prop       | Type         | Description                          |
| :--------: | :----------: |  :---------------------------------: |
| style      | Object       | Container Style for Component        |
| item       | Object       | Object from Array                    |
| imageKey   | String       | Key for image in object              |
| onPress    | Function     | Function to call on Item press       | 
| index      | Number       | Index of item                        |
| active     | Boolean      | Flag if item is currently visible    |
| local      | Boolean      | Image to be loaded from URI or local |

### Sample Custom Component

import React from 'react'; import { View, Text, TouchableOpacity, Image, StyleSheet, Platform, } from 'react-native';

export default (Preview = ({ style, item, imageKey, onPress, index, active, local, }) => { return ( <TouchableOpacity style={styles.videoContainer} onPress={() => onPress(item)}> <View style={styles.imageContainer, styles.shadow}> <Image style={styles.videoPreview, active ? {} : {height: 120}} source={{uri: itemimageKey}} /> {item.desc} ); });

const styles = StyleSheet.create({ videoContainer: { width: 275, paddingVertical: 28, justifyContent: 'center', alignItems: 'center', marginRight: 20, }, videoPreview: { width: 275, height: 155, borderRadius: 8, resizeMode: 'cover', }, desc: { fontSize: 14, letterSpacing: 0, lineHeight: 24, marginTop: 18, }, imageContainer: { justifyContent: 'center', alignItems: 'center', }, shadow: { ...Platform.select({ ios: { shadowColor: 'black', shadowOffset: {width: 0, height: 1}, shadowOpacity: 0.1, shadowRadius: 5, }, android: { elevation: 5, }, }), }, });