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
The index change event fires after swipe animation. If you quickly navigate to a new screen in stack before animation finishes, the index change event will fire after the previous navigation event. By this time, the tab navigator is not focused anymore. Using the JUMP_TO action instead of NAVIGATE avoids this issue.
Closes#16
When the statusbar is not translucent, the view resizes when the keyboard is shown on Android. The tab bar stays above the keyboard. This PR makes the tab bar hide automatically when the keyboard is shown.
The behaviour is enabled by default and can be disabled with `keyboardHidesTabBar: false` in `tabBarOptions`
### Motivation
Exposing `accessibilityRole` and `accessibilityStates` through props in the same way as `accessibilityLabel`. This allows screen readers to announce things like: `Selected. Banana. Button.`
Reasonable defaults were provided, however, consumers can provide custom overrides in the cases where the role might be `imagebutton` or the state might be `disabled`.
### Test plan
Select a button with VoiceOver (iOS) or Talkback (Android) enabled. The screen reader should read something like `Selected. <AccessibilityLabel>. Button.` or something slightly different depending on which platform you are on. Buttons that are not focused should not have `Selected` announced.
BREAKING CHANGES:
- Animated nodes are not from `react-native-reanimated`, which means custom tab bars need to be updated
- Changed behaviour: `activeTintColor` and `inactiveTintColor` also controls opacity now
- Removed props: `animationsEnabled`, `optimizationsEnabled`
- Dropped support for React < 16.3, which means the minimum supported React Native version is 0.56
New features:
- Added prop: `lazyPlaceholderComponent`
When using react-native screens we don't need to hide invisible tabs using opacity. This in conjunctions with "active" property normally used by screens where causing blinking effect when new tabs got activated as in some cases opacity would update in a different UI transaction (this would only surface on Android).
This change removes the use of `opacity` style when react-native-screens are active and solely relies on `active` property in that case. When rn-screens are off we fallback to rendering `View` and use `opacity` as before (this is now done in `ResourceSavingScene`).
### Motivation
Fix blinking effect on Android when switching tabs [#5382](https://github.com/react-navigation/react-navigation/issues/5382)
### Test plan
1) Run RN-screens sample app with and w/o screens enabled or try the code from this snack -> https://snack.expo.io/rklSkM-xE
2) Try this on a low end Android device for consistent repro
3) Switch between tabs and see the content disappear for one frame with screens ON when this change isn't active and see this issue gone with this change applied
This change adds support for react-native-screens. Screens package makes it possible to use native primitives to render tabs container and its scenes such that they get properly mounted/unmounted when not visible.
The support has only been added to `createBottomTabNavigator` as the material one renders its own container that's a part of a different package (react-native-tab-view).
