Merge v5 into master
Highlights of this release
* Easier installation
* autolink and reac-native link support
* Shared Element Transition - reimplemented from scratch and new API
* [iOS] showModal animation api parity
* [Android] Animation values are now declared in dp
* [iOS] deprecate topBar.drawBehind
* [Android] RNN is migrating to Kotlin
closes #5904
Send componentType field in componentDidAppear and componentDidDisappear events.
The new field is either:
- TopBarButton
- TopBarTitle
- TopBarBackground
- Component
# Changes
* Support RN 0.60
* Migrate to AndroidX
* Improve draw behind StatusBar (Preparation for #4258)
* Don't push BottomTabs when keyboard is displayed (Fixes #4005, #3424)
- It won't be needed to toggle the BottomTabs when Keyboard is visible
* BottomTab badge and dot indicator are not animated by default on Android (parity with iOS)
# Updating from v2
v3 is currently in alpha. To update simply npm install `3.0.0-alpha.11` - `npm install --save react-native-navigation@3.0.0-alpha.11`.
Breaking changes are outlined below.
## Layout system changes on **Android**
* Parent layouts (BottomsTabs, Stack, SideMenu) are always laid out behind the StatusBar.
* Components (`component` and `externalComponent`) are measured and offset according to the StatusBar.
In this release, We're changing the layout system in order to provide better support for immersive and full screen apps. In this release we've improved support for drawing behind the StatusBar, next we'll address drawing behind the NavigationBar.
Use the `drawBehind` and `translucent` options to control the StatusBar
```js
statusBar: {
drawBehind: true, // will draw a screen behind the StatusBar
translucent: true // Usually you'll want to have drawBehind: true when this is true
}
```
While this isn't a breaking API change - there are a few breaking side effects.
### How will my app be effected
1. When the keyboard is opened, BottomTabs will now be drawn behind the keyboard and won't shift upwards. This is in parity with the current behaviour in iOS. For the most part, this isn't a breaking change. Toggling BottomTabs when TextInput's focus changes won't be needed anymore.
2. While parent controllers are drawn behind the StatusBar, their background isn't.
This means that when transitioning from a destinations drawn under the StatusBar to a destination drawn behind it, the application's default background color will be visible behind the StatusBar.
If you application's theme is dark, you might want to change the `windowBackground` property to mitigate this:
Add the following to your application's `style.xml`
```xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">@color/backgroundColor</item>
</style>
<!--This is your application's default background color.
It will be visible when the app is first opened (while the splash layout is visible)
and when transitioning between a destination a screen drawn under the StatusBar to
a destination drawn behind it-->
<item name="backgroundColor" type="color">#f00</item>
</resources>
```
## AndroidX migration
We've migrated RNN to AndroidX, please follow migration instructions in the react-native repo.
## Removed SyncUiImplementation
[SyncUiImplementation](https://github.com/wix/react-native-navigation/blob/master/lib/android/app/src/reactNative57WixFork/java/com/reactnativenavigation/react/SyncUiImplementation.java) was used to overcome a bug in RN's UiImplementation. This workaround was added to RN's `UiImplementation` in RN 0.60 (thanks @SudoPlz) and can be removed from RNN.
If you're using `SyncUiImplementation` your app will fail to compile after upgrading to v3. Simply remove the following code from your `MainApplication.java`
```diff
- import com.facebook.react.uimanager.UIImplementationProvider;
- import com.reactnativenavigation.react.SyncUiImplementation;
- @Override
- protected UIImplementationProvider getUIImplementationProvider() {
- return new SyncUiImplementation.Provider();
- }
```
## BottomTab badge and dot indicator are not animated by default on Android (parity with iOS)
Showing and hiding badge and dot indicator are now not animated by default. Badge animation is now controlled with the `bottomTab.animateBadge` property and dot indicator with `bottomTab.dotIndicator.animate` property.
#### The following option will show a badge with animation
```js
bottomTab: {
badge: 'new,
animateBadge: true
}
```
#### The following option will show a dot indicator with animation
```js
bottomTab: {
dotIndicator: {
visible: true,
animate: true
}
}
```
closes #5228
* Cleanup and reorganise playground app
* Separated tests into three categories
1. Layouts - layout specific tests and feature showcase
2. Options - options related tests; interactions between static and dynamic options, merge options etc
3. Navigation - general navigation features; Orientation handling, events, Overlay etc
* Fixed a few Android bugs
1. testID wasn’t applied on TopBar react buttons
2. static options were disregarded when creating initial BottomTab options
3. Trying to open a none existent SideMenu would result in a crash
* Fix e2e tests
* Fix lint
* Few fixes + split push from SideMenu test into two tests
* Fixes e2e
Add waitForRender options for setRoot animation and TopBar components
When set, the ui will become visible only after the root screen and TopBar components have been rendered.
Usage
Add the following to the root layout’s options, or to its child
```
animations: {
setRoot: {
waitForRender: true
}
}
```
TopBar components (Title, background, buttons) can be synced as well by adding `waitForRender: true`, for example:
```
component: {
name: 'navigation.playground.CustomTopBar',
alignment: 'center',
waitForRender: true,
}
```
Add YellowBoxed back to ReactRootViews before unmount
Apparently, UiImplementation doesn't like it when views disappear from hierarchy unexpectedly.
As yellow boxes are added to all ReactRootViews, we remove them from TopBar components.
When these components got unmounted, UiImplementation tried to remove the yellow box and since it
couldn't find it - it crashed.
This commit simply adds the yellow box before views are unmounted.
Unmount buttons when corresponding screen is unmounted
Currently buttons were unmounted each time a screen was pushed to the stack.
As we're clearing props when screens are unmounted from the prop store - when a screen
was popped to - its buttons's props were undefined.
This commit changes things so that buttons are unmounted when buttons are set
using mergeOptions and when the corresponding screen is unmounted.
* Revert "merging buttons fix"
This reverts commit 74077bbc55.
* Revert "fix undefined buttons"
This reverts commit e3b4d15a06.
* Revert "fix e2e"
This reverts commit 05b3f5808f.
* Revert "Handle merge buttons style"
This reverts commit 9c705402eb.
* Add background component with MATCH_PARENT height
* temporary solution for merging button color
This commit introduces two temporary options to control button colors
* rightButtonColor
* leftButtonColor
These options can be used to color buttons. Colors defined in buttons take
precedence over these two options.
* Get buttonColor options from resolved options
* leftButtonColor & rightButtonColor support - iOS
* Disabled color
* disabled buttons color support
* Rebase fixes
* empty commit
* Implementation of passing multiple arguments to ImageLoader in order to avoid asynchronous issues and for performance as BottomBar re-creates all views every time an item is added
* removed redundant checks for testId
* Implementation of passing multiple arguments to ImageLoader in order to avoid asynchronous issues and for performance as BottomBar re-creates all views every time an item is added
* removed redundant checks for testId
* pass props for topBar background component
* refactored custom components
* pass props for topBar background component
* refactored custom components
* refactored RNNOptions object
* Use margin to control component position relative to TopBar
RelativeLayout rules caused excessive CPU usage due to issues with RN's
keyboard detection mechanism (based on global layout listener)
* Skip custom transition e2e on Android
* Improved the clarity of the top-level API doc (#2984)
I clarified some of the language here so that it is easier for the beginner to understand. (It was a little bit awkward before)
* Increase gradle daemon process memory
* Disable Orientation test on Android
* Fix SideMenu e2e
* Fix popTo
* Use margin instead of RelativeLayout rules to align component to BottomTabs
Rules caused excessive CPU usage due to RN issue with global layout listener
and keyboard visibility detection.
* Update README.md
for triggering build
* Update README.md
* Consolidate pop and animatePop
* Update top-level-api.md ... more copyediting. (#3002)
Further clarification of some of the top level API stuff.
* popTo animates top screen
* Refactor component options on Android
* Stop processing passProps from options
* removed comments
* Refactor TopBar options, introduce title options
* Update background to new api
* Refactored topBar options on iOS
* Initial react component in TitleBar android
* set height to react view in TitleBar
* fix tests and lint
* ios unit tests fix
* TopBar custom buttons initial commit
* f
* Consolidate TopBarButtonController and TopBarButton
* Move Toolbar related stuff to TitleBar
* TitleBarTest
* More tests