how to properly style image in react native - reactjs

Question

I've just started learning React Native.. this is what my current app looks like
this is my code so far:
import { StatusBar } from 'expo-status-bar';
import { SafeAreaView, StyleSheet, Text, Image, View, Button, TextInput } from 'react-native';
export default function App() {
return (
<SafeAreaView style={styles.container}>
<View style={styles.mainContainer}>
<View style={styles.logoContainer}>
<Image style={styles.logoImage} source={require("./assets/logo03t.png")} />
</View>
<Text style={styles.logoText}>App untuk Edy Kiatmadja ver 1.0</Text>
<TextInput style={styles.input} placeholder="Username" />
<TextInput style={styles.input} placeholder="Password" />
</View>
<StatusBar style="auto" />
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'dodgerblue',
alignItems: 'center',
justifyContent: 'center',
},
logoContainer: {
padding: 20,
},
logoImage: {
resizeMode: 'contain',
height: 200,
backgroundColor: "#fff",
},
logoText: {
marginTop: 8,
fontSize: 12,
fontStyle: 'italic',
},
mainContainer: {
flex: 1,
justifyContent: 'center', // horizontal axis
alignItems: 'center', // vertical axis
},
input: {
height: 40,
margin: 10,
borderWidth: 1,
padding: 10,
width: 200,
}
});
what do I have to do to make the Image not cut-off?

Answer 1

Set a maximum width of current screen width in logoContainer style. You can use react-native's Dimension API to find current device width & height.
To get the device width:
import { Dimensions } from 'react-native';
const windowWidth = Dimensions.get('window').width;
Then use this as width of the container.
...
logoContainer: {
padding: 20,
maxWidth: windowWidth,
},
...