cleared app.tsx and added navigation

This commit is contained in:
Djalim Simaila 2023-04-03 10:01:57 +02:00 committed by Romain CLEMENT
parent c9b9f47d22
commit e8d914e270
2 changed files with 25 additions and 92 deletions

View File

@ -13,6 +13,8 @@
"axios": "^1.3.4", "axios": "^1.3.4",
"expo": "^48.0.9", "expo": "^48.0.9",
"expo-cli": "^6.3.2", "expo-cli": "^6.3.2",
"@react-navigation/native": "^6.1.6",
"@react-navigation/native-stack": "^6.9.12",
"react": "18.2.0", "react": "18.2.0",
"react-native": "0.71.4", "react-native": "0.71.4",
"react-native-simple-toast": "^2.0.0", "react-native-simple-toast": "^2.0.0",

View File

@ -4,8 +4,8 @@
* *
* @format * @format
*/ */
import * as React from 'react';
import React from 'react'; import {NavigationContainer} from '@react-navigation/native';
import type {PropsWithChildren} from 'react'; import type {PropsWithChildren} from 'react';
import { import {
SafeAreaView, SafeAreaView,
@ -17,100 +17,31 @@ import {
View, View,
} from 'react-native'; } from 'react-native';
import { import {createNativeStackNavigator} from '@react-navigation/native-stack';
Colors,
DebugInstructions,
Header,
LearnMoreLinks,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
type SectionProps = PropsWithChildren<{ const Stack = createNativeStackNavigator();
title: string;
}>;
function Section({children, title}: SectionProps): JSX.Element {
const isDarkMode = useColorScheme() === 'dark';
return (
<View style={styles.sectionContainer}>
<Text
style={[
styles.sectionTitle,
{
color: isDarkMode ? Colors.white : Colors.black,
},
]}>
{title}
</Text>
<Text
style={[
styles.sectionDescription,
{
color: isDarkMode ? Colors.light : Colors.dark,
},
]}>
{children}
</Text>
</View>
);
}
function App(): JSX.Element { function App(): JSX.Element {
const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
return ( return (
<SafeAreaView style={backgroundStyle}> <NavigationContainer>
<StatusBar <Stack.Navigator>
barStyle={isDarkMode ? 'light-content' : 'dark-content'} {/* <Stack.Screen
backgroundColor={backgroundStyle.backgroundColor} name="Login"
/> component={LoginScreen}
<ScrollView options={{title: 'Login Screen'}}
contentInsetAdjustmentBehavior="automatic" />
style={backgroundStyle}> <Stack.Screen
<Header /> name="Home"
<View component={RemoteClipboard}
style={{ options={{title: 'Welcome'}}
backgroundColor: isDarkMode ? Colors.black : Colors.white, />\
}}> <Stack.Screen
<Section title="Step caca"> name="Home"
Edit <Text style={styles.highlight}>App.tsx</Text> to change this component={LocalClipboard}
screen and then come back to see your edits. options={{title: 'Welcome'}}
</Section> />*/}
<Section title="Voir tes changements"> </Stack.Navigator>
<ReloadInstructions /> </NavigationContainer>
</Section>
<Section title="Voir tes changements">
<ReloadInstructions />
</Section>
<Section title="Voir tes changements">
<ReloadInstructions />
</Section>
<Section title="Voir tes changements">
<ReloadInstructions />
</Section>
<Section title="Voir tes changements">
<ReloadInstructions />
</Section>
<Section title="Voir tes changements">
<ReloadInstructions />
</Section>
<Section title="Voir tes changements">
<ReloadInstructions />
</Section>
<Section title="Debug">
<DebugInstructions />
</Section>
<Section title="Learn More">
Read the docs to discover what to do next:
</Section>
<LearnMoreLinks />
</View>
</ScrollView>
</SafeAreaView>
); );
} }