44 *
55 * Generated with the TypeScript template
66 * https://github.com/emin93/react-native-template-typescript
7- *
7+ *
88 * @format
99 */
1010
11- import React , { Component } from 'react' ;
12- import { Platform , StyleSheet , Text , View } from 'react-native' ;
11+ import React , { Fragment } from 'react' ;
12+ import {
13+ SafeAreaView ,
14+ StyleSheet ,
15+ ScrollView ,
16+ View ,
17+ Text ,
18+ StatusBar ,
19+ } from 'react-native' ;
1320
14- const instructions = Platform . select ( {
15- ios : 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu' ,
16- android :
17- 'Double tap R on your keyboard to reload,\n' +
18- 'Shake or press menu button for dev menu' ,
19- } ) ;
21+ import {
22+ Header ,
23+ LearnMoreLinks ,
24+ Colors ,
25+ DebugInstructions ,
26+ ReloadInstructions ,
27+ } from 'react-native/Libraries/NewAppScreen' ;
2028
21- interface Props { }
22- export default class App extends Component < Props > {
23- render ( ) {
24- return (
25- < View style = { styles . container } >
26- < Text style = { styles . welcome } > Welcome to React Native!</ Text >
27- < Text style = { styles . instructions } > To get started, edit App.tsx</ Text >
28- < Text style = { styles . instructions } > { instructions } </ Text >
29- </ View >
30- ) ;
31- }
32- }
29+ const App = ( ) => {
30+ return (
31+ < Fragment >
32+ < StatusBar barStyle = "dark-content" />
33+ < SafeAreaView >
34+ < ScrollView
35+ contentInsetAdjustmentBehavior = "automatic"
36+ style = { styles . scrollView } >
37+ < Header />
38+ < View style = { styles . body } >
39+ < View style = { styles . sectionContainer } >
40+ < Text style = { styles . sectionTitle } > Step One</ Text >
41+ < Text style = { styles . sectionDescription } >
42+ Edit < Text style = { styles . highlight } > App.tsx</ Text > to change this
43+ screen and then come back to see your edits.
44+ </ Text >
45+ </ View >
46+ < View style = { styles . sectionContainer } >
47+ < Text style = { styles . sectionTitle } > See Your Changes</ Text >
48+ < Text style = { styles . sectionDescription } >
49+ < ReloadInstructions />
50+ </ Text >
51+ </ View >
52+ < View style = { styles . sectionContainer } >
53+ < Text style = { styles . sectionTitle } > Debug</ Text >
54+ < Text style = { styles . sectionDescription } >
55+ < DebugInstructions />
56+ </ Text >
57+ </ View >
58+ < View style = { styles . sectionContainer } >
59+ < Text style = { styles . sectionTitle } > Learn More</ Text >
60+ < Text style = { styles . sectionDescription } >
61+ Read the docs to discover what to do next:
62+ </ Text >
63+ </ View >
64+ < LearnMoreLinks />
65+ </ View >
66+ </ ScrollView >
67+ </ SafeAreaView >
68+ </ Fragment >
69+ ) ;
70+ } ;
3371
3472const styles = StyleSheet . create ( {
35- container : {
36- flex : 1 ,
37- justifyContent : 'center' ,
38- alignItems : 'center' ,
39- backgroundColor : '#F5FCFF' ,
73+ scrollView : {
74+ backgroundColor : Colors . lighter ,
75+ } ,
76+ body : {
77+ backgroundColor : Colors . white ,
78+ } ,
79+ sectionContainer : {
80+ marginTop : 32 ,
81+ paddingHorizontal : 24 ,
4082 } ,
41- welcome : {
42- fontSize : 20 ,
43- textAlign : 'center ' ,
44- margin : 10 ,
83+ sectionTitle : {
84+ fontSize : 24 ,
85+ fontWeight : '600 ' ,
86+ color : Colors . black ,
4587 } ,
46- instructions : {
47- textAlign : 'center' ,
48- color : '#333333' ,
49- marginBottom : 5 ,
88+ sectionDescription : {
89+ marginTop : 8 ,
90+ fontSize : 18 ,
91+ fontWeight : '400' ,
92+ color : Colors . dark ,
5093 } ,
51- } ) ;
94+ highlight : {
95+ fontWeight : '700' ,
96+ } ,
97+ } ) ;
98+
99+ export default App ;
0 commit comments