2
2
* Sample React Native App
3
3
* https://github.com/facebook/react-native
4
4
*
5
- * Generated with the TypeScript template
6
- * https://github.com/react-native-community/react-native-template-typescript
7
- *
8
5
* @format
9
6
*/
10
7
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' ;
13
19
14
20
import {
15
21
Colors ,
@@ -19,11 +25,11 @@ import {
19
25
ReloadInstructions ,
20
26
} from 'react-native/Libraries/NewAppScreen' ;
21
27
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 {
27
33
const isDarkMode = useColorScheme ( ) === 'dark' ;
28
34
return (
29
35
< View style = { styles . sectionContainer } >
@@ -33,8 +39,7 @@ const Section: React.FC<
33
39
{
34
40
color : isDarkMode ? Colors . white : Colors . black ,
35
41
} ,
36
- ] }
37
- >
42
+ ] } >
38
43
{ title }
39
44
</ Text >
40
45
< Text
@@ -43,15 +48,14 @@ const Section: React.FC<
43
48
{
44
49
color : isDarkMode ? Colors . light : Colors . dark ,
45
50
} ,
46
- ] }
47
- >
51
+ ] } >
48
52
{ children }
49
53
</ Text >
50
54
</ View >
51
55
) ;
52
- } ;
56
+ }
53
57
54
- const App = ( ) => {
58
+ function App ( ) : JSX . Element {
55
59
const isDarkMode = useColorScheme ( ) === 'dark' ;
56
60
57
61
const backgroundStyle = {
@@ -64,30 +68,33 @@ const App = () => {
64
68
barStyle = { isDarkMode ? 'light-content' : 'dark-content' }
65
69
backgroundColor = { backgroundStyle . backgroundColor }
66
70
/>
67
- < ScrollView contentInsetAdjustmentBehavior = "automatic" style = { backgroundStyle } >
71
+ < ScrollView
72
+ contentInsetAdjustmentBehavior = "automatic"
73
+ style = { backgroundStyle } >
68
74
< Header />
69
75
< View
70
76
style = { {
71
77
backgroundColor : isDarkMode ? Colors . black : Colors . white ,
72
- } }
73
- >
78
+ } } >
74
79
< 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.
77
82
</ Section >
78
83
< Section title = "See Your Changes" >
79
84
< ReloadInstructions />
80
85
</ Section >
81
86
< Section title = "Debug" >
82
87
< DebugInstructions />
83
88
</ 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 >
85
92
< LearnMoreLinks />
86
93
</ View >
87
94
</ ScrollView >
88
95
</ SafeAreaView >
89
96
) ;
90
- } ;
97
+ }
91
98
92
99
const styles = StyleSheet . create ( {
93
100
sectionContainer : {
0 commit comments