I have recently started developing a simple app in react native and I am facing an issue with the resizeMode property of ImageBackground. It seems that the resizeMode is not working when used within the stylesheet, however, it works fine when directly added as a prop to the ImageBackground component.
Below is my code snippet:
/*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,
};
When I add the resizeMode prop directly to the ImageBackground component, it starts working. According to the documentation at https://reactnative.dev/docs/imagebackground, it should work in the stylesheet as well. Any insights on why this behavior is occurring and what could be the solution?