title: How do I display an Image without 2 exports?
body: <p>Hello I tried to display an image on my welcome screen but I can't seem to be able to do it.
  I followed this doc : <a href="https://reactnative.dev/docs/image" rel="nofollow noreferrer">enter link description here</a></p>
  <p>I tried to only export <code>export default DisplayAnImage;</code> instead of the Default app export but I can't make 2 exports and I know.. But I don't know how it really works for the exports and maybe there is a better and simplier way to display an image (and still be able to make it fit and apply settings on it)</p>
  <p>What should I do ?</p>
  <pre><code>import {
    Button,
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    LogBox,
    Image,
  } from &quot;react-native&quot;;
  import { NavigationContainer } from &quot;@react-navigation/native&quot;;
  import { createStackNavigator } from &quot;@react-navigation/stack&quot;;
  import { ActivityIndicator } from &quot;react-native&quot;;
  
  function HomeScreen({ navigation }) {
    return (
      &lt;View style={styles.container}&gt;
        &lt;Text style={{ fontStyle: &quot;italic&quot;, fontSize: 30 }}&gt;
          Bienvenue !{&quot;\n&quot;}
        &lt;/Text&gt;
  
        &lt;TouchableOpacity
          style={styles.button}
          onPress={() =&gt; navigation.navigate(&quot;Mon écoute&quot;)}
        &gt;
          &lt;Text style={styles.acces}&gt;ENTRER&lt;/Text&gt;
        &lt;/TouchableOpacity&gt;
      &lt;/View&gt;
    );
  }
  
  const DisplayAnImage = () =&gt; {
    return (
      &lt;View style={styles.image}&gt;
        &lt;Image
          style={styles.tinyLogo}
          source={require(&quot;C:/Users/Noah Drui/Documents/course 2 js/my-project/pics/logo.jpg&quot;)}
        /&gt;
      &lt;/View&gt;
    );
  };
  
  function DetailsScreen() {
    return (
      &lt;View
        style={{
          flex: 1,
          alignItems: &quot;center&quot;,
          marginBottom: 540,
          justifyContent: &quot;center&quot;,
        }}
      &gt;
        &lt;Text&gt;Quelle est votre humeur aujourd'hui?&lt;/Text&gt;
      &lt;/View&gt;
    );
  }
  
  const Stack = createStackNavigator();
  
  function App() {
    return (
      &lt;NavigationContainer&gt;
        &lt;Stack.Navigator initialRouteName=&quot;Home&quot;&gt;
          &lt;Stack.Screen name=&quot;Accueil&quot; component={HomeScreen} /&gt;
          &lt;Stack.Screen name=&quot;Mon écoute&quot; component={DetailsScreen} /&gt;
        &lt;/Stack.Navigator&gt;
      &lt;/NavigationContainer&gt;
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      marginBottom: 80,
      alignItems: &quot;center&quot;,
      flex: 1,
      justifyContent: &quot;center&quot;,
    },
  
    acces: {
      position: &quot;relative&quot;,
      marginTop: 5,
  
      fontSize: 15,
    },
  
    button: {
      alignItems: &quot;center&quot;,
      backgroundColor: &quot;#2B92FF&quot;,
      borderRadius: 15,
      borderWidth: 0.3,
      borderColor: &quot;#000000&quot;,
      width: 300,
      height: 30,
    },
  
    tinyLogo: {
      width: 50,
      height: 50,
    },
  
    logo: {
      width: 66,
      height: 58,
    },
  
    image: {
      paddingTop: 50,
    },
  });
  
  export default App;
  
  </code></pre>