status-im/react-navigation
2
0
Fork 0
mirror of https://github.com/status-im/react-navigation.git synced 2025-02-24 09:08:15 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/TabView/TabBarBottom.js
View File

@ -61,7 +61,9 @@ export default class TabBarBottom extends PureComponent<DefaultProps, Props, voi
inactiveTintColor, inactiveTintColor,
} = this.props; } = this.props;
const { index } = scene; 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) => const outputRange = inputRange.map((inputIndex: number) =>
(inputIndex === index ? activeTintColor : inactiveTintColor) (inputIndex === index ? activeTintColor : inactiveTintColor)
); );
@ -106,7 +108,9 @@ export default class TabBarBottom extends PureComponent<DefaultProps, Props, voi
inactiveBackgroundColor, inactiveBackgroundColor,
style, style,
} = this.props; } = 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 ( return (
<View style={[styles.tabBar, style]}> <View style={[styles.tabBar, style]}>
{navigationState.routes.map((route: NavigationRoute, index: number) => { {navigationState.routes.map((route: NavigationRoute, index: number) => {

4
src/views/TabView/TabBarIcon.js
View File

@ -42,7 +42,9 @@ export default class TabBarIcon extends PureComponent<void, Props, void> {
style, style,
} = this.props; } = this.props;
const { route, index } = scene; 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({ const activeOpacity = position.interpolate({
inputRange, inputRange,
outputRange: inputRange.map((i: number) => (i === index ? 1 : 0)), outputRange: inputRange.map((i: number) => (i === index ? 1 : 0)),

4
src/views/TabView/TabBarTop.js
View File

@ -67,7 +67,9 @@ export default class TabBarTop extends PureComponent<DefaultProps, Props, void>
return null; return null;
} }
const { index } = scene; 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) => const outputRange = inputRange.map((inputIndex: number) =>
(inputIndex === index ? activeTintColor : inactiveTintColor) (inputIndex === index ? activeTintColor : inactiveTintColor)
); );