Skip to content

Commit 84ee6d1

Browse files
codingkicodingki
committed
fix avatar on web
1 parent 1ed24f9 commit 84ee6d1

File tree

1 file changed

+195
-195
lines changed

1 file changed

+195
-195
lines changed

‎examples/showcase/src/screens/Avatar.tsx‎

Lines changed: 195 additions & 195 deletions
Original file line numberDiff line numberDiff line change
@@ -1,202 +1,202 @@
1-
import React from "react";
2-
import { ScrollView, StyleSheet, View } from "react-native";
1+
import React from 'react';
2+
import { ScrollView, StyleSheet, View } from 'react-native';
33
import {
4-
Avatar,
5-
Layout,
6-
Section,
7-
SectionContent,
8-
Text,
9-
themeColor,
10-
TopNav,
11-
useTheme,
12-
} from "../rapi";
13-
import { StackScreenProps } from "@react-navigation/stack";
14-
import { MainStackParamList } from "../types/navigation";
15-
import { Ionicons } from "@expo/vector-icons";
4+
Avatar,
5+
Layout,
6+
Section,
7+
SectionContent,
8+
Text,
9+
themeColor,
10+
TopNav,
11+
useTheme,
12+
} from '../rapi';
13+
import { StackScreenProps } from '@react-navigation/stack';
14+
import { MainStackParamList } from '../types/navigation';
15+
import { Ionicons } from '@expo/vector-icons';
1616

