fix: fix back button not working in header

react-navigation · Aug 18, 2019 · 73424b8 · 73424b8
1 parent 51b1069
commit 73424b8
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 12 deletions.
diff --git a/packages/stack/src/views/Header/HeaderSegment.tsx b/packages/stack/src/views/Header/HeaderSegment.tsx
@@ -295,6 +295,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
           <View pointerEvents="box-none" style={styles.content}>
             {onGoBack ? (
               <Animated.View
+                pointerEvents="box-none"
                 style={[styles.left, leftButtonStyle, leftContainerStyle]}
               >
                 {left({
@@ -315,6 +316,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
             ) : null}
             {currentTitle ? (
               <Animated.View
+                pointerEvents="box-none"
                 style={[
                   Platform.select({
                     ios: null,
@@ -336,6 +338,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
             ) : null}
             {right ? (
               <Animated.View
+                pointerEvents="box-none"
                 style={[styles.right, rightButtonStyle, rightContainerStyle]}
               >
                 {right({ tintColor: headerTintColor })}

diff --git a/packages/stack/src/views/Stack/Stack.tsx b/packages/stack/src/views/Stack/Stack.tsx
@@ -353,7 +353,7 @@ export default class Stack extends React.Component<Props, State> {
                 focusedOptions.headerStyleInterpolator !== undefined
                   ? focusedOptions.headerStyleInterpolator
                   : defaultTransitionPreset.headerStyleInterpolator,
-              style: [styles.header, styles.floating],
+              style: styles.floating,
             })
           : null}
       </React.Fragment>
@@ -366,10 +366,6 @@ const styles = StyleSheet.create({
     flex: 1,
     overflow: 'hidden',
   },
-  header: {
-    // This is needed to show elevation shadow
-    zIndex: Platform.OS === 'android' ? 1 : 0,
-  },
   floating: {
     position: 'absolute',
     top: 0,

diff --git a/packages/stack/src/views/TouchableItem.tsx b/packages/stack/src/views/TouchableItem.tsx
@@ -47,17 +47,14 @@ export default class TouchableItem extends React.Component<Props> {
       Platform.OS === 'android' &&
       Platform.Version >= ANDROID_VERSION_LOLLIPOP
     ) {
-      const { style, ...rest } = this.props;
+      const { style, pressColor, borderless, children, ...rest } = this.props;
+
       return (
         <TouchableNativeFeedback
           {...rest}
-          style={null}
-          background={TouchableNativeFeedback.Ripple(
-            this.props.pressColor,
-            this.props.borderless
-          )}
+          background={TouchableNativeFeedback.Ripple(pressColor, borderless)}
         >
-          <View style={style}>{React.Children.only(this.props.children)}</View>
+          <View style={style}>{React.Children.only(children)}</View>
         </TouchableNativeFeedback>
       );
     } else if (Platform.OS === 'ios') {