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",
"expo": "^48.0.9",
"expo-cli": "^6.3.2",
"@react-navigation/native": "^6.1.6",
"@react-navigation/native-stack": "^6.9.12",
"react": "18.2.0",
"react-native": "0.71.4",
"react-native-simple-toast": "^2.0.0",

View File

@ -4,8 +4,8 @@
*
* @format
*/
import React from 'react';
import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import type {PropsWithChildren} from 'react';
import {
SafeAreaView,
@ -17,100 +17,31 @@ import {
View,
} from 'react-native';
import {
Colors,
DebugInstructions,
Header,
LearnMoreLinks,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
type SectionProps = PropsWithChildren<{
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>
);
}
const Stack = createNativeStackNavigator();
function App(): JSX.Element {
const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
return (
<SafeAreaView style={backgroundStyle}>
<StatusBar
barStyle={isDarkMode ? 'light-content' : 'dark-content'}
backgroundColor={backgroundStyle.backgroundColor}
/>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={backgroundStyle}>
<Header />
<View
style={{
backgroundColor: isDarkMode ? Colors.black : Colors.white,
}}>
<Section title="Step caca">
Edit <Text style={styles.highlight}>App.tsx</Text> to change this
screen and then come back to see your edits.
</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="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>
<NavigationContainer>
<Stack.Navigator>
{/* <Stack.Screen
name="Login"
component={LoginScreen}
options={{title: 'Login Screen'}}
/>
<Stack.Screen
name="Home"
component={RemoteClipboard}
options={{title: 'Welcome'}}
/>\
<Stack.Screen
name="Home"
component={LocalClipboard}
options={{title: 'Welcome'}}
/>*/}
</Stack.Navigator>
</NavigationContainer>
);
}