Skip to content

React does not recognize the duotoneColor prop on a DOM element. #66

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mrkpatchaa merged 6 commits into from
Jan 8, 2025
Merged

React does not recognize the duotoneColor prop on a DOM element. #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7e81503
fix: react does not recognize the duotoneColor prop on a DOM element.…
mrkpatchaa Jan 6, 2025
d5d67b6
fix: upgrade deps
mrkpatchaa Jan 6, 2025
f720fe4
fix: upgrade deps
mrkpatchaa Jan 6, 2025
f3b1aac
2.2.3
mrkpatchaa Jan 6, 2025
00b00a7
fix: previous solution was overkill
mrkpatchaa Jan 6, 2025
655b579
fix: remove condition
mrkpatchaa Jan 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 1 addition & 7 deletions .github/workflows/ci.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,9 @@ jobs:
${{ runner.os }}-yarn-

- name: Install dependencies
run: yarn install --production=false

- name: Run code generator
run: yarn generate
run: yarn install --production=false # will run prepare, which generates icons

- name: Run linter & formatter
run: |
yarn format
yarn lint

- name: Run prepare
run: yarn prepare
165 changes: 1 addition & 164 deletions example/app/(tabs)/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,164 +1 @@
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable @typescript-eslint/no-explicit-any */

import { useCallback, useState, useMemo } from 'react';
import {
StyleSheet,
View,
Text,
FlatList,
StatusBar,
Image,
TouchableOpacity,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import * as IconPack from '@/components/icons';
import PhosphorLogo from '@/assets/images/phosphor-mark-tight-yellow.png';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { IconContext, ...Icons } = IconPack;

const weights = ['thin', 'light', 'regular', 'bold', 'fill', 'duotone'];

export default function HomeScreen() {
const [weightIdx, setWeightIdx] = useState(2);
const [iconColor, setIconColor] = useState(undefined);
const [mirrorActive, setMirrorActive] = useState(false);

const weight: IconPack.IconWeight = useMemo(
() => weights[weightIdx] as any,
[weightIdx]
);

const handleChangeWeight = useCallback(() => {
setWeightIdx((weightIdx + 1) % weights.length);
}, [weightIdx]);

const handleChangeIconColor = useCallback(() => {
setIconColor(`#${Math.floor(Math.random() * 16777215).toString(16)}`);
}, []);

const handleToggleMirror = useCallback(() => {
setMirrorActive(!mirrorActive);
}, [mirrorActive]);

return (
<View style={styles.rootView}>
<StatusBar barStyle="light-content" />

<SafeAreaView style={styles.headerContainer}>
<View style={styles.header}>
<Image source={PhosphorLogo} style={styles.logoImage} />
<View
style={{
flex: 1,
alignItems: 'flex-start',
justifyContent: 'center',
paddingStart: 10,
}}
>
<Text style={styles.headerText}>Phosphor React Native</Text>
<Text
style={{
color: '#fff',
opacity: 0.8,
textTransform: 'capitalize',
}}
>
{weight}
</Text>
</View>
<TouchableOpacity
style={styles.weightSelect}
onPress={handleChangeIconColor}
>
<IconPack.Palette color="#FFF" weight={weight} />
</TouchableOpacity>
<TouchableOpacity
style={styles.weightSelect}
onPress={handleChangeWeight}
>
<IconPack.PencilLine color="#FFF" weight={weight} />
</TouchableOpacity>
<TouchableOpacity
style={styles.weightSelect}
onPress={handleToggleMirror}
>
<IconPack.Swap color="#FFF" weight={weight} />
</TouchableOpacity>
</View>
</SafeAreaView>
<FlatList
style={styles.scrollView}
contentContainerStyle={styles.main}
data={Object.entries(Icons).filter(([, Icon]) => !!Icon) as any[]}
keyExtractor={(item) => item[0]}
numColumns={3}
renderItem={({ item: [name, Icon] }) => (
<View style={styles.iconItem}>
<Icon
size={48}
weight={weight}
mirrored={mirrorActive}
color={iconColor}
/>
<Text style={styles.iconName}>{name}</Text>
</View>
)}
/>
</View>
);
}

const styles = StyleSheet.create({
rootView: {
flex: 1,
backgroundColor: '#FFF',
},
headerContainer: {
backgroundColor: '#e76f51',
},
header: {
backgroundColor: '#e76f51',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
paddingBottom: 16,
paddingHorizontal: 16,
},
logoImage: {
width: 40,
height: 40,
borderRadius: 20,
},
headerText: {
color: '#FFF',
fontSize: 18,
fontWeight: 'bold',
flex: 1,
textAlign: 'center',
},
weightSelect: {
width: 35,
},
scrollView: {
flex: 1,
},
main: {
backgroundColor: 'white',
paddingHorizontal: 8,
paddingBottom: 16,
},
iconItem: {
width: '33%',
height: 100,
alignItems: 'center',
justifyContent: 'center',
padding: 8,
},
iconName: {
textAlign: 'center',
opacity: 0.8,
marginTop: 4,
},
});
export { default } from '@/components/home';
134 changes: 1 addition & 133 deletions example/app/(tabs)/test-lab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,133 +1 @@
/* eslint-disable react-native/no-inline-styles */

import { useCallback, useState } from 'react';

import {
StyleSheet,
View,
Text,
StatusBar,
Image,
FlatList,
TouchableOpacity,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import PhosphorLogo from '@/assets/images/phosphor-mark-tight-yellow.png';
import * as IconPack from '@/components/icons';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { IconContext, ...Icons } = IconPack;

export default function TestLabScreen() {
const [toggleActive, setToggleActive] = useState(false);

const handleToggle = useCallback(() => {
setToggleActive(!toggleActive);
}, [toggleActive]);
return (
<View style={styles.rootView}>
<StatusBar barStyle="light-content" />
<SafeAreaView style={styles.headerContainer}>
<View style={styles.header}>
<Image source={PhosphorLogo} style={styles.logoImage} />
<View
style={{
flex: 1,
alignItems: 'flex-start',
justifyContent: 'center',
paddingStart: 10,
}}
>
<Text style={styles.headerText}>Phosphor React Native</Text>
<Text
style={{
color: '#fff',
opacity: 0.8,
textTransform: 'capitalize',
}}
>
Duotone test lab
</Text>
</View>
<TouchableOpacity style={styles.weightSelect} onPress={handleToggle}>
<IconPack.Swap color="#FFF" weight={'regular'} />
</TouchableOpacity>
</View>
</SafeAreaView>
<FlatList
style={styles.scrollView}
contentContainerStyle={styles.main}
data={Object.entries(Icons)
.filter(([, Icon]) => !!Icon)
.slice(0, 6)}
keyExtractor={(item) => item[0]}
numColumns={3}
renderItem={({ item: [name, Icon] }) => (
<View style={styles.iconItem}>
<Icon
size={48}
weight={'duotone'}
color={`#${Math.floor(Math.random() * 16777215).toString(16)}`}
duotoneColor={`#${Math.floor(Math.random() * 16777215).toString(16)}`}
duotoneOpacity={Math.random()}
/>
<Text style={styles.iconName}>{name}</Text>
</View>
)}
/>
</View>
);
}

const styles = StyleSheet.create({
rootView: {
flex: 1,
backgroundColor: '#FFF',
},
headerContainer: {
backgroundColor: '#e76f51',
},
header: {
backgroundColor: '#e76f51',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
paddingBottom: 16,
paddingHorizontal: 16,
},
logoImage: {
width: 40,
height: 40,
borderRadius: 20,
},
headerText: {
color: '#FFF',
fontSize: 18,
fontWeight: 'bold',
flex: 1,
textAlign: 'center',
},
weightSelect: {
width: 35,
},
scrollView: {
flex: 1,
},
main: {
backgroundColor: 'white',
paddingHorizontal: 8,
paddingBottom: 16,
},
iconItem: {
width: '33%',
height: 100,
alignItems: 'center',
justifyContent: 'center',
padding: 8,
},
iconName: {
textAlign: 'center',
opacity: 0.8,
marginTop: 4,
},
});
export { default } from '@/components/test-lab';
Loading
Loading