This feature adds the sceneContainerStyle prop to the bottom-tabs navigator, to allow setting styles on the container's view. It's already implemented in the material-top-tabs and drawer navigators, I've simply ported it into the bottom-tabs navigator.
It also fixes this issue:
https://github.com/react-navigation/react-navigation/issues/8076
Co-authored-by: Satyajit Sahoo <satyajit.happy@gmail.com>
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" />
Prefixes should be more flexible for situations like wild card subdomain. On android and IOS we can define wild cards by * but react-navigation does not work, In this PR I added support for RegExp Prefixes.
For Example
```js
{
prefixes: [
/^[^.s]+.example.com/g
],
}
```
I tested this work well.
Closes#8941
Co-authored-by: Satyajit Sahoo <satyajit.happy@gmail.com>
Referenced from 4b26429c49/src/components/MaterialCommunityIcon.tsx (L14)https://callstack.github.io/react-native-paper/getting-started.html
> To get smaller bundle size by excluding modules you don't use, you can use our optional babel plugin. The plugin automatically rewrites the import statements so that only the modules you use are imported instead of the whole library. Add react-native-paper/babel to the plugins section in your babel.config.js for production environment. It should look like this:
> ```
> module.exports = {
> presets: ['module:metro-react-native-babel-preset'],
> env: {
> production: {
> plugins: ['react-native-paper/babel'],
> },
> },
> };
> ```
> If you created your project using Expo, it'll look something like this:
> ```
> module.exports = function(api) {
> api.cache(true);
> return {
> presets: ['babel-preset-expo'],
> env: {
> production: {
> plugins: ['react-native-paper/babel'],
> },
> },
> };
> };
> ```
Closes#8821
Currently, stack router adds a duplicate route when pushing a new route with a key that already exists. This is a buggy behaviour since keys need to be unique in the stack.
This commit fixes the behaviour to bring the existing route with the same key to focus (and merge new params if any) instead of adding a duplicate route.
This adds a compact height mode for iOS devices that are in a compact vertical class (phones in landscape). This is similar to the size change that happens to the header when in landscape mode. Finding a size reference was challenging since most apps lock phones to portrait, but [this answer](https://stackoverflow.com/a/25550871) on Stack Overflow states that it should be 32 pts.
I asked yesterday in the Discord chat if there would be interest in this and some other enhancements here, but no on replied, so I thought I would go ahead and open this to at least start a discussion.
What just randomly reading, but I think there's a typo
```
['ab', 'aba'].sort((a, b) => {
if (a.startsWith(b)) {
return -1;
}
if (b.startsWith(a)) {
return 1;
}
});
(2) ["aba", "ab"]
['ab', 'a'].sort((a, b) => {
if (a.startsWith(b)) {
return -1;
}
if (b.startsWith(a)) {
return 1;
}
});
(2) ["ab", "a"]
```
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.
React Native 0.62 removes the deprecated `accessibilityStates` property and replaces it with an `accessibilityState` object instead. This PR adds the new property where needed, but leaves the old one in place for backwards compatibility. Without the change, the selected tab in BottomTabNavigator isn't announced properly in VoiceOver.
In the process of upgrading from v4, I noticed a regression.
In the past, the function form of `tabBarLabel` did get an `orientation: 'landscape' | 'portrait'`, this is no longer the case.
However, when using a custom Text rendering, we need to apply a margin to the text in horizontal mode.
Since the orientation/horizontal state is decided based on internal heuristics, It is a huge pain with a high bug potential when reimplementing that detection myself.
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)
