0

I am developing a simple app in react native. i just started using react native. i am using latest version 0.64. problem is that resizeMode of ImageBackground is not working when used in stylesheet. however when i use it as direct props of ImageBackground components it starts working.

Following is my code:

/*global require */
...
import {
  StyleSheet,
  ImageBackground,
  View,
  TouchableOpacity,
  Text,
  useWindowDimensions,
    } from "react-native"; 

...

export default function LaunchScreen({ navigation }) {
 ...

  const image = require("../../assets/test.png");
 
  ...
  return (
    <View onLayout={handleLayout} style={styles.container}>
      <ImageBackground source={image} style={styles.image}>
     ...
      </ImageBackground>
    </View>
  );
}

const styles = StyleSheet.create({
...
  image: {
    flex: 1,

     resizeMode: "contain",//--> This is not working.
    justifyContent: "center",
  },


 ...
});

LaunchScreen.propTypes = {
  navigation: PropTypes.object.isRequired,
};

if i add this prop of resizeMode to ImageBackground it starts working.as per docs https://reactnative.dev/docs/imagebackground it should work in stylesheet also. any idea why this is happening ?? and whats the solution

Basit Minhas
  • 267
  • 1
  • 6
  • 18

1 Answers1

1

Follow the below example for resizeMode,

<ImageBackground
              ...otherProps,
              resizeMode= 'contain'
            >
            {child}
        </ImageBackground>
nazmul
  • 367
  • 2
  • 14