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:
-
iOS:
--
<img width="300" src="https://user-images.githubusercontent.com/24470609/94682743-9a3e3580-034f-11eb-8e90-2d31748bde5c.gif" />
Instead of adding stubs for specific platforms such as Web, Mac OS and Windows, the commit changes the logic to use libraries such as gesture handler and masked view only for the platforms they explictly support. This means that we don't need to manually add all new platforms that aren't supported by these libraries in order for React Navigation to run on those platforms.
Allows you to subscribe to gesture navigation events, we have a custom keyboard that we want to hide and show when gesture is being used to navigate (same as native keyboard)
A lot of times, we want to prompt before leaving a screen if we have unsaved changes. Currently, we need to handle multiple cases to prevent this:
- Disable swipe gestures
- Override the back button in header
- Override the hardware back button on Android
This PR adds a new event which is emitted before a screen gets removed, and the developer has a chance to ask the user before closing the screen.
Example:
```js
React.useEffect(
() =>
navigation.addListener('beforeRemove', (e) => {
if (!hasUnsavedChanges) {
return;
}
e.preventDefault();
Alert.alert(
'Discard changes?',
'You have unsaved changes. Are you sure to discard them and leave the screen?',
[
{ text: "Don't leave", style: 'cancel', onPress: () => {} },
{
text: 'Discard',
style: 'destructive',
onPress: () => navigation.dispatch(e.data.action),
},
]
);
}),
[navigation, hasUnsavedChanges]
);
```
Added `collapsable={false}` to the View in order for the Android to render screens properly. This issue is most probably similar to 9c06a92d09 but fixes it on Android since the View seems to be removed from a native view hierarchy due to not drawing anything. To see the bug go to https://github.com/software-mansion/react-native-screens/issues/544.
## Motivation
Right now `headerMode: float` renders an absolutely-positioned header. To offset the content appropriately, it then measures the height of the header and compensates with a margin. This approach unfortunately doesn't work well for animations.
Before | After
:-------------------------:|:-------------------------:
<img src="http://ashoat.com/jerky_absolute.gif" width="300" /> | <img src="http://ashoat.com/smooth_relative.gif" width="300" />
## Approach
When rendering the header absolutely we want to render it above (after, in sibling order) the content. But when rendering it relatively we want to render it first (before, in sibling order).
The margin compensation code is no longer necessary so I removed it.
## Test plan
I used the `StackHeaderCustomization` example to make sure transitions between `headerTransparent` and `!headerTransparent` looked good. I added a custom (taller) header to test if height transitions looked good, and toggled `headerShown` to make sure that transitioned well too.
Would be open to any other suggestions of things to test!
