Skip to content

Commit 69afedb

Browse files
MeliValescaMeliValesca
committed
changed to css inline
1 parent a6e70e3 commit 69afedb

4 files changed

Lines changed: 156 additions & 199 deletions

File tree

‎example-web/src/App.tsx‎

Lines changed: 13 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { View, Text, Pressable, StyleSheet } from 'react-native';
2+
import { View, Text, Pressable } from 'react-native';
33
import SafeAreaViewExample from './examples/SafeAreaViewExample';
44
import SafeAreaViewEdgesExample from './examples/SafeAreaViewEdgesExample';
55
import HooksExample from './examples/HooksExample';
@@ -22,58 +22,34 @@ export default function App() {
2222
const ActiveComponent = EXAMPLES.find((e) => e.key === activeKey)!.component;
2323

2424
return (
25-
<View style={styles.container}>
26-
<View style={styles.tabBar}>
25+
<View style={{ flex: 1 }}>
26+
<View style={{ flexDirection: 'row', backgroundColor: '#222f3e' }}>
2727
{EXAMPLES.map((example) => (
2828
<Pressable
2929
key={example.key}
30-
style={[styles.tab, activeKey === example.key && styles.activeTab]}
30+
style={[
31+
{ flex: 1, paddingVertical: 12, alignItems: 'center' },
32+
activeKey === example.key && {
33+
borderBottomWidth: 3,
34+
borderBottomColor: '#10ac84',
35+
},
36+
]}
3137
onPress={() => setActiveKey(example.key)}
3238
>
3339
<Text
3440
style={[
35-
styles.tabText,
36-
activeKey === example.key && styles.activeTabText,
41+
{ fontSize: 14, fontWeight: '600', color: '#8395a7' },
42+
activeKey === example.key && { color: '#ffffff' },
3743
]}
3844
>
3945
{example.title}
4046
</Text>
4147
</Pressable>
4248
))}
4349
</View>
44-
<View style={styles.content}>
50+
<View style={{ flex: 1 }}>
4551
<ActiveComponent />
4652
</View>
4753
</View>
4854
);
4955
}
50-
51-
const styles = StyleSheet.create({
52-
container: {
53-
flex: 1,
54-
},
55-
tabBar: {
56-
flexDirection: 'row',
57-
backgroundColor: '#222f3e',
58-
},
59-
tab: {
60-
flex: 1,
61-
paddingVertical: 12,
62-
alignItems: 'center',
63-
},
64-
activeTab: {
65-
borderBottomWidth: 3,
66-
borderBottomColor: '#10ac84',
67-
},
68-
tabText: {
69-
fontSize: 14,
70-
fontWeight: '600',
71-
color: '#8395a7',
72-
},
73-
activeTabText: {
74-
color: '#ffffff',
75-
},
76-
content: {
77-
flex: 1,
78-
},
79-
});

