CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-native-ios
Shahanshah Alam
Shahanshah Alam

Reputation: 605

resizing image in React Native

I want my screen to look like this but I am getting this after various try.

Here is my code:-

<ImageBackground 
      style={styles.imageBackground}
      source={constants.image.bg_splash}
    >

Style:-

 imageBackground: {
 // flex: 1,
  justifyContent: 'center',
   alignItems: 'center',
  //  width:'90%',
  //  //height:constants.DesignHeight-300,
  //  height:'100%',
  // marginVertical:40,
   resizeMode:'contain',
  // borderWidth:1,
  // borderColor:'black',
  position: 'absolute',
  top: 0,
  left: 0,
  bottom: 0,
  right: 0,
 },

Commented code are the parts which I have tried as various combination.

Thanks!!!

Upvotes: 0

Views: 82

Answers (2)

Imran
Imran

Reputation: 305

You don't need to position the ImageBackground as absolute. Give it a width and height of device and resizeMode: contain.

imageBackground: {
  width: Dimensions.get('window').width,
  height: Dimensions.get('window').height,
  resizeMode: 'contain',
}

Upvotes: 1

brmk
brmk

Reputation: 360

Probably, your background is the gray shape and you want to have this white vertical padding which is not a part of your gray shape image. To achieve this you can wrap your component in the following way:

// https://reactnative.dev/docs/safeareaview

<SafeAreaView>
  <View style={styles.container}>
    <ImageBackground 
      style={styles.imageBackground}
      source={constants.image.bg_splash}
  </View>
</SafeAreaView>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: relative,
    paddingVertical: 40,
  },
  imageBackground: {
    // https://reactnative.dev/docs/stylesheet#absolutefillobject
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Upvotes: 1

Related Questions