This commit adds a check to detect if the screen content fills the available body, and if yes, then it adjusts the styles so that scrolling triggers a scroll on the body which hides the address bar in browser.
Tested on Safari in iOS and Chrome on Android.
This behaviour can be overriden by the user by specifying `cardStyle: { flex: 1 }`, which will keep both the header and the address bar always visible.
Gesture handler doesn't work great on Web and causes issues such as disabling text selection even when not enabled. So we stub it out. It also reduces bundle size on web.
* Add padding bottom to ios presentation modal
Because of the translateY moving the screen out to the bottom of view by 10 pt, these 10pt are hidden under the screen, or steal this size from the safe area. To avoid cutting elements, the size of the screen could be decreased by the `topOffset` using padding on the bottom. Fixes#7856
* Update packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx
Co-Authored-By: Serhii Vecherenko <SDSLeon999@gmail.com>
Co-authored-by: Satyajit Sahoo <satyajit.happy@gmail.com>
Co-authored-by: Serhii Vecherenko <SDSLeon999@gmail.com>
seems `react-native-screens` doesn't handle active screens properly and shows a blank page instead on web when a number is specified in the `active` prop.
closes#7485
I find it sometimes useful to define overlay renderer on my own. Eg. I needed to replace the background with BlurView and with this API I find it quite easy
Co-authored-by: Satyajit Sahoo <satyajit.happy@gmail.com>
The problem here is that when we scroll back really fast, even though velocity is negative, `Math.abs(translation + velocity * gestureVelocityImpact)` will end up bigger than `distance / 2`.
I removed the `Math.abs`, I think it's not necessary. When `translation + velocity * gestureVelocityImpact` is negative, it's also < `distance / 2` and we should just close the screen.
Closes#6782
the previously used fort weight of 500 would effectively be converted to `fontWeight: bold` because of https://github.com/facebook/react-native/pull/25341
this fixes the title appearance to look as customary
This adds ability to listen to events from the component where the navigator is defined, even if the screen is not rendered.
```js
<Tabs.Screen
name="Chat"
component={Chat}
options={{ title: 'Chat' }}
listeners={{
tabPress: e => console.log('Tab press', e.target),
}}
/>
```
Closes#6756
