Custom Image Slider Component in React Native
npm i react-native-flatlist-slider
import {FlatListSlider} from 'react-native-flatlist-slider';
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 />}
=> alert(JSON.stringify(item))}
indicatorActiveWidth={40}
contentContainerStyle={{paddingHorizontal: 16}}
/>
<FlatListSlider
data={images}
height={240}
timer={5000}
=> alert(JSON.stringify(item))}
contentContainerStyle={{paddingHorizontal: 16}}
indicatorContainerStyle={{position:'absolute', bottom: 20}}
indicatorActiveColor={'#8e44ad'}
indicatorInActiveColor={'#ffffff'}
indicatorActiveWidth={30}
animation
/>
| 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 |
| animation | Boolean | true | Animate indicator change |
| 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 |
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(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,
},
}),
},
});