React Native- image wont fill screen? - css

Question

This is frustrating. I have an image the exact same dimensions as the screen (of this device) and moreover same dimensions as the splash image. I just want it to fill the whole screen, above the other Views, for a few seconds after the splash goes away in order to do a custom animation.
Looking at other SO questions, Ive tried this so far (outside the main container of other app elements):
<Animated.View style = {styles.splash}>
<Image style = {{resizeMode: 'cover'}} source={require('./assets/splash2-txt.png')}/>
</Animated.View>
splash: {
flex: 1,
position: 'absolute',
zIndex: 4
},
and yet the image is scaled up and way off to the corner.
What is wrong here / how can I just fill the screen with the image?

Answer 1

Please use react-native ImageBackground for filling image in background, refer the example code given below
import React from "react";
import { ImageBackground, StyleSheet, Text, View } from "react-native";
const image = { uri: "https://reactjs.org/logo-og.png" };
const App = () => (
<View style={styles.container}>
<ImageBackground source={image} style={styles.image}>
<Text style={styles.text}>Inside</Text>
</ImageBackground>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column"
},
image: {
flex: 1,
resizeMode: "cover",
justifyContent: "center"
},
text: {
color: "grey",
fontSize: 30,
fontWeight: "bold"
}
});
export default App;

Answer 2

Use StyleSheet.absoluteFillObject in your image style instead of flex.
It should be something like...
import * as React from 'react';
import { Image, View, StyleSheet, StatusBar } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<StatusBar barStyle="light-content" />
<Image style={styles.image} source={{uri: 'https://reactjs.org/logo-og.png'}} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
image: {
...StyleSheet.absoluteFillObject,
resizeMode: 'cover',
},
});