react-native-flatlist-slider

1.0.6 • Public • Published

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

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

Screenshot

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

Package Sidebar

Install

npm i react-native-flatlist-slider

Weekly Downloads

266

Version

1.0.6

License

MIT

Unpacked Size

16.1 kB

Total Files

6

Last publish

Collaborators

  • kps250