react native dynamic image slider transition opacity - react-native

Question

I'm looking to implement in react native , slider with dynamic images with fading transition (play with opacity).
what I did is
changeBackgroundImageNew = ()=>{
const TIME_TRANSITION = 4500
let images_length = this.props.AppStore.barbershop_details.images.length
let index_image = 0;
setInterval(()=>{
if(this.state.index_image == images_length-1){
index_image = 0
}else{
index_image= index_image+1
}
this.setState({index_image})
},4000)
Animated.loop(
Animated.sequence([
Animated.delay(1500),
Animated.parallel([
Animated.timing(this.state.img_background_opacity, {
toValue: 0,
duration: TIME_TRANSITION
}),
Animated.timing(this.state.img_background_opacity2, {
toValue: 1,
duration: TIME_TRANSITION
})
]),
Animated.delay(1500),
Animated.parallel([
Animated.timing(this.state.img_background_opacity2, {
toValue: 0,
duration: TIME_TRANSITION
}),
Animated.timing(this.state.img_background_opacity, {
toValue: 1,
duration: TIME_TRANSITION
})
])
])
).start(() => {
});
}
the render code
{AppStore.barbershop_details && AppStore.barbershop_details.images.map((image,i)=>(
<AnimatedImageBackground
key={i}
resizeMode="cover"
resizeMethod="resize"
style={[
style.img_background,
{ opacity: i == this.state.index_image?this.state.img_background_opacity:this.state.img_background_opacity2 }
]}
source={{uri:image}}
/>
))}
I'm trying to change the images with automatically animated fading transition,
kind of this example, but I want it in react native
example for images transition

Answer 1

I have implemented react-native-snap-carousel
Code:
import React, { Component } from "react";
import Carousel, { ParallaxImage } from 'react-native-snap-carousel';
import { Dimensions, StyleSheet,View,Text } from 'react-native';
const { width: screenWidth } = Dimensions.get('window')
export default class App extends Component {
constructor() {
super();
this.state = {
entries: [
{
"ID": "001",
"Name": "001",
"thumbnail": "https://wallpapercave.com/wp/KaNO7Ya.jpg"
},
{
"ID": "002",
"Name": "002",
"thumbnail": "https://wallpapercave.com/wp/ZxV8qRo.jpg"
},
{
"ID": "003",
"Name": "003",
"thumbnail": "https://wallpapercave.com/wp/ytM5xOy.jpg"
}
,
{
"ID": "004",
"Name": "004",
"thumbnail": "https://wallpapercave.com/wp/STgHPst.jpg"
}
,
{
"ID": "005",
"Name": "005",
"thumbnail": "https://wallpapercave.com/wp/vg5q7pY.jpg"
}
,
{
"ID": "006",
"Name": "006",
"thumbnail": "https://wallpapercave.com/wp/b2HsGgL.jpg"
}
],
}
}
_renderItem ({item, index}, parallaxProps) {
return (
<View style={styles.item}>
<ParallaxImage
source={{ uri: item.thumbnail }}
containerStyle={styles.imageContainer}
style={styles.image}
parallaxFactor={0.4}
{...parallaxProps}
/>
<Text style={styles.title} numberOfLines={2}>
{ item.Name }
</Text>
</View>
);
}
render () {
return (
<View style={styles.container}>
<Carousel
sliderWidth={screenWidth}
sliderHeight={screenWidth}
itemWidth={screenWidth - 60}
data={this.state.entries}
renderItem={this._renderItem}
hasParallaxImages={true}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container:{
marginTop:50
},
item: {
width: screenWidth - 60,
height: screenWidth - 60,
},
imageContainer: {
flex: 1,
marginBottom: Platform.select({ ios: 0, android: 1 }), // Prevent a random Android rendering issue
backgroundColor: 'white',
borderRadius: 8,
},
image: {
...StyleSheet.absoluteFillObject,
resizeMode: 'cover',
},
})
Output:
https://gph.is/g/ZdoYdWw
You can play with this component and get your desired output rather than creating your own custom component. You can create your custom image container and also set fade duration, etc. For more details, go through with its documentation.
English is not my mother language; please excuse any errors on my part.

Answer 2

please try this code as per your example:
try with View tag style backgroundColor:'#5f9ea0',//change color and without Image set background for it.
imoprt { ScrollView, Dimensions} from 'react-native';
render(){
let screenWidth = Dimensions.get('window').width;
let screenHeight = Dimensions.get('window').height;
return(
<ScrollView
horizontal={true}
pagingEnabled= {true}
showHorizontalScrollIndicator={true}
>
<View style={{
flex:1,
marginTop:20,
width: screenWidth,
justifyContent: 'center',
alignItems: 'center'
}}>
<Image source={} style={{ flex: 1, resizeMode: 'cover', // or 'stretch'}} />
// add your UI code for create like
<Text> Screen 1</Text>
</View>
<View style={{
flex:1,
marginTop:20,
width: screenWidth,
justifyContent: 'center',
alignItems: 'center'
}}>
<Image source={} style={{ flex: 1, resizeMode: 'cover', // or 'stretch'}} />
// add your UI code for create like
<Text> Screen 2</Text>
</View>
<View style={{
flex:1,
marginTop:20,
width: screenWidth,
justifyContent: 'center',
alignItems: 'center'
}}>
<Image source={} style={{ flex: 1, resizeMode: 'cover', // or 'stretch'}} />
// add your UI code for create like
<Text> Screen 3</Text>
</View>
);
}
I hope it will help you. On fad Effect see the link: https://www.youtube.com/watch?v=K2B0vVIHV_A

Answer 3

try used this package react-native-image-slider-show hear example example for how to used it