diff --git a/examples/NavigationPlayground/js/SimpleTabs.js b/examples/NavigationPlayground/js/SimpleTabs.js index a74bdd2..e084fd1 100644 --- a/examples/NavigationPlayground/js/SimpleTabs.js +++ b/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 }) => ( ), tabBarVisible?: boolean, + tabBarTestIDProps?: { testID?: string, accessibilityLabel?: string }, tabBarOnPress?: ( scene: TabScene, jumpToIndex: (index: number) => void diff --git a/src/views/TabView/TabBarBottom.js b/src/views/TabView/TabBarBottom.js index f2d6e9b..3a9eb7c 100644 --- a/src/views/TabView/TabBarBottom.js +++ b/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), }); const justifyContent = this.props.showIcon ? 'flex-end' : 'center'; + const extraProps = this._renderTestIDProps(scene) || {}; + const { testID, accessibilityLabel } = extraProps; return ( onPress ? onPress(scene, jumpToIndex) : jumpToIndex(index)} > diff --git a/src/views/TabView/TabView.js b/src/views/TabView/TabView.js index 1c428f3..170b857 100644 --- a/src/views/TabView/TabView.js +++ b/src/views/TabView/TabView.js @@ -104,6 +104,15 @@ class TabView extends PureComponent { 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 { screenProps={this.props.screenProps} navigation={this.props.navigation} getLabel={this._getLabel} + getTestIDProps={this._getTestIDProps} getOnPress={this._getOnPress} renderIcon={this._renderIcon} animationEnabled={animationEnabled}