Skip to content

Commit 28e58ad

Browse files
mrkpatchaamrkpatchaa
committed
fix: experiment three shake
1 parent c3c840d commit 28e58ad

File tree

11 files changed

+2189
-2242
lines changed

11 files changed

+2189
-2242
lines changed

‎example/app.json‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
"adaptiveIcon": {
2020
"foregroundImage": "./assets/images/adaptive-icon.png",
2121
"backgroundColor": "#ffffff"
22-
}
22+
},
23+
"package": "com.mrkpatchaa.phosphorreactnativeexample"
2324
},
2425
"web": {
2526
"bundler": "metro",
@@ -31,6 +32,14 @@
3132
],
3233
"experiments": {
3334
"typedRoutes": true
35+
},
36+
"extra": {
37+
"router": {
38+
"origin": false
39+
},
40+
"eas": {
41+
"projectId": "6774593f-43cb-4b9f-b095-6ef9acc57538"
42+
}
3443
}
3544
}
36-
}
45+
}

‎example/app/(tabs)/_layout.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Tabs } from 'expo-router';
22
import React from 'react';
33

4-
import List from '@/components/icons/icons/List';
5-
import TestTube from '@/components/icons/icons/TestTube';
4+
// import List from 'phosphor-react-native/src/icons/List';
5+
// import TestTube from '@/components/icons/icons/TestTube';
66
import { Colors } from '@/constants/Colors';
77
import { useColorScheme } from '@/hooks/useColorScheme';
88

@@ -20,20 +20,20 @@ export default function TabLayout() {
2020
name="index"
2121
options={{
2222
title: 'All icons',
23-
tabBarIcon: ({ color, focused }) => (
24-
<List weight={focused ? 'fill' : 'light'} color={color} />
25-
),
23+
// tabBarIcon: ({ color, focused }) => (
24+
// <List weight={focused ? 'fill' : 'light'} color={color} />
25+
// ),
2626
}}
2727
/>
28-
<Tabs.Screen
28+
{/* <Tabs.Screen
2929
name="test-lab"
3030
options={{
3131
title: 'Test Lab',
3232
tabBarIcon: ({ color, focused }) => (
3333
<TestTube weight={focused ? 'fill' : 'light'} color={color} />
3434
),
3535
}}
36-
/>
36+
/> */}
3737
</Tabs>
3838
);
3939
}

‎example/app/(tabs)/index.tsx‎

