TabBarIcon.js
1.78 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import * as React from 'react';
import { Animated, View, StyleSheet } from 'react-native';
export default class TabBarIcon extends React.PureComponent {
render() {
const {
position,
scene,
navigation,
activeTintColor,
inactiveTintColor,
style
} = this.props;
const { route, index } = scene;
const { routes } = navigation.state;
// Prepend '-1', so there are always at least 2 items in inputRange
const inputRange = [-1, ...routes.map((x, i) => i)];
const activeOpacity = position.interpolate({
inputRange,
outputRange: inputRange.map(i => i === index ? 1 : 0)
});
const inactiveOpacity = position.interpolate({
inputRange,
outputRange: inputRange.map(i => i === index ? 0 : 1)
});
// We render the icon twice at the same position on top of each other:
// active and inactive one, so we can fade between them.
return <View style={style}>
<Animated.View style={[styles.icon, { opacity: activeOpacity }]}>
{this.props.renderIcon({
route,
index,
focused: true,
tintColor: activeTintColor
})}
</Animated.View>
<Animated.View style={[styles.icon, { opacity: inactiveOpacity }]}>
{this.props.renderIcon({
route,
index,
focused: false,
tintColor: inactiveTintColor
})}
</Animated.View>
</View>;
}
}
const styles = StyleSheet.create({
icon: {
// We render the icon twice at the same position on top of each other:
// active and inactive one, so we can fade between them:
// Cover the whole iconContainer:
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
alignItems: 'center',
justifyContent: 'center'
}
});