‎example-web/src/examples/HooksExample.tsx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { View, Text, ScrollView, StyleSheet } from 'react-native';
2+
import { View, Text, ScrollView } from 'react-native';
33
import {
44
SafeAreaProvider,
55
useSafeAreaInsets,
@@ -41,7 +41,7 @@ function HooksExampleScreen() {
4141
<DataView data={initialWindowMetrics?.frame} />
4242
</Card>
4343
<Card title="Note">
44-
<Text style={styles.note}>
44+
<Text style={{ fontSize: 14, lineHeight: 20, color: '#576574' }}>
4545
On desktop browsers, insets will be 0. The CSS env(safe-area-inset-*)
4646
values only report non-zero on devices with notches (e.g. iPhone in
4747
Safari). The frame values reflect the current window dimensions.
@@ -63,11 +63,3 @@ export default function HooksExample() {
6363
</View>
6464
);
6565
}
66-
67-
const styles = StyleSheet.create({
68-
note: {
69-
fontSize: 14,
70-
lineHeight: 20,
71-
color: '#576574',
72-
},
73-
});

‎example-web/src/examples/SafeAreaViewEdgesExample.tsx‎

Lines changed: 76 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
11
import * as React from 'react';
2-
import {
3-
View,
4-
Text,
5-
ScrollView,
6-
Switch,
7-
Pressable,
8-
StyleSheet,
9-
} from 'react-native';
2+
import { View, Text, ScrollView, Switch, Pressable } from 'react-native';
103
import {
114
SafeAreaProvider,
125
SafeAreaView,
136
EdgeRecord,
147
} from 'react-native-safe-area-context';
158

9+
const marginColor = '#5f27cd';
10+
const paddingColor = '#10ac84';
11+
1612
export default function SafeAreaViewEdgesExample() {
1713
const [mode, setMode] = React.useState<'padding' | 'margin'>('padding');
1814
const [additionalMargin, setAdditionalMargin] = React.useState(false);
@@ -41,10 +37,10 @@ export default function SafeAreaViewEdgesExample() {
4137

4238
return (
4339
<SafeAreaProvider>
44-
<View style={styles.background}>
40+
<View style={{ flex: 1, backgroundColor: marginColor }}>
4541
<SafeAreaView
4642
style={[
47-
styles.safeArea,
43+
{ flex: 1, backgroundColor: paddingColor, borderRadius: 16 },
4844
{
4945
margin: additionalMargin ? 8 : 0,
5046
padding: additionalPadding ? 8 : 0,
@@ -53,14 +49,34 @@ export default function SafeAreaViewEdgesExample() {
5349
mode={mode}
5450
edges={edges}
5551
>
56-
<ScrollView contentContainerStyle={styles.contentContainer}>
57-
<Text style={styles.text}>
52+
<ScrollView
53+
contentContainerStyle={{
54+
flexGrow: 1,
55+
backgroundColor: 'white',
56+
padding: 20,
57+
justifyContent: 'center',
58+
}}
59+
>
60+
<Text style={{ fontSize: 17, lineHeight: 24, color: '#222f3e' }}>
5861
Edges{'\n'}
59-
<Text style={styles.subText}>
62+
<Text style={{ fontSize: 14, color: '#576574' }}>
6063
Make sure at least one is picked!
6164
</Text>
6265
</Text>
63-
<View style={styles.edges}>
66+
<View
67+
style={{
68+
alignSelf: 'center',
69+
alignItems: 'center',
70+
justifyContent: 'center',
71+
marginTop: 40,
72+
marginBottom: 100,
73+
width: 200,
74+
height: 200,
75+
borderWidth: 0.5,
76+
borderColor: '#c8d6e5',
77+
borderRadius: 6,
78+
}}
79+
>
6480
<Switch
6581
value={top}
6682
onValueChange={setTop}
@@ -87,19 +103,39 @@ export default function SafeAreaViewEdgesExample() {
87103
/>
88104
</View>
89105
<Pressable
90-
style={styles.row}
106+
style={{
107+
marginVertical: 4,
108+
flexDirection: 'row',
109+
alignItems: 'center',
110+
justifyContent: 'space-between',
111+
}}
91112
onPress={() => setMode(mode === 'padding' ? 'margin' : 'padding')}
92113
>
93-
<Text style={styles.text}>
114+
<Text style={{ fontSize: 17, lineHeight: 24, color: '#222f3e' }}>
94115
Safe areas added to{' '}
95116
<Text style={{ color: modeTint }}>{mode}</Text>
96117
{'\n'}
97-
<Text style={styles.subText}>Tap to toggle</Text>
118+
<Text style={{ fontSize: 14, color: '#576574' }}>
119+
Tap to toggle
120+
</Text>
98121
</Text>
99122
</Pressable>
100-
<View style={styles.separator} />
101-
<View style={styles.row}>
102-
<Text style={styles.text}>
123+
<View
124+
style={{
125+
marginVertical: 12,
126+
backgroundColor: '#c8d6e5',
127+
height: 0.5,
128+
}}
129+
/>
130+
<View
131+
style={{
132+
marginVertical: 4,
133+
flexDirection: 'row',
134+
alignItems: 'center',
135+
justifyContent: 'space-between',
136+
}}
137+
>
138+
<Text style={{ fontSize: 17, lineHeight: 24, color: '#222f3e' }}>
103139
Add additional{' '}
104140
<Text style={{ color: paddingColor }}>padding</Text>
105141
</Text>
@@ -109,8 +145,15 @@ export default function SafeAreaViewEdgesExample() {
109145
trackColor={{ true: paddingColor, false: '' }}
110146
/>
111147
</View>
112-
<View style={styles.row}>
113-
<Text style={styles.text}>
148+
<View
149+
style={{
150+
marginVertical: 4,
151+
flexDirection: 'row',
152+
alignItems: 'center',
153+
justifyContent: 'space-between',
154+
}}
155+
>
156+
<Text style={{ fontSize: 17, lineHeight: 24, color: '#222f3e' }}>
114157
Add additional{' '}
115158
<Text style={{ color: marginColor }}>margin</Text>
116159
</Text>
@@ -120,8 +163,17 @@ export default function SafeAreaViewEdgesExample() {
120163
trackColor={{ true: marginColor, false: '' }}
121164
/>
122165
</View>
123-
<View style={styles.row}>
124-
<Text style={styles.text}>Use maximum edge mode</Text>
166+
<View
167+
style={{
168+
marginVertical: 4,
169+
flexDirection: 'row',
170+
alignItems: 'center',
171+
justifyContent: 'space-between',
172+
}}
173+
>
174+
<Text style={{ fontSize: 17, lineHeight: 24, color: '#222f3e' }}>
175+
Use maximum edge mode
176+
</Text>
125177
<Switch
126178
value={maximumEdgeMode}
127179
onValueChange={setMaximumEdgeMode}
@@ -134,56 +186,3 @@ export default function SafeAreaViewEdgesExample() {
134186
</SafeAreaProvider>
135187
);
136188
}
137-
138-
const marginColor = '#5f27cd';
139-
const paddingColor = '#10ac84';
140-
141-
const styles = StyleSheet.create({
142-
background: {
143-
flex: 1,
144-
backgroundColor: marginColor,
145-
},
146-
safeArea: {
147-
flex: 1,
148-
backgroundColor: paddingColor,
149-
borderRadius: 16,
150-
},
151-
contentContainer: {
152-
flexGrow: 1,
153-
backgroundColor: 'white',
154-
padding: 20,
155-
justifyContent: 'center',
156-
},
157-
edges: {
158-
alignSelf: 'center',
159-
alignItems: 'center',
160-
justifyContent: 'center',
161-
marginTop: 40,
162-
marginBottom: 100,
163-
width: 200,
164-
height: 200,
165-
borderWidth: StyleSheet.hairlineWidth,
166-
borderColor: '#c8d6e5',
167-
borderRadius: 6,
168-
},
169-
row: {
170-
marginVertical: 4,
171-
flexDirection: 'row',
172-
alignItems: 'center',
173-
justifyContent: 'space-between',
174-
},
175-
separator: {
176-
marginVertical: 12,
177-
backgroundColor: '#c8d6e5',
178-
height: StyleSheet.hairlineWidth,
179-
},
180-
text: {
181-
fontSize: 17,
182-
lineHeight: 24,
183-
color: '#222f3e',
184-
},
185-
subText: {
186-
fontSize: 14,
187-
color: '#576574',
188-
},
189-
});

0 commit comments

Comments
 (0)