Lines changed: 3 additions & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -1,164 +1,3 @@
1-
/* eslint-disable react-native/no-inline-styles */
2-
/* eslint-disable @typescript-eslint/no-explicit-any */
3-
4-
import { useCallback, useState, useMemo } from 'react';
5-
import {
6-
StyleSheet,
7-
View,
8-
Text,
9-
FlatList,
10-
StatusBar,
11-
Image,
12-
TouchableOpacity,
13-
} from 'react-native';
14-
import { SafeAreaView } from 'react-native-safe-area-context';
15-
import * as IconPack from '@/components/icons';
16-
import PhosphorLogo from '@/assets/images/phosphor-mark-tight-yellow.png';
17-
18-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
19-
const { IconContext, ...Icons } = IconPack;
20-
21-
const weights = ['thin', 'light', 'regular', 'bold', 'fill', 'duotone'];
22-
23-
export default function HomeScreen() {
24-
const [weightIdx, setWeightIdx] = useState(2);
25-
const [iconColor, setIconColor] = useState(undefined);
26-
const [mirrorActive, setMirrorActive] = useState(false);
27-
28-
const weight: IconPack.IconWeight = useMemo(
29-
() => weights[weightIdx] as any,
30-
[weightIdx]
31-
);
32-
33-
const handleChangeWeight = useCallback(() => {
34-
setWeightIdx((weightIdx + 1) % weights.length);
35-
}, [weightIdx]);
36-
37-
const handleChangeIconColor = useCallback(() => {
38-
setIconColor(`#${Math.floor(Math.random() * 16777215).toString(16)}`);
39-
}, []);
40-
41-
const handleToggleMirror = useCallback(() => {
42-
setMirrorActive(!mirrorActive);
43-
}, [mirrorActive]);
44-
45-
return (
46-
<View style={styles.rootView}>
47-
<StatusBar barStyle="light-content" />
48-
49-
<SafeAreaView style={styles.headerContainer}>
50-
<View style={styles.header}>
51-
<Image source={PhosphorLogo} style={styles.logoImage} />
52-
<View
53-
style={{
54-
flex: 1,
55-
alignItems: 'flex-start',
56-
justifyContent: 'center',
57-
paddingStart: 10,
58-
}}
59-
>
60-
<Text style={styles.headerText}>Phosphor React Native</Text>
61-
<Text
62-
style={{
63-
color: '#fff',
64-
opacity: 0.8,
65-
textTransform: 'capitalize',
66-
}}
67-
>
68-
{weight}
69-
</Text>
70-
</View>
71-
<TouchableOpacity
72-
style={styles.weightSelect}
73-
onPress={handleChangeIconColor}
74-
>
75-
<IconPack.Palette color="#FFF" weight={weight} />
76-
</TouchableOpacity>
77-
<TouchableOpacity
78-
style={styles.weightSelect}
79-
onPress={handleChangeWeight}
80-
>
81-
<IconPack.PencilLine color="#FFF" weight={weight} />
82-
</TouchableOpacity>
83-
<TouchableOpacity
84-
style={styles.weightSelect}
85-
onPress={handleToggleMirror}
86-
>
87-
<IconPack.Swap color="#FFF" weight={weight} />
88-
</TouchableOpacity>
89-
</View>
90-
</SafeAreaView>
91-
<FlatList
92-
style={styles.scrollView}
93-
contentContainerStyle={styles.main}
94-
data={Object.entries(Icons).filter(([, Icon]) => !!Icon) as any[]}
95-
keyExtractor={(item) => item[0]}
96-
numColumns={3}
97-
renderItem={({ item: [name, Icon] }) => (
98-
<View style={styles.iconItem}>
99-
<Icon
100-
size={48}
101-
weight={weight}
102-
mirrored={mirrorActive}
103-
color={iconColor}
104-
/>
105-
<Text style={styles.iconName}>{name}</Text>
106-
</View>
107-
)}
108-
/>
109-
</View>
110-
);
111-
}
112-
113-
const styles = StyleSheet.create({
114-
rootView: {
115-
flex: 1,
116-
backgroundColor: '#FFF',
117-
},
118-
headerContainer: {
119-
backgroundColor: '#e76f51',
120-
},
121-
header: {
122-
backgroundColor: '#e76f51',
123-
alignItems: 'center',
124-
justifyContent: 'center',
125-
flexDirection: 'row',
126-
paddingBottom: 16,
127-
paddingHorizontal: 16,
128-
},
129-
logoImage: {
130-
width: 40,
131-
height: 40,
132-
borderRadius: 20,
133-
},
134-
headerText: {
135-
color: '#FFF',
136-
fontSize: 18,
137-
fontWeight: 'bold',
138-
flex: 1,
139-
textAlign: 'center',
140-
},
141-
weightSelect: {
142-
width: 35,
143-
},
144-
scrollView: {
145-
flex: 1,
146-
},
147-
main: {
148-
backgroundColor: 'white',
149-
paddingHorizontal: 8,
150-
paddingBottom: 16,
151-
},
152-
iconItem: {
153-
width: '33%',
154-
height: 100,
155-
alignItems: 'center',
156-
justifyContent: 'center',
157-
padding: 8,
158-
},
159-
iconName: {
160-
textAlign: 'center',
161-
opacity: 0.8,
162-
marginTop: 4,
163-
},
164-
});
1+
// import HomeScreen from '@/components/home';
2+
import HomeScreen from '@/components/home-subset';
3+
export default HomeScreen;

example/app/(tabs)/test-lab.tsx renamed to example/app/(tabs)/test-lab.tsxold

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,8 @@ import {
1313
} from 'react-native';
1414
import { SafeAreaView } from 'react-native-safe-area-context';
1515
import PhosphorLogo from '@/assets/images/phosphor-mark-tight-yellow.png';
16-
import * as IconPack from '@/components/icons';
1716

18-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
19-
const { IconContext, ...Icons } = IconPack;
17+
import { Icon, iconList } from 'phosphor-react-native/src';
2018

2119
export default function TestLabScreen() {
2220
const [toggleActive, setToggleActive] = useState(false);
@@ -50,14 +48,14 @@ export default function TestLabScreen() {
5048
</Text>
5149
</View>
5250
<TouchableOpacity style={styles.weightSelect} onPress={handleToggle}>
53-
<IconPack.Swap color="#FFF" weight={'regular'} />
51+
<Icon name="Swap" color="#FFF" weight={'regular'} />
5452
</TouchableOpacity>
5553
</View>
5654
</SafeAreaView>
5755
<FlatList
5856
style={styles.scrollView}
5957
contentContainerStyle={styles.main}
60-
data={Object.entries(Icons)
58+
data={Object.entries(iconList)
6159
.filter(([, Icon]) => !!Icon)
6260
.slice(0, 6)}
6361
keyExtractor={(item) => item[0]}

0 commit comments

Comments
 (0)