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
# 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
Apply layout direction directly on views
This commit changes how RNN handles layout direction and adds support for LOCALE layout direction on Android.
Until now RNN delegated handling layout direction to RN's I18nUtil. This usually is enough but under certain circumstances
layout direction has to be applied directly on relevant views by RNN - usually when there are conflicts with another dependency
which handles RTL.
[V2][Android] destroy views on catalyst instance destroy to fix android crash (#4147)
* fix(NavigationActivity): destroy views on catalyst instance destroy
this fixes redscreen/crash when `ReactInstaceManager#recreateReactContextInBackground()` is called
* refactor(NavigationModule): catalyst destroy without try/catch
This allows users to set splash layouts in the Activities' onCreate method
by passing their splash view to setContentView in onCreate.
```java
public class MainActivity extends NavigationActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
View splash = new View(this);
splash.setBackgroundColor(Color.RED);
setContentView(splash);
}
}
```
Remove SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN flag from root layout (#3654)
The flag was initially set to prevent the root layout from being pushed down when showing full screen modals.
This isn't the right approach and it also messed up keyboard handling.
To prevent the root layout from being pushed down in this scenario we should probably handle window insets
This commit introduces an option to control the way components are pushed into the stack.
When pushing components into a stack, they are pushed the moment they are measured.
If `waitForRender` is true, components will be pushed only after the initial render.
api:
```js
options: {
animations: {
push: {
waitForRender: true
},
showModal: {
waitForRender: true
}
}
}
```
Unmount react views when bundle load completes (#3487)
Unmount react views when bundle load completes
Users providing their own ReactNativeHost implementations should implement BundleDownloadListenerProvider
and make sure they set DevBundleDownloadListener when ReactInstanceManager.
* Set default statusBarBackgroundColor to Black
* Component and Parent controllers now extend ChildController
* Implement return to front logic for ChildControllers
* Apply statusBar color when view appears and returns to front
[Breaking[ Modal refactor
* [Breaking] Showing modal removes the previously visible ViewController from hierarchy
* Modal implementation does not rely on Dialog
* Modal view is added to `content` layout
* Overlay is added to `root` layout, on top of the application's content
* Introduce StackControllerBuilder
* Show modal with animation
* Dismiss modal with animation
* Add previous modal at index 0
* Add root at index 0
* dismissAllModals dismisses only top modal with animation
* Reorder dependencies
Keep vs code happy
* Make markdown files readable on MacDown
* BackHandler compatibility
Give precedence to react's BackHandler when hardware back button is pressed
* f
* Update test
* Restore deps