CODEWITHSUNDEEP
react-native
David Johns
David Johns

Reputation: 1714

How to create a full screen ImageBackground in react native?

I have a react native app with a single Signin component. I just need to add a full screen ImageBackground component. The problem is, the image only get the hight and width as pixels. It doesn't response for 100%. I tried with width : 'auto' and width : null but those are also not working. How can I get the image in full screen size?

Signin.js

const styles = StyleSheet.create({
  bgStyles: {
    alignContent: 'center',
    alignItems: 'center',
    height: '100%',
    width: '100%',
    flex: 1
  },
});

const Signin = () => {
  return (
      <ImageBackground
        style={styles.bgStyles}
        source={require('../../../public/static/images/w.jpg')}
        resizeMode='contain'
      >
        <Text>TEXT</Text>
        <Text>TEXT</Text>
        <Text>TEXT</Text>
      </ImageBackground>
  );
};

Result before adding resizeMode = 'contain':

enter image description here

Result after adding resizeMode = 'contain':

enter image description here

Upvotes: 0

Views: 581

Answers (3)

Kishan Bharda
Kishan Bharda

Reputation: 5690

You can use directly ImageBackground as a parent component. No need to add View before the ImageBackground:

<ImageBackground
  style={[{flex: 1}, styles.bgStyles]} // flex: 1 make it full screen and additionally you can add your another style
  source={require('../../../public/static/images/w.jpg')}
>
  <View style={{flex: 1}}>
      <Text>TEXT</Text>
      <Text>TEXT</Text>
      <Text>TEXT</Text>
  </View>
</ImageBackground>

Upvotes: 1

Vijay Kahar
Vijay Kahar

Reputation: 1076

    alignContent: 'center',
    alignItems: 'center',
    height: '100%',
    width: '100%',
  },

Please try this style

Upvotes: 0

Gaurav Roy
Gaurav Roy

Reputation: 12210

Just add flex:1 in your view :

<View style={{flex:1}}>
      <ImageBackground
        style={styles.bgStyles}
        source={require('../../../public/static/images/w.jpg')}
      >
        <Text>TEXT</Text>
        <Text>TEXT</Text>
        <Text>TEXT</Text>
      </ImageBackground>
    </View>

Hope it helps. feel free for doubts

Upvotes: 1

Related Questions