TabBarIcon.js.flow
2.26 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
/* @flow */
import * as React from 'react';
import { Animated, View, StyleSheet } from 'react-native';
import type {
NavigationState,
NavigationScreenProp,
ViewStyleProp,
} from '../../TypeDefinition';
import type { TabScene } from './TabView';
type Props = {
activeTintColor: string,
inactiveTintColor: string,
scene: TabScene,
position: Animated.Value,
navigation: NavigationScreenProp<NavigationState>,
renderIcon: (scene: TabScene) => React.Node,
style?: ViewStyleProp,
};
export default class TabBarIcon extends React.PureComponent<Props> {
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: number) => i)];
const activeOpacity = position.interpolate({
inputRange,
outputRange: inputRange.map((i: number) => (i === index ? 1 : 0)),
});
const inactiveOpacity = position.interpolate({
inputRange,
outputRange: inputRange.map((i: number) => (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',
},
});