how to properly style image in react native

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,
  },
...