diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/App.tsx | 73 | ||||
-rw-r--r-- | src/app.json | 4 | ||||
-rw-r--r-- | src/index.js | 12 |
3 files changed, 35 insertions, 54 deletions
diff --git a/src/App.tsx b/src/App.tsx index 3927851be..e0a0241bb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -19,68 +19,39 @@ import { useColorScheme, View, } from 'react-native'; -import { NavigationContainer } from '@react-navigation/native'; -import { createNativeStackNavigator, NativeStackScreenProps } from '@react-navigation/native-stack'; - +import {NavigationContainer} from '@react-navigation/native'; import { - Colors, - DebugInstructions, - Header, - LearnMoreLinks, - ReloadInstructions, -} from 'react-native/Libraries/NewAppScreen'; + createNativeStackNavigator, + NativeStackScreenProps, +} from '@react-navigation/native-stack'; type RootStackParamList = { Home: undefined; - Profile: { name: string }; + Profile: {name: string}; }; const Stack = createNativeStackNavigator(); const Section: React.FC<{ title: string; }> = ({children, title}) => { - 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> + <Text style={styles.sectionTitle}>{title}</Text> + <Text style={styles.sectionDescription}>{children}</Text> </View> ); }; -const HomeScreen = ({ navigation }: NativeStackScreenProps<RootStackParamList, 'Home'>) => { +const HomeScreen = ({ + navigation, +}: NativeStackScreenProps<RootStackParamList, 'Home'>) => { const isDarkMode = useColorScheme() === 'dark'; - const backgroundStyle = { - backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, - }; return ( - <SafeAreaView style={backgroundStyle}> + <SafeAreaView> <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} /> - <ScrollView - contentInsetAdjustmentBehavior="automatic" - style={backgroundStyle}> - <Header /> - <View - style={{ - backgroundColor: isDarkMode ? Colors.black : Colors.white, - }}> + <ScrollView contentInsetAdjustmentBehavior="automatic"> + <View> <Section title="Step One"> Edit <Text style={styles.highlight}>App.tsx</Text> to change this screen and then come back to see your edits. @@ -89,35 +60,29 @@ const HomeScreen = ({ navigation }: NativeStackScreenProps<RootStackParamList, ' onPress={() => navigation.navigate('Profile', {name: 'Jane'})} /> </Section> - <Section title="See Your Changes"> - <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> - ) -} + ); +}; -const ProfileScreen = ({ navigation, route }: NativeStackScreenProps<RootStackParamList, 'Profile'>) => { +const ProfileScreen = ({ + route, +}: NativeStackScreenProps<RootStackParamList, 'Profile'>) => { return <Text>This is {route.params.name}'s profile</Text>; }; const App = () => { - return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} - options={{ title: 'Welcome' }} + options={{title: 'Welcome'}} /> <Stack.Screen name="Profile" component={ProfileScreen} /> </Stack.Navigator> diff --git a/src/app.json b/src/app.json new file mode 100644 index 000000000..45ef5aa68 --- /dev/null +++ b/src/app.json @@ -0,0 +1,4 @@ +{ + "name": "app", + "displayName": "app" +} \ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 000000000..52c30a178 --- /dev/null +++ b/src/index.js @@ -0,0 +1,12 @@ +/** + * @format + */ + +import {AppRegistry} from 'react-native'; +import App from './App'; + +AppRegistry.registerComponent('App', () => App); + +AppRegistry.runApplication('App', { + rootTag: document.getElementById('root'), +}); |