Why isn't it displaying Textinput Before Main Component?

Question

App.tsx

import React from 'react';
import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  TextInput,
  View,
} from 'react-native';
import Main from './screens/Main';

function App(): JSX.Element {
  return (
    <SafeAreaView>
      <StatusBar />
      <View style={{flex: 1}}>
        <TextInput
          style={{
            height: 20,
            width: 300,
            borderWidth: 1,
            borderColor: '#fff',
            zIndex: 5,
          }}
        />
      </View>
      <Main />
    </SafeAreaView>
  );
}


export default App;

Main.tsx

import {StyleSheet, Text, View} from 'react-native';
import React from 'react';

import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {NavigationContainer} from '@react-navigation/native';
import Home from './Home';
import Movie from './Movie';
import {movies} from '..';

export type screenOptions = {
  Home: {height: number; width: number};
  Movie: {name?: string; similarMovies: movies[]};
};

const Stack = createNativeStackNavigator<screenOptions>();

const Main = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen
          options={{
            headerShown: false,
            contentStyle: {backgroundColor: '#021'},
          }}
          name="Home"
          component={Home}
        />
        <Stack.Screen
          options={{
            headerShown: false,
            contentStyle: {backgroundColor: '#001'},
          }}
          name="Movie"
          component={Movie}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default Main;

const styles = StyleSheet.create({});

as you can see i have provided you code now tell me why it isn't displaying text input even if i provided it width and height and also made screen of view as flex:1 .do I need to specify the height of view on anything pls . {Property 'similar Movies' does not exist on type 'Read-only<unknown>'} ignore this because I have provided it here so i can get rid of you post is mostly code

Answer 1

default style for the SafeAreView is not defined so add flex:1 so that safe area takes entire screen area

Eg:

import React from 'react';
import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  TextInput,
  View,
} from 'react-native';
import Main from './screens/Main';

function App(): JSX.Element {
  return (
    <SafeAreaView style={{flex:1}}>
      <StatusBar />
        <TextInput
          style={{
            height: 20,
            width: 300,
            borderWidth: 1,
            borderColor: '#fff',
            zIndex: 5,
          }}
        />
      <Main />
    </SafeAreaView>
  );
}