Why can't I render component inside of App.js?

Question

I am creating a React Native app and cannot render the HomeScreen.js component inside of App.js. I really don't want to put all my code inside of App.js. Can someone please suggest another way of rendering or point out what i'm not doing correctly in my code?

App.js

import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { SafeAreaView, Text, StyleSheet } from 'react-native';
import HomeScreen from './Components/HomeScreen';

export default function App() {

    return (
        <SafeAreaView style={styles.container}>
            <Text>Hello World</Text>
            <HomeScreen />
        <StatusBar
            style="auto"
            translucent={ false }
        />
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignItems: 'center'
    }
})

HomeScreen.js

import React from 'react';
import { 
     SafeAreaView, 
     ScrollView, 
     Text, 
     Button, 
     Alert, 
     StyleSheet 
} from 'react-native';

export default function HomeScreen() {

    return (
        <SafeAreaView style={styles.container}>
            <ScrollView style={styles.scrollView}>
                <Text style={styles.text}>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Ornare suspendisse sed nisi lacus sed viverra.
                    In cursus turpis massa tincidunt dui ut ornare lectus.
                </Text>
                <Button
                    title="I am button"
                    color="#f194ff"
                    onPress={() => Alert.alert('Button with adjusted color pressed')}
                />
            </ScrollView>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 24
    },
    scrollView: {
        backgroundColor: "pink",
        marginHorizontal: 20,
        flex: 1
    },
    text: {
        fontSize: 42,
        color: "blue"
    }
});

Answer 1

You are exporting/importing your components just fine. There is a simple stylesheet error that is preventing your component from being visible. HomeScreen.js will render if you delete the flex:1 from your container style. Like this:

const styles = StyleSheet.create({
  container: {
    // flex: 1, <------remove this
    paddingTop: 24,
  },
  scrollView: {
    backgroundColor: "pink",
    marginHorizontal: 20,
    flex: 1,
  },
  text: {
    fontSize: 42,
    color: "blue",
  },
});```