Balise <View> on react-native-CodePudding

i try to make an app on react-native for the first time and I have a problem. I code a component who show a screen with some text and a button but they didn't shown on the app and I don't know why. I code on snack.expo.dev, i'm new on this but i try to learn a lot about that informatic language.

import * as React from 'react';
import { StyleSheet, View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { StartScreen } from "./routes/Start_page";

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

/*const StartScreen = () => {
    return(
      <View>
        <Text>(Screen 1)</Text>
        <Text>Welcome to My App</Text>
        <Button
          title="Start!"
          onPress={() => {}}
        >
        </Button>
      </View>
    );
}*/

const DashboardScreen = () => {
    return(
      <View>
        <Text>(Screen 2)</Text>
        <Text>Dashboard</Text>
        <Button
          title="Back"
          onPress={() => {}}
        >
        </Button>
      </View>
    );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName={"Start"}>
        <Stack.Screen name="Start" component={StartScreen} />
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Dashboard" component={DashboardScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

/*const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});*/

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

const StartScreen = () => {
    return(
      <View>
        <Text>(Screen 1)</Text>
        <Text>Welcome to My App</Text>
        <Button
          title="Start!"
          onPress={() => {}}
        >
        </Button>
      </View>
    );
}

I try to add more text to post xD

CodePudding user response：

You just forgot to export the const StartScreen in the file ./routes/Start_page/index.tsx. It will be like this:

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

export const StartScreen = () => {
    return(
      <View>
        <Text>(Screen 1)</Text>
        <Text>Welcome to My App</Text>
        <Button
          title="Start!"
          onPress={() => {}}
        >
        </Button>
      </View>
    );
}