1717
export default function ({
18-
navigation,
19-
}: StackScreenProps<MainStackParamList, "Avatar">) {
20-
const { isDarkmode } = useTheme();
21-
return (
22-
<Layout>
23-
<TopNav
24-
leftContent={
25-
<Ionicons
26-
name="chevron-back"
27-
size={20}
28-
color={isDarkmode ? themeColor.white : themeColor.black}
29-
/>
30-
}
31-
leftAction={() => navigation.goBack()}
32-
middleContent="Avatar"
33-
rightContent={
34-
<Ionicons
35-
name={isDarkmode ? "sunny" : "moon"}
36-
size={20}
37-
color={isDarkmode ? themeColor.white100 : "#191921"}
38-
/>
39-
}
40-
rightAction={() => {
41-
if (isDarkmode) {
42-
setTheme("light");
43-
} else {
44-
setTheme("dark");
45-
}
46-
}}
47-
/>
48-
<ScrollView>
49-
<Section style={{ marginTop: 20, marginHorizontal: 20 }}>
50-
<SectionContent>
51-
<Text fontWeight="medium">Sizes</Text>
52-
<View
53-
style={{
54-
flexDirection: "row",
55-
alignItems: "center",
56-
marginTop: 10,
57-
justifyContent: "space-between",
58-
}}
59-
>
60-
<Text>Extra large xl</Text>
61-
<Avatar source={require("../../assets/people.jpg")} size="xl" />
62-
</View>
63-
<View
64-
style={{
65-
flexDirection: "row",
66-
alignItems: "center",
67-
marginTop: 10,
68-
justifyContent: "space-between",
69-
}}
70-
>
71-
<Text size="lg">Large lg</Text>
72-
<Avatar source={require("../../assets/people.jpg")} size="lg" />
73-
</View>
74-
<View
75-
style={{
76-
flexDirection: "row",
77-
alignItems: "center",
78-
marginTop: 10,
79-
justifyContent: "space-between",
80-
}}
81-
>
82-
<Text>Medium md</Text>
83-
<Avatar source={require("../../assets/people.jpg")} size="md" />
84-
</View>
85-
<View
86-
style={{
87-
flexDirection: "row",
88-
alignItems: "center",
89-
marginTop: 10,
90-
justifyContent: "space-between",
91-
}}
92-
>
93-
<Text>Small sm</Text>
94-
<Avatar source={require("../../assets/people.jpg")} size="sm" />
95-
</View>
96-
</SectionContent>
97-
</Section>
98-
<Section style={{ marginVertical: 20, marginHorizontal: 20 }}>
99-
<SectionContent>
100-
<Text fontWeight="medium">Shapes</Text>
101-
<View
102-
style={{
103-
flexDirection: "row",
104-
alignItems: "center",
105-
marginTop: 10,
106-
justifyContent: "space-between",
107-
}}
108-
>
109-
<View style={{ flexDirection: "row", alignItems: "center" }}>
110-
<Avatar source={require("../../assets/people.jpg")} size="xl" />
111-
<Avatar source={require("../../assets/people.jpg")} size="lg" />
112-
<Avatar source={require("../../assets/people.jpg")} size="md" />
113-
<Avatar source={require("../../assets/people.jpg")} size="sm" />
114-
</View>
115-
<View style={{ alignItems: "flex-end" }}>
116-
<Text>round</Text>
117-
<Text fontWeight="bold">default</Text>
118-
</View>
119-
</View>
120-
<View
121-
style={{
122-
flexDirection: "row",
123-
alignItems: "center",
124-
marginTop: 10,
125-
justifyContent: "space-between",
126-
}}
127-
>
128-
<View style={{ flexDirection: "row", alignItems: "center" }}>
129-
<Avatar
130-
shape="rounded"
131-
source={require("../../assets/people.jpg")}
132-
size="xl"
133-
/>
134-
<Avatar
135-
shape="rounded"
136-
source={require("../../assets/people.jpg")}
137-
size="lg"
138-
/>
139-
<Avatar
140-
shape="rounded"
141-
source={require("../../assets/people.jpg")}
142-
size="md"
143-
/>
144-
<Avatar
145-
shape="rounded"
146-
source={require("../../assets/people.jpg")}
147-
size="sm"
148-
/>
149-
</View>
150-
<Text>rounded </Text>
151-
</View>
152-
<View
153-
style={{
154-
flexDirection: "row",
155-
alignItems: "center",
156-
marginTop: 10,
157-
justifyContent: "space-between",
158-
}}
159-
>
160-
<View style={{ flexDirection: "row", alignItems: "center" }}>
161-
<Avatar
162-
shape="square"
163-
source={require("../../assets/people.jpg")}
164-
size="xl"
165-
/>
166-
<Avatar
167-
shape="square"
168-
source={require("../../assets/people.jpg")}
169-
size="lg"
170-
/>
171-
<Avatar
172-
shape="square"
173-
source={require("../../assets/people.jpg")}
174-
size="md"
175-
/>
176-
<Avatar
177-
shape="square"
178-
source={require("../../assets/people.jpg")}
179-
size="sm"
180-
/>
181-
</View>
182-
<Text>square </Text>
183-
</View>
184-
</SectionContent>
185-
</Section>
186-
</ScrollView>
187-
</Layout>
188-
);
18+
navigation,
19+
}: StackScreenProps<MainStackParamList, 'Avatar'>) {
20+
const { isDarkmode, setTheme } = useTheme();
21+
return (
22+
<Layout>
23+
<TopNav
24+
leftContent={
25+
<Ionicons
26+
name="chevron-back"
27+
size={20}
28+
color={isDarkmode ? themeColor.white : themeColor.black}
29+
/>
30+
}
31+
leftAction={() => navigation.goBack()}
32+
middleContent="Avatar"
33+
rightContent={
34+
<Ionicons
35+
name={isDarkmode ? 'sunny' : 'moon'}
36+
size={20}
37+
color={isDarkmode ? themeColor.white100 : '#191921'}
38+
/>
39+
}
40+
rightAction={() => {
41+
if (isDarkmode) {
42+
setTheme('light');
43+
} else {
44+
setTheme('dark');
45+
}
46+
}}
47+
/>
48+
<ScrollView>
49+
<Section style={{ marginTop: 20, marginHorizontal: 20 }}>
50+
<SectionContent>
51+
<Text fontWeight="medium">Sizes</Text>
52+
<View
53+
style={{
54+
flexDirection: 'row',
55+
alignItems: 'center',
56+
marginTop: 10,
57+
justifyContent: 'space-between',
58+
}}
59+
>
60+
<Text>Extra large xl</Text>
61+
<Avatar source={require('../../assets/people.jpg')} size="xl" />
62+
</View>
63+
<View
64+
style={{
65+
flexDirection: 'row',
66+
alignItems: 'center',
67+
marginTop: 10,
68+
justifyContent: 'space-between',
69+
}}
70+
>
71+
<Text size="lg">Large lg</Text>
72+
<Avatar source={require('../../assets/people.jpg')} size="lg" />
73+
</View>
74+
<View
75+
style={{
76+
flexDirection: 'row',
77+
alignItems: 'center',
78+
marginTop: 10,
79+
justifyContent: 'space-between',
80+
}}
81+
>
82+
<Text>Medium md</Text>
83+
<Avatar source={require('../../assets/people.jpg')} size="md" />
84+
</View>
85+
<View
86+
style={{
87+
flexDirection: 'row',
88+
alignItems: 'center',
89+
marginTop: 10,
90+
justifyContent: 'space-between',
91+
}}
92+
>
93+
<Text>Small sm</Text>
94+
<Avatar source={require('../../assets/people.jpg')} size="sm" />
95+
</View>
96+
</SectionContent>
97+
</Section>
98+
<Section style={{ marginVertical: 20, marginHorizontal: 20 }}>
99+
<SectionContent>
100+
<Text fontWeight="medium">Shapes</Text>
101+
<View
102+
style={{
103+
flexDirection: 'row',
104+
alignItems: 'center',
105+
marginTop: 10,
106+
justifyContent: 'space-between',
107+
}}
108+
>
109+
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
110+
<Avatar source={require('../../assets/people.jpg')} size="xl" />
111+
<Avatar source={require('../../assets/people.jpg')} size="lg" />
112+
<Avatar source={require('../../assets/people.jpg')} size="md" />
113+
<Avatar source={require('../../assets/people.jpg')} size="sm" />
114+
</View>
115+
<View style={{ alignItems: 'flex-end' }}>
116+
<Text>round</Text>
117+
<Text fontWeight="bold">default</Text>
118+
</View>
119+
</View>
120+
<View
121+
style={{
122+
flexDirection: 'row',
123+
alignItems: 'center',
124+
marginTop: 10,
125+
justifyContent: 'space-between',
126+
}}
127+
>
128+
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
129+
<Avatar
130+
shape="rounded"
131+
source={require('../../assets/people.jpg')}
132+
size="xl"
133+
/>
134+
<Avatar
135+
shape="rounded"
136+
source={require('../../assets/people.jpg')}
137+
size="lg"
138+
/>
139+
<Avatar
140+
shape="rounded"
141+
source={require('../../assets/people.jpg')}
142+
size="md"
143+
/>
144+
<Avatar
145+
shape="rounded"
146+
source={require('../../assets/people.jpg')}
147+
size="sm"
148+
/>
149+
</View>
150+
<Text>rounded </Text>
151+
</View>
152+
<View
153+
style={{
154+
flexDirection: 'row',
155+
alignItems: 'center',
156+
marginTop: 10,
157+
justifyContent: 'space-between',
158+
}}
159+
>
160+
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
161+
<Avatar
162+
shape="square"
163+
source={require('../../assets/people.jpg')}
164+
size="xl"
165+
/>
166+
<Avatar
167+
shape="square"
168+
source={require('../../assets/people.jpg')}
169+
size="lg"
170+
/>
171+
<Avatar
172+
shape="square"
173+
source={require('../../assets/people.jpg')}
174+
size="md"
175+
/>
176+
<Avatar
177+
shape="square"
178+
source={require('../../assets/people.jpg')}
179+
size="sm"
180+
/>
181+
</View>
182+
<Text>square </Text>
183+
</View>
184+
</SectionContent>
185+
</Section>
186+
</ScrollView>
187+
</Layout>
188+
);
189189
}
190190

191191
const styles = StyleSheet.create({
192-
listItem: {
193-
marginHorizontal: 20,
194-
marginTop: 20,
195-
padding: 20,
196-
backgroundColor: "white",
197-
borderRadius: 10,
198-
flexDirection: "row",
199-
justifyContent: "space-between",
200-
alignItems: "center",
201-
},
192+
listItem: {
193+
marginHorizontal: 20,
194+
marginTop: 20,
195+
padding: 20,
196+
backgroundColor: 'white',
197+
borderRadius: 10,
198+
flexDirection: 'row',
199+
justifyContent: 'space-between',
200+
alignItems: 'center',
201+
},
202202
});

0 commit comments

Comments
 (0)