Ad

How To Set Background Image Over View In React Native?

I'm trying to set a background image in react native.I want a background cover image. I've done like the below

<ScrollView>
    <View>
        <Image source={ require('../Images/5.jpg') } style = { styles.image } />
            {
                this.state.details.map(a =>
                    <View>
                        <Text style={ styles.textStyle } > { a.content = a.content.replace(regex, '') } < /Text>
                        < RadioForm style= {{ width: 350 - 30 }} outerColor = "#080103" innerColor = "#FF5733" itemShowKey = "label" itemRealKey = "item" dataSource = { transform(a.options) } onPress = {(item)=>this._onSelect(item)}/>
                    </View>)
            }
    </View>
</ScrollView>

const styles = StyleSheet.create({
    image: {
        flex: 1,
        resizeMode: 'cover',
        position: 'absolute',
        width: "100%",
        flexDirection: 'column'
    },
    textStyle: {
        fontSize: 16,
        color: '#000',
        padding: 5,
    },
});

But I'm getting something like this

this is i'm getting

Ad

Answer

You might need to add the ImageBackground outside of your ScrollView and make sure flex is being passed to the ImageBackgroundstyle'

For example

<View style={{flex: 1}}>
        <ImageBackground
          resizeMode={'stretch'} // or cover
          style={{flex: 1}} // must be passed from the parent, the number may vary depending upon your screen size
          source={require('/*Your Image Path*/')}
        >
          <ScrollView>
            {/*Render the children here*/}
          </ScrollView>
        </ImageBackground>
      </View>
Ad
source: stackoverflow.com
Ad