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)}
-
+
);
})}