8
8
import React from 'react' ;
9
9
import type { PropsWithChildren } from 'react' ;
10
10
import {
11
- SafeAreaView ,
12
11
ScrollView ,
13
12
StatusBar ,
14
13
StyleSheet ,
@@ -62,19 +61,33 @@ function App(): React.JSX.Element {
62
61
backgroundColor : isDarkMode ? Colors . darker : Colors . lighter ,
63
62
} ;
64
63
64
+ /*
65
+ * To keep the template simple and small we're adding padding to prevent view
66
+ * from rendering under the System UI.
67
+ * For bigger apps the reccomendation is to use `react-native-safe-area-context`:
68
+ * https://github.com/AppAndFlow/react-native-safe-area-context
69
+ *
70
+ * You can read more about it here:
71
+ * https://github.com/react-native-community/discussions-and-proposals/discussions/827
72
+ */
73
+ const safePadding = '5%' ;
74
+
65
75
return (
66
- < SafeAreaView style = { backgroundStyle } >
76
+ < View style = { backgroundStyle } >
67
77
< StatusBar
68
78
barStyle = { isDarkMode ? 'light-content' : 'dark-content' }
69
79
backgroundColor = { backgroundStyle . backgroundColor }
70
80
/>
71
81
< ScrollView
72
- contentInsetAdjustmentBehavior = "automatic"
73
82
style = { backgroundStyle } >
74
- < Header />
83
+ < View style = { { paddingRight : safePadding } } >
84
+ < Header />
85
+ </ View >
75
86
< View
76
87
style = { {
77
88
backgroundColor : isDarkMode ? Colors . black : Colors . white ,
89
+ paddingHorizontal : safePadding ,
90
+ paddingBottom : safePadding ,
78
91
} } >
79
92
< Section title = "Step One" >
80
93
Edit < Text style = { styles . highlight } > App.tsx</ Text > to change this
@@ -92,7 +105,7 @@ function App(): React.JSX.Element {
92
105
< LearnMoreLinks />
93
106
</ View >
94
107
</ ScrollView >
95
- </ SafeAreaView >
108
+ </ View >
96
109
) ;
97
110
}
98
111
0 commit comments