React-Native-FlatList-Slider

Custom Image Slider Component in React Native

Install

npm i react-native-flatlist-slider

Import

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

Usage

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
  />

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

 <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: item[imageKey]}}
        />
      </View>
      <Text style={styles.desc}>{item.desc}</Text>
    </TouchableOpacity>
  );
});

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,
      },
    }),
  },
});