React-native: How to set image in background of Layout(View)

Question

Right now i am setting background image with below code where creating one extra image view to set image over view and its working fine.

<View>
<Image 
  style={{
     height:67 ,
     width: width} 
  source={Images.header_bachkground}/>
</View>

Now my question is: Is there any way to set background image directly on view like :

<View 
  style={{
     height:67 ,
     width: width} 
  source={Images.header_bachkground}>
</View>

The above code is not working for me.

Answer 1

Using <Image /> as a parent component to nest children is deprecated and soon will throw an error (at the time of writing this). Use <ImageBackground /> instead. You can nest anything inside ImageBackground. All the props you can pass to <Image /> can be passed to this.

Refer this.

Answer 2

There are two approaches for this. One is to put everything in between the opening and closing <Image> tags. The other is using layout properties. Refer to this link: https://medium.com/reactnative/background-images-in-react-native-191f3ed95a45

The first way is to use <Image> as a container. Place your content between <Image> and </Image>. Be sure to set the content's backgroundColor: 'transparent'. I think Android gives it by default but iPhone doesn't. So, for consistency, we need to explicitly state it. React Native warns you for doing it this way. It will soon become an error. So, I recommend the latter way.

const remote = 'https://s15.postimg.org/tw2qkvmcb/400px.png';

export default class BackgroundImage extends Component {
  render() {
    const resizeMode = 'center';
    const text = 'This is some text inlaid in an <Image />';

    return (
      <Image
        style={{
          backgroundColor: '#ccc',
          flex: 1,
          resizeMode,
          position: 'absolute',
          width: '100%',
          height: '100%',
          justifyContent: 'center',
        }}
        source={{ uri: remote }}
      >
        <Text
          style={{
            backgroundColor: 'transparent',
            textAlign: 'center',
            fontSize: 30,
            padding: 40,
          }}
        >
          {text}
        </Text>
      </Image>
    );
  }
}

The second way is to use layout properties. Take a <View> in a container and set {position:'absolute', width: '100%', height: '100%'}. In this <View> insert the <Image> and set flex: 1. You may want to add resizeMode too. Now write a sibling <View> in the same container and set {flex: 1, backgroundColor: 'transparent'}. In this sibling <View> place your content. You may want to set opacity for either the <Image> or the sibling <View>.

Here's the example:

const remote = 'https://s15.postimg.org/tw2qkvmcb/400px.png';

export default class BackgroundImage extends Component {
  render() {
    const resizeMode = 'center';
    const text = 'I am some centered text';

    return (
      <View
        style={{
          flex: 1,
          backgroundColor: '#eee',
        }}
      >
        <View
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
          }}
        >
          <Image
            style={{
              flex: 1,
              resizeMode,
            }}
            source={{ uri: remote }}
          />
        </View>
        <View
          style={{
            flex: 1,
            backgroundColor: 'transparent',
            justifyContent: 'center',
          }}
        >
          <Text
            style={{
              textAlign: 'center',
              fontSize: 40,
            }}
          >
            {text}
          </Text>
        </View>
      </View>
    );
  }
}

Answer 3

Structure your code like below :

...
    <Image
    source={require('./images/index.jpeg')}
    style={styles.container}>
    <View>
    <Text>
      Welcome to React Native Maulik !
    </Text>
    <Text style={styles.instructions}>
      To get started, edit index.ios.js
    </Text>
    <Text>
      Press Cmd+R to reload,{'\n'}
      Cmd+D or shake for dev menu
    </Text>
    </View>
  </Image>
... 

and your style should be like below :

const styles = StyleSheet.create({
container: {
flex: 1,
width: undefined,
height: undefined,
backgroundColor:'transparent',
justifyContent: 'center',
alignItems: 'center',
  },
});