diff --git a/packages/bottom-tabs/src/types.tsx b/packages/bottom-tabs/src/types.tsx index 7885794c..25172d06 100644 --- a/packages/bottom-tabs/src/types.tsx +++ b/packages/bottom-tabs/src/types.tsx @@ -199,6 +199,7 @@ export type BottomTabBarOptions = { export type BottomTabBarProps = BottomTabBarOptions & { state: TabNavigationState; + descriptors: BottomTabDescriptorMap; navigation: NavigationHelpers; onTabPress: (props: { route: Route }) => void; onTabLongPress: (props: { route: Route }) => void; diff --git a/packages/bottom-tabs/src/views/BottomTabBar.tsx b/packages/bottom-tabs/src/views/BottomTabBar.tsx index c86709e0..a735ab0c 100644 --- a/packages/bottom-tabs/src/views/BottomTabBar.tsx +++ b/packages/bottom-tabs/src/views/BottomTabBar.tsx @@ -9,7 +9,7 @@ import { Dimensions, } from 'react-native'; import SafeAreaView from 'react-native-safe-area-view'; -import { Route } from '@react-navigation/core'; +import { Route, NavigationContext } from '@react-navigation/core'; import TabBarIcon from './TabBarIcon'; import TouchableWithoutFeedbackWrapper from './TouchableWithoutFeedbackWrapper'; @@ -261,6 +261,7 @@ export default class TabBarBottom extends React.Component { render() { const { state, + descriptors, keyboardHidesTabBar, activeBackgroundColor, inactiveBackgroundColor, @@ -337,26 +338,30 @@ export default class TabBarBottom extends React.Component { getButtonComponent({ route }) || TouchableWithoutFeedbackWrapper; return ( - onTabPress({ route })} - onLongPress={() => onTabLongPress({ route })} - testID={testID} - accessibilityLabel={accessibilityLabel} - accessibilityRole={accessibilityRole} - accessibilityStates={accessibilityStates} - style={[ - styles.tab, - { backgroundColor }, - this.shouldUseHorizontalLabels() - ? styles.tabLandscape - : styles.tabPortrait, - tabStyle, - ]} + value={descriptors[route.key].navigation} > - {this.renderIcon(scene)} - {this.renderLabel(scene)} - + onTabPress({ route })} + onLongPress={() => onTabLongPress({ route })} + testID={testID} + accessibilityLabel={accessibilityLabel} + accessibilityRole={accessibilityRole} + accessibilityStates={accessibilityStates} + style={[ + styles.tab, + { backgroundColor }, + this.shouldUseHorizontalLabels() + ? styles.tabLandscape + : styles.tabPortrait, + tabStyle, + ]} + > + {this.renderIcon(scene)} + {this.renderLabel(scene)} + + ); })} diff --git a/packages/bottom-tabs/src/views/BottomTabView.tsx b/packages/bottom-tabs/src/views/BottomTabView.tsx index 9e54fad9..0183de2b 100644 --- a/packages/bottom-tabs/src/views/BottomTabView.tsx +++ b/packages/bottom-tabs/src/views/BottomTabView.tsx @@ -177,6 +177,7 @@ export default class BottomTabView extends React.Component { - onContentHeightChange({ - route: scene.route, - height: e.nativeEvent.layout.height, - }) - : undefined - } - pointerEvents="box-none" - accessibilityElementsHidden={!isFocused} - importantForAccessibility={ - isFocused ? 'auto' : 'no-hide-descendants' - } - style={ - mode === 'float' || options.headerTransparent - ? styles.header - : null - } + value={scene.descriptor.navigation} > - {options.header !== undefined ? ( - options.header === null ? null : ( - options.header(props) - ) - ) : ( -
- )} - + + onContentHeightChange({ + route: scene.route, + height: e.nativeEvent.layout.height, + }) + : undefined + } + pointerEvents="box-none" + accessibilityElementsHidden={!isFocused} + importantForAccessibility={ + isFocused ? 'auto' : 'no-hide-descendants' + } + style={ + mode === 'float' || options.headerTransparent + ? styles.header + : null + } + > + {options.header !== undefined ? ( + options.header === null ? null : ( + options.header(props) + ) + ) : ( +
+ )} + + ); })}