22 * Sample React Native App
33 * https://github.com/facebook/react-native
44 *
5- * Generated with the TypeScript template
6- * https://github.com/react-native-community/react-native-template-typescript
7- *
85 * @format
96 */
107
11- import React , { type PropsWithChildren } from 'react' ;
12- import { SafeAreaView , ScrollView , StatusBar , StyleSheet , Text , useColorScheme , View } from 'react-native' ;
8+ import React from 'react' ;
9+ import type { PropsWithChildren } from 'react' ;
10+ import {
11+ SafeAreaView ,
12+ ScrollView ,
13+ StatusBar ,
14+ StyleSheet ,
15+ Text ,
16+ useColorScheme ,
17+ View ,
18+ } from 'react-native' ;
1319
1420import {
1521 Colors ,
@@ -19,11 +25,11 @@ import {
1925 ReloadInstructions ,
2026} from 'react-native/Libraries/NewAppScreen' ;
2127
22- const Section : React . FC <
23- PropsWithChildren < {
24- title : string ;
25- } >
26- > = ( { children, title } ) => {
28+ type SectionProps = PropsWithChildren < {
29+ title : string ;
30+ } > ;
31+
32+ function Section ( { children, title} : SectionProps ) : JSX . Element {
2733 const isDarkMode = useColorScheme ( ) === 'dark' ;
2834 return (
2935 < View style = { styles . sectionContainer } >
@@ -33,8 +39,7 @@ const Section: React.FC<
3339 {
3440 color : isDarkMode ? Colors . white : Colors . black ,
3541 } ,
36- ] }
37- >
42+ ] } >
3843 { title }
3944 </ Text >
4045 < Text
@@ -43,15 +48,14 @@ const Section: React.FC<
4348 {
4449 color : isDarkMode ? Colors . light : Colors . dark ,
4550 } ,
46- ] }
47- >
51+ ] } >
4852 { children }
4953 </ Text >
5054 </ View >
5155 ) ;
52- } ;
56+ }
5357
54- const App = ( ) => {
58+ function App ( ) : JSX . Element {
5559 const isDarkMode = useColorScheme ( ) === 'dark' ;
5660
5761 const backgroundStyle = {
@@ -64,30 +68,33 @@ const App = () => {
6468 barStyle = { isDarkMode ? 'light-content' : 'dark-content' }
6569 backgroundColor = { backgroundStyle . backgroundColor }
6670 />
67- < ScrollView contentInsetAdjustmentBehavior = "automatic" style = { backgroundStyle } >
71+ < ScrollView
72+ contentInsetAdjustmentBehavior = "automatic"
73+ style = { backgroundStyle } >
6874 < Header />
6975 < View
7076 style = { {
7177 backgroundColor : isDarkMode ? Colors . black : Colors . white ,
72- } }
73- >
78+ } } >
7479 < Section title = "Step One" >
75- Edit < Text style = { styles . highlight } > App.tsx</ Text > to change this screen and then come back to see your
76- edits.
80+ Edit < Text style = { styles . highlight } > App.tsx</ Text > to change this
81+ screen and then come back to see your edits.
7782 </ Section >
7883 < Section title = "See Your Changes" >
7984 < ReloadInstructions />
8085 </ Section >
8186 < Section title = "Debug" >
8287 < DebugInstructions />
8388 </ Section >
84- < Section title = "Learn More" > Read the docs to discover what to do next:</ Section >
89+ < Section title = "Learn More" >
90+ Read the docs to discover what to do next:
91+ </ Section >
8592 < LearnMoreLinks />
8693 </ View >
8794 </ ScrollView >
8895 </ SafeAreaView >
8996 ) ;
90- } ;
97+ }
9198
9299const styles = StyleSheet . create ( {
93100 sectionContainer : {
0 commit comments