mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-01-12 22:51:18 +08:00

Files

Listi d6cac6713a fix: fix header buttons not pressable when headerTransparent=true & headerMode=float (#8804 )

Motivation
--
Previously when using `headerMode="float"` with headerTransparent set to true, we cant press header buttons in Android. This PR fixes this. (resolves #8731 )
Been doing some debugging and found out that this is caused by `HeaderContainer` being set as `absolute`. Initially it didn't have width & height in Android when it's set to default, that's why we can't access the children.
So, the solution in this PR is to define the height by using headerHeight. But, since we can't access headerHeight from header, Im using local state for keeping up with the headerHeight. Or should I move the HeaderHeight provider out of StackContainer? I'm not sure, since I think it was intended to be kept inside the StackContainer

Test Plan
--
With this config, now the header button can be clicked. Tested in both platform
```typescript
  <Stack.Navigator
    headerMode="float"
    screenOptions={{
      headerTransparent: true
    }}
  >
     <Stack.Screen  
      name="Home Screen"
      component={Home}
      />
      <Stack.Screen  
      name="Details Screen"
      component={Details}
      />
  </Stack.Navigator>
```

Android:
-
![Kapture 2020-09-30 at 19 01 21](https://user-images.githubusercontent.com/24470609/94682575-5b0fe480-034f-11eb-880a-318643d4eb00.gif)

iOS:
--
<img width="300" src="https://user-images.githubusercontent.com/24470609/94682743-9a3e3580-034f-11eb-8e90-2d31748bde5c.gif" />

2020-10-23 01:52:34 +02:00