0

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?

HAK
  • 2,023
  • 19
  • 26
Shruthi
  • 293
  • 1
  • 3
  • 11

1 Answers1

0

<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>
Noitidart
  • 35,443
  • 37
  • 154
  • 323
  • Thanks. Can I still have the child view inside this multiple images view to may be have some static text? I want to have same text when the images are scrolling in the background. – Shruthi May 26 '18 at 20:03
  • I had to change the View to ScrollView and got it working! – Shruthi May 26 '18 at 20:41