ImageBackground takes one image and I was able to add child View that has an image and some Text. However, what I would like to have is the background work like a carousal of images while the child View stays as is in react native. Is there a way to achieve this?
What I have right now :
<ImageBackground style= {styles.headerBackground} source={require('./img/headerBg.jpg')}>
<View style={styles.top}>
<Avatar
small
rounded
icon={{name: 'menu'}}
onPress={() => console.log("Works!")}
activeOpacity={0.7}
/>
</View>
<View style = {styles.header}>
<Avatar
large
source={require('./img/profBg.jpg')}
avatarStyle={{ borderWidth: 3, borderColor: 'white', borderStyle:'solid' }}
onPress={() => console.log("Works!")}
activeOpacity={0.7}
/>
<Text style={styles.name}>Name</Text>
<Text style={styles.message}> Personal message</Text>
</View>
</ImageBackground>
Instead of having one image in the background I would like to have carousal/sliding images. Can someone please help?
<ImageBackground>
is just a <View>
with <Image style={{position:'absolute'}} />
inside. Source to ImageBackground
- https://github.com/facebook/react-native/blob/c6b96c0df789717d53ec520ad28ba0ae00db6ec2/Libraries/Image/ImageBackground.js#L63
So what you can do is the same, just put multiple images and maybe a parent like this:
<View>
<View style={{ position:'absolute' }}>
<Image />
<Image />
<Image />
<Image />
</View>
</View>