Skip to content

Commit 7e81503

Browse files
mrkpatchaamrkpatchaa
committed
fix: react does not recognize the duotoneColor prop on a DOM element. Closes #65 
1 parent c3c840d commit 7e81503

File tree

11 files changed

+610
-418
lines changed

11 files changed

+610
-418
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,8 @@ Icon components accept all props that you can pass to a normal SVG element, incl
7575
- **title?**: `string` – Accessibility label
7676
- **titleId?**: `string` – Accessibility label ID
7777
- **testID?**: `string` – testID for tests
78-
- **duotoneColor?**: `string` – Duotone fill color. Can be any CSS color string, including `hex`, `rgb`, `rgba`, `hsl`, `hsla`, named colors. Default value to black.
79-
- **duotoneOpacity?**: `number` – The opacity of the duotoneColor. Default value to 0.2.
78+
- **duotoneColor?**: `string` – Duotone fill color. Can be any CSS color string, including `hex`, `rgb`, `rgba`, `hsl`, `hsla`, named colors. Default value to black. ⚠️ Use `duototocolor` when importing the weight icon directly, `import Star from 'phosphor-react-native/src/duotone/Star'`.;
79+
- **duotoneOpacity?**: `number` – The opacity of the duotoneColor. Default value to 0.2. ⚠️ Use `duotoneopacity` when importing the weight icon directly, `import Star from 'phosphor-react-native/src/duotone/Star'`.;
8080

8181
### Context
8282

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

Lines changed: 1 addition & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -1,164 +1 @@
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+
export { default } from '@/components/home';

‎example/app/(tabs)/test-lab.tsx‎

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

0 commit comments

Comments
 (0)