Skip to content

Commit 4ee5b4f

Browse files
fix: fixed problems with animation of icon in expo-vector-icons 14
1 parent a512951 commit 4ee5b4f

File tree

6 files changed

+30
-37
lines changed

6 files changed

+30
-37
lines changed

.yarn/install-state.gz

-1.55 KB
Binary file not shown.

example/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
},
1212
"dependencies": {
1313
"@expo/metro-runtime": "~4.0.0",
14-
"@expo/vector-icons": "^13.0.0",
14+
"@expo/vector-icons": "^14.0.4",
1515
"expo": "~52.0.23",
1616
"expo-build-properties": "~0.13.1",
1717
"expo-status-bar": "~2.0.0",

src/MaterialCommunityIcon.tsx

Lines changed: 2 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { StyleSheet, Animated } from 'react-native';
1+
import { Animated } from 'react-native';
22

33
let MaterialCommunityIcons: any;
44

@@ -39,27 +39,4 @@ try {
3939
};
4040
}
4141

42-
const defaultIcon = ({ name, color, size, style, ...rest }: any) => (
43-
<MaterialCommunityIcons
44-
selectable={false}
45-
name={name}
46-
color={color}
47-
size={size}
48-
style={[
49-
{
50-
lineHeight: size,
51-
},
52-
styles.icon,
53-
style,
54-
]}
55-
{...rest}
56-
/>
57-
);
58-
59-
const styles = StyleSheet.create({
60-
icon: {
61-
backgroundColor: 'transparent',
62-
},
63-
});
64-
65-
export default defaultIcon;
42+
export default MaterialCommunityIcons;

src/TabsHeaderItem.tsx

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -115,14 +115,30 @@ export default function TabsHeaderItem({
115115
iconPosition !== 'top' && styles.marginRight,
116116
]}
117117
>
118-
<MaterialCommunityIcon
119-
selectable={false}
120-
accessibilityElementsHidden={true}
121-
importantForAccessibility="no"
122-
name={tab.props.icon || ''}
123-
style={{ color: color, opacity }}
124-
size={24}
125-
/>
118+
{/*<AnimatedText style={{ color, opacity }}>BB</AnimatedText>*/}
119+
{tab.props.icon ? (
120+
Platform.OS === 'android' ? (
121+
<Animated.View style={{ opacity }}>
122+
<MaterialCommunityIcon
123+
selectable={false}
124+
accessibilityElementsHidden={true}
125+
importantForAccessibility="no"
126+
name={tab.props.icon}
127+
color={textColor}
128+
size={24}
129+
/>
130+
</Animated.View>
131+
) : (
132+
<MaterialCommunityIcon
133+
selectable={false}
134+
accessibilityElementsHidden={true}
135+
importantForAccessibility="no"
136+
name={tab.props.icon}
137+
style={{ color, opacity }}
138+
size={24}
139+
/>
140+
)
141+
) : null}
126142
</View>
127143
) : null}
128144
{badgeIsFilled ? (

src/internal.native.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export function useAnimatedText({
2525
color:
2626
childrenA.length <= 1
2727
? activeColor
28-
: positionWithOffset.interpolate({
28+
: positionWithOffset!.interpolate({
2929
inputRange: inputRange,
3030
outputRange: childrenA.map((_, i) =>
3131
i === tabIndex ? activeColor : textColor

yarn.lock

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2272,7 +2272,7 @@ __metadata:
22722272
languageName: node
22732273
linkType: hard
22742274

2275-
"@expo/vector-icons@npm:^14.0.0":
2275+
"@expo/vector-icons@npm:^14.0.0, @expo/vector-icons@npm:^14.0.4":
22762276
version: 14.0.4
22772277
resolution: "@expo/vector-icons@npm:14.0.4"
22782278
dependencies:
@@ -11914,7 +11914,7 @@ __metadata:
1191411914
dependencies:
1191511915
"@babel/core": ^7.20.0
1191611916
"@expo/metro-runtime": ~4.0.0
11917-
"@expo/vector-icons": ^13.0.0
11917+
"@expo/vector-icons": ^14.0.4
1191811918
expo: ~52.0.23
1191911919
expo-build-properties: ~0.13.1
1192011920
expo-status-bar: ~2.0.0

0 commit comments

Comments
 (0)