Issue-2662: Add support for testID and accessibilityLabel for tab bar items (#2684)

examples/NavigationPlayground/js/SimpleTabs.js

@@ -28,6 +28,10 @@ const MyHomeScreen = ({ navigation }) => (
 );
 
 MyHomeScreen.navigationOptions = {
+  tabBarTestIDProps: {
+    testID: 'TEST_ID_HOME',
+    accessibilityLabel: 'TEST_ID_HOME_ACLBL',
+  },
   tabBarLabel: 'Home',
   tabBarIcon: ({ tintColor, focused }) => (
     <Ionicons

src/TypeDefinition.js

@@ -336,6 +336,7 @@ export type NavigationTabScreenOptions = {
         *
       >),
   tabBarVisible?: boolean,
+  tabBarTestIDProps?: { testID?: string, accessibilityLabel?: string },
   tabBarOnPress?: (
     scene: TabScene,
     jumpToIndex: (index: number) => void

src/views/TabView/TabBarBottom.js

@@ -40,6 +40,7 @@ type Props = {
   getOnPress: (
     scene: TabScene
   ) => (scene: TabScene, jumpToIndex: (index: number) => void) => void,
+  getTestIDProps: (scene: TabScene) => (scene: TabScene) => any,
   renderIcon: (scene: TabScene) => React.Element<*>,
   style?: ViewStyleProp,
   labelStyle?: TextStyleProp,
@@ -135,12 +136,19 @@ export default class TabBarBottom extends PureComponent<
     );
   };
 
+  _renderTestIDProps = (scene: TabScene) => {
+    const testIDProps =
+      this.props.getTestIDProps && this.props.getTestIDProps(scene);
+    return testIDProps;
+  };
+
   render() {
     const {
       position,
       navigation,
       jumpToIndex,
       getOnPress,
+      getTestIDProps,
       activeBackgroundColor,
       inactiveBackgroundColor,
       style,
@@ -166,9 +174,13 @@ export default class TabBarBottom extends PureComponent<
             outputRange: (outputRange: Array<string>),
           });
           const justifyContent = this.props.showIcon ? 'flex-end' : 'center';
+          const extraProps = this._renderTestIDProps(scene) || {};
+          const { testID, accessibilityLabel } = extraProps;
           return (
             <TouchableWithoutFeedback
               key={route.key}
+              testID={testID}
+              accessibilityLabel={accessibilityLabel}
               onPress={() =>
                 onPress ? onPress(scene, jumpToIndex) : jumpToIndex(index)}
             >

src/views/TabView/TabView.js

@@ -104,6 +104,15 @@ class TabView extends PureComponent<void, Props, void> {
     return options.tabBarOnPress;
   };
 
+  _getTestIDProps = ({ route }: TabScene) => {
+    const options = this.props.router.getScreenOptions(
+      this.props.childNavigationProps[route.key],
+      this.props.screenProps || {}
+    );
+
+    return options.tabBarTestIDProps;
+  };
+
   _renderIcon = ({ focused, route, tintColor }: TabScene) => {
     const options = this.props.router.getScreenOptions(
       this.props.childNavigationProps[route.key],
@@ -133,6 +142,7 @@ class TabView extends PureComponent<void, Props, void> {
         screenProps={this.props.screenProps}
         navigation={this.props.navigation}
         getLabel={this._getLabel}
+        getTestIDProps={this._getTestIDProps}
         getOnPress={this._getOnPress}
         renderIcon={this._renderIcon}
         animationEnabled={animationEnabled}