fix: provide navigation prop in header

react-navigation · Sep 17, 2019 · 30e510d · 30e510d
1 parent 114a5dc
commit 30e510d
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 48 deletions.
diff --git 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<ParamListBase>;
   onTabPress: (props: { route: Route<string> }) => void;
   onTabLongPress: (props: { route: Route<string> }) => void;

diff --git 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<Props, State> {
   render() {
     const {
       state,
+      descriptors,
       keyboardHidesTabBar,
       activeBackgroundColor,
       inactiveBackgroundColor,
@@ -337,26 +338,30 @@ export default class TabBarBottom extends React.Component<Props, State> {
               getButtonComponent({ route }) || TouchableWithoutFeedbackWrapper;
 
             return (
-              <ButtonComponent
+              <NavigationContext.Provider
                 key={route.key}
-                onPress={() => 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)}
-              </ButtonComponent>
+                <ButtonComponent
+                  onPress={() => 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)}
+                </ButtonComponent>
+              </NavigationContext.Provider>
             );
           })}
         </SafeAreaView>

diff --git 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<Props, State> {
       <TabBarComponent
         {...tabBarOptions}
         state={state}
+        descriptors={descriptors}
         navigation={navigation}
         onTabPress={this.handleTabPress}
         onTabLongPress={this.handleTabLongPress}

diff --git a/packages/compat/src/createSwitchNavigator.tsx b/packages/compat/src/createSwitchNavigator.tsx
diff --git a/packages/stack/src/views/Header/HeaderContainer.tsx b/packages/stack/src/views/Header/HeaderContainer.tsx
@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
-import { Route, ParamListBase } from '@react-navigation/core';
+import {
+  NavigationContext,
+  Route,
+  ParamListBase,
+} from '@react-navigation/core';
 import { StackNavigationState } from '@react-navigation/routers';
 
 import Header from './Header';
@@ -92,36 +96,40 @@ export default function HeaderContainer({
         };
 
         return (
-          <View
+          <NavigationContext.Provider
             key={scene.route.key}
-            onLayout={
-              onContentHeightChange
-                ? e =>
-                    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)
-              )
-            ) : (
-              <Header {...props} />
-            )}
-          </View>
+            <View
+              onLayout={
+                onContentHeightChange
+                  ? e =>
+                      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)
+                )
+              ) : (
+                <Header {...props} />
+              )}
+            </View>
+          </NavigationContext.Provider>
         );
       })}
     </View>