React-Native-FlatList-Slider

Custom Image Slider Component in React Native

!Screenshot

$3

``
npm i react-native-flatlist-slider
`

$3

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

$3

!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',
},
]

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',
},
]

data={images}
imageKey={'banner'}
local
/>
`

!Screenshot

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

!Screenshot

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


$3

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

$3

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

$3

`
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 (
style={[styles.videoContainer]}
onPress={() => onPress(item)}>

style={[styles.videoPreview, active ? {} : {height: 120}]}
source={{uri: item[imageKey]}}
/>

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