CODEWITHSUNDEEP
javascriptreact-nativebackground-imagejsx
Anu
Anu

Reputation: 1742

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

Upvotes: 2

Views: 20787

Answers (4)

user11716837
user11716837

Reputation:

Use 

<ImageBackground

source={your image path}>

Upvotes: 0

Pritish Vaidya
Pritish Vaidya

Reputation: 22189

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

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>

Upvotes: 11

Krina Soni
Krina Soni

Reputation: 930

import React from 'react';
import { View, Image, StyleSheet } from 'react-native';
import { WINDOW } from '../assets/config.js';

class Splash extends React.Component{
    render(){
        return(
            <View style={styles.splashContainer}>
                <Image
                  style={styles.bgImage}
                  source={require('../assets/images/splash.jpg')}
                />
            </View>
        )       
    }
}

const styles = StyleSheet.create({
  splashContainer: {
    flex: 1
  },
  bgImage: {
    flex: 1,
    width: WINDOW.width,
    height: WINDOW.height,
  }
});

export default Splash;

try like this. This worked fine for me.

Upvotes: 0

Aseem Upadhyay
Aseem Upadhyay

Reputation: 4537

What you need is ImageBackgroundcomponent.

import {ImageBackground} from 'react-native';

 <ImageBackground
                source={require('./pathToYourImage.png')}
                style={yourCustomStyle}>
</ImageBackground>

That should do it.

Upvotes: 0

Related Questions