Make sure inputRange has at least 2 values. Fixes #62

This commit is contained in:
Satyajit Sahoo 2017-01-28 23:29:27 +05:30
parent 56e12d6651
commit 11e98b15d2
3 changed files with 12 additions and 4 deletions

View File

@ -61,7 +61,9 @@ export default class TabBarBottom extends PureComponent<DefaultProps, Props, voi
inactiveTintColor,
} = this.props;
const { index } = scene;
const inputRange = navigationState.routes.map((x: any, i: number) => i);
const { routes } = navigationState;
// Prepend '-1', so there are always at least 2 items in inputRange
const inputRange = [-1, ...routes.map((x: *, i: number) => i)];
const outputRange = inputRange.map((inputIndex: number) =>
(inputIndex === index ? activeTintColor : inactiveTintColor)
);
@ -106,7 +108,9 @@ export default class TabBarBottom extends PureComponent<DefaultProps, Props, voi
inactiveBackgroundColor,
style,
} = this.props;
const inputRange = navigationState.routes.map((x: any, i: number) => i);
const { routes } = navigationState;
// Prepend '-1', so there are always at least 2 items in inputRange
const inputRange = [-1, ...routes.map((x: *, i: number) => i)];
return (
<View style={[styles.tabBar, style]}>
{navigationState.routes.map((route: NavigationRoute, index: number) => {

View File

@ -42,7 +42,9 @@ export default class TabBarIcon extends PureComponent<void, Props, void> {
style,
} = this.props;
const { route, index } = scene;
const inputRange = navigationState.routes.map((x: any, i: number) => i);
const { routes } = navigationState;
// 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)),

View File

@ -67,7 +67,9 @@ export default class TabBarTop extends PureComponent<DefaultProps, Props, void>
return null;
}
const { index } = scene;
const inputRange = navigationState.routes.map((x: any, i: number) => i);
const { routes } = navigationState;
// Prepend '-1', so there are always at least 2 items in inputRange
const inputRange = [-1, ...routes.map((x: *, i: number) => i)];
const outputRange = inputRange.map((inputIndex: number) =>
(inputIndex === index ? activeTintColor : inactiveTintColor)
);