StyleSheet를 적용시키면 글자가 안 보입니다.

 처음에 학습할 때 진행했던 파일에서는 정상적으로 작동되는데, 새로운 파일을 만들어서 적용시킬 때에는 글자가 안 보입니다. style={styles.container} 부분을 지우면 글자가 보이고, 다시 되돌리면 안 보이는 상황입니다 ㅠㅠ. 어느 부분이 잘못됐는지 알 수 있을까요?

import { Platform, SafeAreaView, StatusBar, StyleSheet, Text, View } from 'react-native'
import React from 'react'

const MainScreen = () => {
  return (
    <SafeAreaView style={styles.container}>
        <StatusBar barStyle={'default'} />
        <Text>Todo App</Text>
        <View>
            <Text>할 일</Text>
        </View>
        <View />
        <View>
            <Text>완료된 일</Text>
        </View>
    </SafeAreaView>
  )
}

export default MainScreen

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: Platform.OS === 'android' ? 20 : 10,
        backgroundColor: '#f8f8fa'
    }

})

export default function App() {
  return (
    <View>
      <MainScreen />
    </View>
  );
}