diff --git a/packages/tabs/example/src/BottomTabs.js b/packages/tabs/example/src/BottomTabs.js index f530b83a..919d6b1b 100644 --- a/packages/tabs/example/src/BottomTabs.js +++ b/packages/tabs/example/src/BottomTabs.js @@ -2,6 +2,7 @@ import * as React from 'react'; import { createBottomTabNavigator } from 'react-navigation-tabs'; import { MaterialIcons } from '@expo/vector-icons'; import PhotoGrid from './shared/PhotoGrid'; +import TouchableBounce from 'react-native/Libraries/Components/Touchable/TouchableBounce'; const tabBarIcon = name => ({ tintColor }) => ( @@ -10,6 +11,7 @@ const tabBarIcon = name => ({ tintColor }) => ( class Album extends React.Component { static navigationOptions = { tabBarIcon: tabBarIcon('photo-album'), + tabBarButtonComponent: TouchableBounce, }; render() { @@ -20,6 +22,7 @@ class Album extends React.Component { class Library extends React.Component { static navigationOptions = { tabBarIcon: tabBarIcon('photo-library'), + tabBarButtonComponent: TouchableBounce, }; render() { @@ -30,6 +33,7 @@ class Library extends React.Component { class History extends React.Component { static navigationOptions = { tabBarIcon: tabBarIcon('history'), + tabBarButtonComponent: TouchableBounce, }; render() { @@ -40,6 +44,7 @@ class History extends React.Component { class Cart extends React.Component { static navigationOptions = { tabBarIcon: tabBarIcon('shopping-cart'), + tabBarButtonComponent: TouchableBounce, }; render() { diff --git a/packages/tabs/src/navigators/createBottomTabNavigator.js b/packages/tabs/src/navigators/createBottomTabNavigator.js index 02db256d..11bebd80 100644 --- a/packages/tabs/src/navigators/createBottomTabNavigator.js +++ b/packages/tabs/src/navigators/createBottomTabNavigator.js @@ -57,6 +57,7 @@ class TabNavigationView extends React.PureComponent { screenProps, getLabelText, getAccessibilityLabel, + getButtonComponent, getTestID, renderIcon, onTabPress, @@ -80,6 +81,7 @@ class TabNavigationView extends React.PureComponent { screenProps={screenProps} onTabPress={onTabPress} getLabelText={getLabelText} + getButtonComponent={getButtonComponent} getAccessibilityLabel={getAccessibilityLabel} getTestID={getTestID} renderIcon={renderIcon} diff --git a/packages/tabs/src/utils/createTabNavigator.js b/packages/tabs/src/utils/createTabNavigator.js index cdb0cdf4..26463852 100644 --- a/packages/tabs/src/utils/createTabNavigator.js +++ b/packages/tabs/src/utils/createTabNavigator.js @@ -14,6 +14,7 @@ export type InjectedProps = { getLabelText: (props: { route: any }) => any, getAccessibilityLabel: (props: { route: any }) => string, getTestID: (props: { route: any }) => string, + getButtonComponent: (props: { route: any }) => ?React.Component<*>, renderIcon: (props: { route: any, focused: boolean, @@ -56,6 +57,18 @@ export default function createTabNavigator(TabView: React.ComponentType<*>) { return null; }; + _getButtonComponent = ({ route }) => { + const { descriptors } = this.props; + const descriptor = descriptors[route.key]; + const options = descriptor.options; + + if (options.tabBarButtonComponent) { + return options.tabBarButtonComponent; + } + + return null; + }; + _getLabelText = ({ route }) => { const { descriptors } = this.props; const descriptor = descriptors[route.key]; @@ -151,6 +164,7 @@ export default function createTabNavigator(TabView: React.ComponentType<*>) { any, getAccessibilityLabel: (props: { route: any }) => string, + getButtonComponent: ({ route: any }) => any, + getLabelText: ({ route: any }) => any, getTestID: (props: { route: any }) => string, renderIcon: any, dimensions: { width: number, height: number }, @@ -46,6 +47,22 @@ const isIOS11 = majorVersion >= 11 && isIos; const DEFAULT_MAX_TAB_ITEM_WIDTH = 125; +class TouchableWithoutFeedbackWrapper extends React.Component<*> { + render() { + const { onPress, testID, accessibilityLabel, ...props } = this.props; + + return ( + + + + ); + } +} + class TabBarBottom extends React.Component { static defaultProps = { activeTintColor: '#3478f6', // Default active tint color in iOS 10 @@ -171,7 +188,6 @@ class TabBarBottom extends React.Component { activeBackgroundColor, inactiveBackgroundColor, onTabPress, - jumpTo, style, tabStyle, } = this.props; @@ -203,30 +219,30 @@ class TabBarBottom extends React.Component { ? activeBackgroundColor : inactiveBackgroundColor; + const ButtonComponent = + this.props.getButtonComponent({ route }) || + TouchableWithoutFeedbackWrapper; + return ( - { - onTabPress({ route }); - jumpTo(route.key); - }} + onPress={() => onTabPress({ route })} testID={testID} accessibilityLabel={accessibilityLabel} + style={[ + styles.tab, + { backgroundColor }, + this._shouldUseHorizontalLabels() + ? styles.tabLandscape + : styles.tabPortrait, + tabStyle, + ]} > - + {this._renderIcon(scene)} {this._renderLabel(scene)} - + ); })}