React native - Sliding background Images with some static content on top

Question

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?

Answer 1

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