mirror of
https://github.com/zhigang1992/react-native-paper.git
synced 2026-06-11 08:13:29 +08:00
841 lines
26 KiB
JavaScript
841 lines
26 KiB
JavaScript
/* @flow */
|
|
|
|
import * as React from 'react';
|
|
import {
|
|
View,
|
|
Animated,
|
|
Easing,
|
|
TouchableWithoutFeedback,
|
|
SafeAreaView,
|
|
StyleSheet,
|
|
Platform,
|
|
} from 'react-native';
|
|
import { polyfill } from 'react-lifecycles-compat';
|
|
import color from 'color';
|
|
import Icon from './Icon';
|
|
import Paper from './Paper';
|
|
import Text from './Typography/Text';
|
|
import { black, white } from '../styles/colors';
|
|
import withTheme from '../core/withTheme';
|
|
import type { Theme } from '../types';
|
|
import type { IconSource } from './Icon';
|
|
|
|
const AnimatedText = Animated.createAnimatedComponent(Text);
|
|
const AnimatedPaper = Animated.createAnimatedComponent(Paper);
|
|
|
|
type Route = {
|
|
key: string,
|
|
title?: string,
|
|
icon?: IconSource,
|
|
color?: string,
|
|
};
|
|
|
|
type NavigationState<T> = {
|
|
index: number,
|
|
routes: Array<T>,
|
|
};
|
|
|
|
type Props<T> = {
|
|
/**
|
|
* Whether the shifting style is used, the active tab appears wider and the inactive tabs won't have a label.
|
|
* By default, this is `true` when you have more than 3 tabs.
|
|
*/
|
|
shifting?: boolean,
|
|
/**
|
|
* State for the bottom navigation. The state should contain the following properties:
|
|
*
|
|
* - `index`: a number reprsenting the index of the active route in the `routes` array
|
|
* - `routes`: an array containing a list of route objects used for rendering the tabs
|
|
*
|
|
* Each route object should contain the following properties:
|
|
*
|
|
* - `key`: a unique key to identify the route (required)
|
|
* - `title`: title of the route to use as the tab label
|
|
* - `icon`: icon to use as the tab icon, can be a string, an image source or a react component
|
|
* - `color`: color to use as background color for shifting bottom navigation
|
|
*
|
|
* Example:
|
|
*
|
|
* ```js
|
|
* {
|
|
* index: 1,
|
|
* routes: [
|
|
* { key: 'music', title: 'Music', icon: 'queue-music', color: '#3F51B5' },
|
|
* { key: 'albums', title: 'Albums', icon: 'album', color: '#009688' },
|
|
* { key: 'recents', title: 'Recents', icon: 'history', color: '#795548' },
|
|
* { key: 'purchased', title: 'Purchased', icon: 'shopping-cart', color: '#607D8B' },
|
|
* ]
|
|
* }
|
|
* ```
|
|
*
|
|
* `BottomNavigation` is a controlled component, which means the `index` needs to be updated via the `onIndexChange` callback.
|
|
*/
|
|
navigationState: NavigationState<T>,
|
|
/**
|
|
* Callback which is called on tab change, receives the index of the new tab as argument.
|
|
* The navigation state needs to be updated when it's called, otherwise the change is dropped.
|
|
*/
|
|
onIndexChange: (index: number) => mixed,
|
|
/**
|
|
* Callback which returns a react element to render as the page for the tab. Receives an object containing the route as the argument:
|
|
*
|
|
* ```js
|
|
* renderScene = ({ route, jumpTo }) => {
|
|
* switch (route.key) {
|
|
* case 'music':
|
|
* return <MusicRoute jumpTo={jumpTo} />;
|
|
* case 'albums':
|
|
* return <AlbumsRoute jumpTo={jumpTo} />;
|
|
* }
|
|
* }
|
|
* ```
|
|
*
|
|
* Pages are lazily rendered, which means that a page will be rendered the first time you navigate to it.
|
|
* After initial render, all the pages stay rendered to preserve their state.
|
|
*
|
|
* You need to make sure that your individual routes implement a `shouldComponentUpdate` to improve the performance.
|
|
* To make it easier to specify the components, you can use the `SceneMap` helper:
|
|
*
|
|
* ```js
|
|
* renderScene = BottomNavigation.SceneMap({
|
|
* music: MusicRoute,
|
|
* albums: AlbumsRoute,
|
|
* });
|
|
* ```
|
|
*
|
|
* Specifying the components this way is easier and takes care of implementing a `shouldComponentUpdate` method.
|
|
* Each component will receive the current route and a `jumpTo` method as it's props.
|
|
* The `jumpTo` method can be used to navigate to other tabs programmatically:
|
|
*
|
|
* ```js
|
|
* this.props.jumpTo('albums')
|
|
* ```
|
|
*/
|
|
renderScene: (props: {
|
|
route: T,
|
|
jumpTo: (key: string) => mixed,
|
|
}) => ?React.Node,
|
|
/**
|
|
* Callback which returns a React Element to be used as tab icon.
|
|
*/
|
|
renderIcon?: (props: {
|
|
route: T,
|
|
focused: boolean,
|
|
tintColor: string,
|
|
}) => React.Node,
|
|
/**
|
|
* Callback which React Element to be used as tab label.
|
|
*/
|
|
renderLabel?: (props: {
|
|
route: T,
|
|
focused: boolean,
|
|
tintColor: string,
|
|
}) => React.Node,
|
|
/**
|
|
* Get label text for the tab, uses `route.title` by default. Use `renderLabel` to replace label component.
|
|
*/
|
|
getLabelText?: (props: { route: T }) => string,
|
|
/**
|
|
* Get color for the tab, uses `route.color` by default.
|
|
*/
|
|
getColor?: (props: { route: T }) => string,
|
|
/**
|
|
* Function to execute on tab press. It receives the route for the pressed tab, useful for things like scroll to top.
|
|
*/
|
|
onTabPress?: (props: { route: T }) => mixed,
|
|
/**
|
|
* Style for the bottom navigation bar.
|
|
* You can set a bottom padding here if you have a translucent navigation bar on Android:
|
|
*
|
|
* ```js
|
|
* barStyle={{ paddingBottom: 48 }}
|
|
* ```
|
|
*/
|
|
barStyle?: any,
|
|
style?: any,
|
|
/**
|
|
* @optional
|
|
*/
|
|
theme: Theme,
|
|
};
|
|
|
|
type State = {
|
|
/**
|
|
* Active state of individual tab items, active state is 1 and inactve state is 0.
|
|
*/
|
|
tabs: Animated.Value[],
|
|
/**
|
|
* The amount of horizontal shift for each tab item.
|
|
*/
|
|
shifts: Animated.Value[],
|
|
/**
|
|
* Index of the currently active tab. Used for setting the background color.
|
|
* Use don't use the color as an animated value directly, because `setValue` seems to be buggy with colors.
|
|
*/
|
|
index: Animated.Value,
|
|
/**
|
|
* Animation for the background color ripple, used to determine it's scale and opacity.
|
|
*/
|
|
ripple: Animated.Value,
|
|
/**
|
|
* Animation for the touch feedback, used to determine it's scale and opacity.
|
|
*/
|
|
touch: Animated.Value,
|
|
/**
|
|
* Layout of the tab bar. The width is used to determine the size and position of the ripple.
|
|
*/
|
|
layout: { height: number, width: number, measured: boolean },
|
|
/**
|
|
* Currently active index. Used only for getDerivedStateFromProps.
|
|
*/
|
|
current: number,
|
|
/**
|
|
* Previously active index. Used to determine the position of the ripple.
|
|
*/
|
|
previous: number,
|
|
/**
|
|
* List of loaded tabs, tabs will be loaded when navigated to.
|
|
*/
|
|
loaded: number[],
|
|
};
|
|
|
|
const MIN_RIPPLE_SCALE = 0.001; // Minimum scale is not 0 due to bug with animation
|
|
const MIN_SHIFT_AMOUNT = 10;
|
|
const MIN_TAB_WIDTH = 96;
|
|
const MAX_TAB_WIDTH = 168;
|
|
const BAR_HEIGHT = 56;
|
|
const ACTIVE_LABEL_SIZE = 14;
|
|
const INACTIVE_LABEL_SIZE = 12;
|
|
|
|
const calculateShift = (activeIndex, currentIndex, numberOfItems) => {
|
|
if (activeIndex < currentIndex) {
|
|
// If the new active tab comes before current tab, current tab will shift towards right
|
|
return 2 * MIN_SHIFT_AMOUNT;
|
|
}
|
|
|
|
if (activeIndex > currentIndex) {
|
|
// If the new active tab comes after current tab, current tab will shift towards left
|
|
return -2 * MIN_SHIFT_AMOUNT;
|
|
}
|
|
|
|
if (activeIndex === currentIndex) {
|
|
if (currentIndex === 0) {
|
|
// If the current tab is the new active tab and its the first tab, it'll shift towards right
|
|
return MIN_SHIFT_AMOUNT;
|
|
}
|
|
|
|
if (currentIndex === numberOfItems - 1) {
|
|
// If the current tab is the new active tab and its the last tab, it'll shift towards left
|
|
return -MIN_SHIFT_AMOUNT;
|
|
}
|
|
}
|
|
|
|
// If the current tab is the new active tab and its somewhere in the middle, it won't shift
|
|
return 0;
|
|
};
|
|
|
|
/**
|
|
* Bottom navigation provides quick navigation between top-level views of an app with a bottom tab bar.
|
|
* It is primarily designed for use on mobile.
|
|
*
|
|
* For integration with React Navigation, you can use [react-navigation-tabs](https://github.com/react-navigation/react-navigation-tabs).
|
|
*
|
|
* <div class="screenshots">
|
|
* <img class="medium" src="screenshots/bottom-navigation.gif" />
|
|
* </div>
|
|
*
|
|
* ## Usage
|
|
* ```js
|
|
* import * as React from 'react';
|
|
* import { BottomNavigation } from 'react-native-paper';
|
|
*
|
|
* export default class MyComponent extends React.Component {
|
|
* state = {
|
|
* index: 0,
|
|
* routes: [
|
|
* { key: 'music', title: 'Music', icon: 'queue-music' },
|
|
* { key: 'albums', title: 'Albums', icon: 'album' },
|
|
* { key: 'recents', title: 'Recents', icon: 'history' },
|
|
* ],
|
|
* };
|
|
*
|
|
* _handleIndexChange = index => this.setState({ index });
|
|
*
|
|
* _renderScene = BottomNavigation.SceneMap({
|
|
* music: MusicRoute,
|
|
* albums: AlbumsRoute,
|
|
* recents: RecentsRoute,
|
|
* });
|
|
*
|
|
* render() {
|
|
* return (
|
|
* <BottomNavigation
|
|
* navigationState={this.state}
|
|
* onIndexChange={this._handleIndexChange}
|
|
* renderScene={this._renderScene}
|
|
* />
|
|
* );
|
|
* }
|
|
* }
|
|
* ```
|
|
*/
|
|
class BottomNavigation<T: Route> extends React.Component<Props<T>, State> {
|
|
/**
|
|
* Pure components are used to minmize re-rendering of the pages.
|
|
* This drastically improves the animation performance.
|
|
*/
|
|
static SceneMap(scenes: { [key: string]: Function }) {
|
|
/* eslint-disable react/no-multi-comp */
|
|
class SceneComponent extends React.PureComponent<*> {
|
|
render() {
|
|
return React.createElement(scenes[this.props.route.key], this.props);
|
|
}
|
|
}
|
|
|
|
return ({ route, jumpTo }: *) => (
|
|
<SceneComponent key={route.key} route={route} jumpTo={jumpTo} />
|
|
);
|
|
}
|
|
|
|
static getDerivedStateFromProps(nextProps, prevState) {
|
|
const { index, routes } = nextProps.navigationState;
|
|
|
|
// Re-create animated values if routes have been added/removed
|
|
// Preserve previous animated values if they exist, so we don't break animations
|
|
const tabs = routes.map(
|
|
// focused === 1, unfocused === 0
|
|
(_, i) => prevState.tabs[i] || new Animated.Value(i === index ? 1 : 0)
|
|
);
|
|
const shifts = routes.map(
|
|
(_, i) =>
|
|
prevState.shifts[i] ||
|
|
new Animated.Value(calculateShift(index, i, routes.length))
|
|
);
|
|
|
|
const nextState = {
|
|
tabs,
|
|
shifts,
|
|
};
|
|
|
|
if (index !== prevState.current) {
|
|
/* $FlowFixMe */
|
|
Object.assign(nextState, {
|
|
// Store the current index in state so that we can later check if the index has changed
|
|
current: index,
|
|
previous: prevState.current,
|
|
// Set the current tab to be loaded if it was not loaded before
|
|
loaded: prevState.loaded.includes(index)
|
|
? prevState.loaded
|
|
: [...prevState.loaded, index],
|
|
});
|
|
}
|
|
|
|
return nextState;
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
const { index } = this.props.navigationState;
|
|
|
|
this.state = {
|
|
tabs: [],
|
|
shifts: [],
|
|
index: new Animated.Value(index),
|
|
ripple: new Animated.Value(MIN_RIPPLE_SCALE),
|
|
touch: new Animated.Value(MIN_RIPPLE_SCALE),
|
|
layout: { height: 0, width: 0, measured: false },
|
|
current: index,
|
|
previous: 0,
|
|
loaded: [index],
|
|
};
|
|
}
|
|
|
|
componentDidUpdate(prevProps) {
|
|
if (prevProps.navigationState.index === this.props.navigationState.index) {
|
|
return;
|
|
}
|
|
|
|
const { routes, index } = this.props.navigationState;
|
|
|
|
// Reset the ripple to avoid glitch if it's currently animating
|
|
this.state.ripple.setValue(MIN_RIPPLE_SCALE);
|
|
|
|
Animated.parallel([
|
|
Animated.timing(this.state.ripple, {
|
|
toValue: 1,
|
|
duration: 400,
|
|
useNativeDriver: true,
|
|
}),
|
|
Animated.sequence([
|
|
Animated.delay(100),
|
|
Animated.parallel([
|
|
...routes.map((_, i) =>
|
|
Animated.timing(this.state.tabs[i], {
|
|
toValue: i === index ? 1 : 0,
|
|
duration: 200,
|
|
useNativeDriver: true,
|
|
})
|
|
),
|
|
...routes.map((_, i) =>
|
|
Animated.timing(this.state.shifts[i], {
|
|
toValue: calculateShift(index, i, routes.length),
|
|
duration: 200,
|
|
easing: Easing.out(Easing.sin),
|
|
useNativeDriver: true,
|
|
})
|
|
),
|
|
]),
|
|
]),
|
|
]).start(() => {
|
|
// Workaround a bug in native animations where this is reset after first animation
|
|
this.state.tabs.map((tab, i) => tab.setValue(i === index ? 1 : 0));
|
|
|
|
// Update the index to change bar's bacground color and then hide the ripple
|
|
this.state.index.setValue(index);
|
|
this.state.ripple.setValue(MIN_RIPPLE_SCALE);
|
|
});
|
|
}
|
|
|
|
_handleLayout = e =>
|
|
this.setState({
|
|
layout: {
|
|
height: e.nativeEvent.layout.height,
|
|
width: e.nativeEvent.layout.width,
|
|
measured: true,
|
|
},
|
|
});
|
|
|
|
_handleTabPress = (index: number) => {
|
|
const { navigationState } = this.props;
|
|
|
|
this.state.touch.setValue(MIN_RIPPLE_SCALE);
|
|
|
|
Animated.timing(this.state.touch, {
|
|
toValue: 1,
|
|
duration: 300,
|
|
easing: Easing.in(Easing.sin),
|
|
useNativeDriver: true,
|
|
}).start();
|
|
|
|
if (index !== navigationState.index) {
|
|
this.props.onIndexChange(index);
|
|
}
|
|
|
|
if (this.props.onTabPress) {
|
|
this.props.onTabPress({
|
|
route: navigationState.routes[index],
|
|
});
|
|
}
|
|
};
|
|
|
|
_jumpTo = (key: string) => {
|
|
const index = this.props.navigationState.routes.findIndex(
|
|
route => route.key === key
|
|
);
|
|
|
|
this.props.onIndexChange(index);
|
|
};
|
|
|
|
render() {
|
|
const {
|
|
navigationState,
|
|
renderScene,
|
|
renderIcon,
|
|
renderLabel,
|
|
getLabelText = ({ route }) => route.title,
|
|
getColor = ({ route }) => route.color,
|
|
barStyle,
|
|
style,
|
|
theme,
|
|
} = this.props;
|
|
const { layout, loaded } = this.state;
|
|
const { routes } = navigationState;
|
|
const { colors } = theme;
|
|
|
|
const shifting =
|
|
typeof this.props.shifting === 'boolean'
|
|
? this.props.shifting
|
|
: routes.length > 3;
|
|
|
|
const {
|
|
backgroundColor: approxBackgroundColor = shifting
|
|
? colors.primary
|
|
: theme.dark ? black : white,
|
|
} =
|
|
StyleSheet.flatten(barStyle) || {};
|
|
|
|
const backgroundColor = shifting
|
|
? this.state.index.interpolate({
|
|
inputRange: routes.map((_, i) => i),
|
|
outputRange: routes.map(
|
|
route => getColor({ route }) || approxBackgroundColor
|
|
),
|
|
})
|
|
: approxBackgroundColor;
|
|
|
|
const isDark = !color(approxBackgroundColor).light();
|
|
|
|
const textColor = isDark ? white : black;
|
|
const activeColor = shifting ? textColor : colors.primary;
|
|
const inactiveColor = shifting
|
|
? textColor
|
|
: color(textColor)
|
|
.alpha(0.5)
|
|
.rgb()
|
|
.string();
|
|
|
|
const touchColor = color(textColor)
|
|
.alpha(0.12)
|
|
.rgb()
|
|
.string();
|
|
|
|
const touchRippleSize = layout.width / routes.length;
|
|
const maxTabWidth = routes.length > 3 ? MIN_TAB_WIDTH : MAX_TAB_WIDTH;
|
|
const tabWidth = Math.min(
|
|
// Account for horizontal padding around the items
|
|
(layout.width - MIN_SHIFT_AMOUNT * 4) / routes.length,
|
|
maxTabWidth
|
|
);
|
|
|
|
return (
|
|
<View
|
|
style={[styles.container, style]}
|
|
onLayout={this._handleLayout}
|
|
pointerEvents={layout.measured ? 'auto' : 'none'}
|
|
>
|
|
<View style={[styles.content, { backgroundColor: colors.background }]}>
|
|
{routes.map((route, index) => {
|
|
if (!loaded.includes(index)) {
|
|
// Don't render a screen if we've never navigated to it
|
|
return null;
|
|
}
|
|
|
|
const focused = this.state.tabs[index];
|
|
const opacity = focused;
|
|
const translateY = shifting
|
|
? focused.interpolate({
|
|
inputRange: [0, 0.5, 1],
|
|
outputRange: [8, 8, 0],
|
|
})
|
|
: 0;
|
|
|
|
return (
|
|
<Animated.View
|
|
key={route.key}
|
|
pointerEvents={
|
|
navigationState.index === index ? 'auto' : 'none'
|
|
}
|
|
style={[
|
|
StyleSheet.absoluteFill,
|
|
{ opacity, transform: [{ translateY }] },
|
|
]}
|
|
>
|
|
{renderScene({
|
|
route,
|
|
jumpTo: this._jumpTo,
|
|
})}
|
|
</Animated.View>
|
|
);
|
|
})}
|
|
</View>
|
|
<AnimatedPaper style={[styles.bar, barStyle, { backgroundColor }]}>
|
|
<SafeAreaView
|
|
style={[styles.items, { maxWidth: maxTabWidth * routes.length }]}
|
|
>
|
|
{shifting ? (
|
|
<Animated.View
|
|
pointerEvents="none"
|
|
style={[
|
|
styles.ripple,
|
|
{
|
|
// Since we have a single ripple, we have to reposition it so that it appears to expand from active tab.
|
|
// We need to move it from the top to center of the tab bar and from the left to the active tab.
|
|
top: BAR_HEIGHT / 2 - layout.width / 8,
|
|
left:
|
|
navigationState.index * tabWidth +
|
|
tabWidth / 2 -
|
|
layout.width / 8,
|
|
height: layout.width / 4,
|
|
width: layout.width / 4,
|
|
borderRadius: layout.width / 2,
|
|
backgroundColor: getColor({
|
|
route: routes[navigationState.index],
|
|
}),
|
|
transform: [
|
|
{ translateX: this.state.shifts[navigationState.index] },
|
|
{
|
|
// Scale to twice the size to ensure it covers the whole tab bar
|
|
scale: this.state.ripple.interpolate({
|
|
inputRange: [0, 1],
|
|
outputRange: [0, 8],
|
|
}),
|
|
},
|
|
],
|
|
opacity: this.state.ripple.interpolate({
|
|
inputRange: [0, MIN_RIPPLE_SCALE, 0.3, 1],
|
|
outputRange: [0, 0, 1, 1],
|
|
}),
|
|
},
|
|
]}
|
|
/>
|
|
) : null}
|
|
<Animated.View
|
|
pointerEvents="none"
|
|
style={[
|
|
styles.ripple,
|
|
{
|
|
// Set top and left values so that the ripple's center is same as the tab's center
|
|
top: BAR_HEIGHT / 2 - touchRippleSize / 2,
|
|
left:
|
|
navigationState.index * tabWidth +
|
|
tabWidth / 2 -
|
|
touchRippleSize / 2,
|
|
height: touchRippleSize,
|
|
width: touchRippleSize,
|
|
borderRadius: touchRippleSize / 2,
|
|
backgroundColor: touchColor,
|
|
transform: [
|
|
{
|
|
translateX: shifting
|
|
? this.state.shifts[navigationState.index]
|
|
: 0,
|
|
},
|
|
{ scale: this.state.touch },
|
|
],
|
|
opacity: this.state.touch.interpolate({
|
|
inputRange: [0, 0.5, 1],
|
|
outputRange: [0, 1, 0],
|
|
}),
|
|
},
|
|
]}
|
|
/>
|
|
{routes.map((route, index) => {
|
|
const shift = this.state.shifts[index];
|
|
const focused = this.state.tabs[index];
|
|
|
|
// Since we can't animate font size with native driver, calculate the scale to emulate it.
|
|
const scale = focused.interpolate({
|
|
inputRange: [0, 1],
|
|
outputRange: [
|
|
shifting ? 0.5 : INACTIVE_LABEL_SIZE / ACTIVE_LABEL_SIZE,
|
|
1,
|
|
],
|
|
});
|
|
|
|
// Move down the icon to account for no-label in shifting and smaller label in non-shifting.
|
|
const translateY = focused.interpolate({
|
|
inputRange: [0, 1],
|
|
outputRange: [shifting ? 10 : 2, 0],
|
|
});
|
|
|
|
// Amount of shifting for the shifting bottom navigation.
|
|
// This gives the illusion of the active tab getting bigger.
|
|
// We don't animate the width directly since we can't use native driver.
|
|
const translateX = shifting ? shift : 0;
|
|
|
|
// We render the active icon and label on top of inactive ones and cross-fade them on change.
|
|
// This trick gives the illusion that we are animating between active and inactive colors.
|
|
// This is to ensure that we can use native driver, as colors cannot be animated with native driver.
|
|
const inactiveOpacity = focused.interpolate({
|
|
inputRange: [0, 1],
|
|
outputRange: [1, 0],
|
|
});
|
|
const activeIconOpacity = shifting
|
|
? focused.interpolate({
|
|
inputRange: [0, 1],
|
|
outputRange: [0.6, 1],
|
|
})
|
|
: focused;
|
|
const activeLabelOpacity = focused;
|
|
const inactiveIconOpacity = inactiveOpacity;
|
|
const inactiveLabelOpacity = inactiveOpacity;
|
|
|
|
return (
|
|
<TouchableWithoutFeedback
|
|
key={route.key}
|
|
onPress={() => this._handleTabPress(index)}
|
|
>
|
|
<Animated.View
|
|
style={[styles.item, { transform: [{ translateX }] }]}
|
|
>
|
|
<Animated.View
|
|
style={[
|
|
styles.iconContainer,
|
|
{ transform: [{ translateY }] },
|
|
]}
|
|
>
|
|
<Animated.View
|
|
style={[
|
|
styles.iconWrapper,
|
|
{ opacity: activeIconOpacity },
|
|
]}
|
|
>
|
|
{renderIcon ? (
|
|
renderIcon({
|
|
route,
|
|
focused: true,
|
|
tintColor: activeColor,
|
|
})
|
|
) : (
|
|
<Icon
|
|
style={styles.icon}
|
|
name={route.icon}
|
|
color={activeColor}
|
|
size={24}
|
|
/>
|
|
)}
|
|
</Animated.View>
|
|
{shifting ? null : (
|
|
<Animated.View
|
|
style={[
|
|
styles.iconWrapper,
|
|
{ opacity: inactiveIconOpacity },
|
|
]}
|
|
>
|
|
{renderIcon ? (
|
|
renderIcon({
|
|
route,
|
|
focused: false,
|
|
tintColor: inactiveColor,
|
|
})
|
|
) : (
|
|
<Icon
|
|
style={styles.icon}
|
|
name={route.icon}
|
|
color={inactiveColor}
|
|
size={24}
|
|
/>
|
|
)}
|
|
</Animated.View>
|
|
)}
|
|
</Animated.View>
|
|
<Animated.View
|
|
style={[
|
|
styles.labelContainer,
|
|
{
|
|
transform: [{ scale }, { translateY }],
|
|
},
|
|
]}
|
|
>
|
|
<Animated.View
|
|
style={[
|
|
styles.labelWrapper,
|
|
{ opacity: activeLabelOpacity },
|
|
]}
|
|
>
|
|
{renderLabel ? (
|
|
renderLabel({
|
|
route,
|
|
focused: true,
|
|
tintColor: activeColor,
|
|
})
|
|
) : (
|
|
<AnimatedText
|
|
style={[
|
|
styles.label,
|
|
{
|
|
color: activeColor,
|
|
},
|
|
]}
|
|
>
|
|
{getLabelText({ route })}
|
|
</AnimatedText>
|
|
)}
|
|
</Animated.View>
|
|
{shifting ? null : (
|
|
<Animated.View
|
|
style={[
|
|
styles.labelWrapper,
|
|
{ opacity: inactiveLabelOpacity },
|
|
]}
|
|
>
|
|
{renderLabel ? (
|
|
renderLabel({
|
|
route,
|
|
focused: false,
|
|
tintColor: inactiveColor,
|
|
})
|
|
) : (
|
|
<AnimatedText
|
|
style={[
|
|
styles.label,
|
|
{
|
|
color: inactiveColor,
|
|
},
|
|
]}
|
|
>
|
|
{getLabelText({ route })}
|
|
</AnimatedText>
|
|
)}
|
|
</Animated.View>
|
|
)}
|
|
</Animated.View>
|
|
</Animated.View>
|
|
</TouchableWithoutFeedback>
|
|
);
|
|
})}
|
|
</SafeAreaView>
|
|
</AnimatedPaper>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
polyfill(BottomNavigation);
|
|
|
|
export default withTheme(BottomNavigation);
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
},
|
|
bar: {
|
|
elevation: 8,
|
|
overflow: 'hidden',
|
|
alignItems: 'center',
|
|
paddingHorizontal: MIN_SHIFT_AMOUNT * 2,
|
|
},
|
|
items: {
|
|
flexDirection: 'row',
|
|
},
|
|
item: {
|
|
flex: 1,
|
|
// Top adding is 6 and bottom padding is 10
|
|
// The extra 4dp bottom padding is offset by label's height
|
|
paddingVertical: 6,
|
|
},
|
|
ripple: {
|
|
position: 'absolute',
|
|
},
|
|
iconContainer: {
|
|
height: 24,
|
|
width: 24,
|
|
marginHorizontal: 12,
|
|
alignSelf: 'center',
|
|
},
|
|
iconWrapper: {
|
|
...StyleSheet.absoluteFillObject,
|
|
alignItems: 'center',
|
|
},
|
|
icon: {
|
|
backgroundColor: 'transparent',
|
|
},
|
|
labelContainer: {
|
|
height: 18,
|
|
marginTop: 2,
|
|
paddingBottom: 4,
|
|
},
|
|
labelWrapper: {
|
|
...StyleSheet.absoluteFillObject,
|
|
},
|
|
label: {
|
|
fontSize: Platform.OS === 'ios' ? 13 : 14,
|
|
textAlign: 'center',
|
|
backgroundColor: 'transparent',
|
|
},
|
|
});
|