Allow to update props for a specific component (#5612)
This commit adds support to update props of screen or custom button/title via the mergeOptions api.
```js
Navigation.mergeOptions('myComponentId', {
passProps: {
text: 'new value'
}
});
```
# 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
Fix setStackRoot crash when called with the same id (#5154)
When a Stack’s root was set with an id of one of the Stack’s current children, there was a crash
since the wrong elements were removed from the stack.
This commit fixes this by creating a new stack when setStackRoot is called, and destroying all ViewControllers from the previous Stack.
Fixes #5117
* 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
The following PR introduces improved support for Context api and other api's which wrap the root view.
## Context api
Navigation.registerComponent('navigation.playground.ContextScreen', () => (props) => (
<TitleContext.Provider value={'Title from Provider'}>
<ContextScreen {...props} />
</TitleContext.Provider>
), () => ContextScreen);
## Redux
Navigation.registerComponent('navigation.playground.ReduxScreen', () => (props) => (
<Provider store={reduxStore}>
<ReduxScreen {...props} />
</Provider>
), () => ReduxScreen);
## Plain Component - not changed
Navigation.registerComponent('navigation.playground.MyScreen', () => MyScreen);
This PR also upgrades the TypeScript version to 3.2.0 and RN version used in the playground app to 0.57.7
* New Android build flavor - `reactNative57_7`
* Unit test coverage is disabled, for some reason it broke after upgrading to RN 0.57.7
Lists are a crucial component to almost every single app out there. This example contains a flatlist inside a bottomTab layout with a sidemenu too (basically as complicated as a screen would get).
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.
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
}
}
}
```
[v2][ios11, ios12] Add searchBar option for topBar (#3303)
* [ios11+] Add searchBar option for topBar
* Fix formatting and linter issues
* Add docs about topBar.searchBar
* Fix missing semicolons
* Revert prettier changes
* Add js tests for onSearchBarUpdated to achieve 100% coverage
* Mark searchBar test as :ios: specific
* V2: Peek and pop
* Add event when preview is dismissed in non commit mode
* tslint
* Refactor playground. Document preview api
* Added width prop
* Implement hybrid push/preview button
* Fixing small linting errors
* Work in progress
* Arbitary changes
* Improvements on API
* Cleanup RNNSplitViewController, allow mergeOptions
* Added documentation and better playground example
* Adding tests for coverage
* Find out why this test is failing.
* Only show split view on iOS
* Add test back in
* Update docs
Outdated onAppLaunched part is changed
I just started to a project with v2 and I realized this part of the documentation was wrong. I searched a bit and find this 2 commits:
104e3f97fd1d2680c5aa
So, that part is probably forgotten
* Modal unmount e2e test
* Modal unmount e2e test changes.
* 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
* basic fab
* fab menu
* fab menu clicks
* pop lifecycle
* options lifecycle
* refactoring
* refactor
* parse unit tests
* refacotr
* fix test
* align
* fab unit tests
* more tests
* size
* hide on scroll in progress
* options
* menu collapse
* parser test
* merge v2
* refactor
* refactor
* more refactor
* more refactor
* fix
* more refactoring
* refactor
* refactor
* fix
* fix
* fixed undefined key
* refactor
* refactor
* refactort
V2 side menu visibility ios (toggleDrawer) (#2324)
* side menu visibility options
* e2e fix
* Rename ContainerView related classes (#2328)
* Rename ContainerView related classes
* fix test
* rename ContainerViewCreator
* splitted showSideMenu into two methods
Tal Magen
Yogev Ben David
Guy Carmeli
Guy Carmeli
Yogev Ben David
eladgel
Alberto Blanco
Dima Loktev
Birkir Rafn Guðjónsson
Yusuf YILDIRIM
Roman Kozlov
Daniel Zlotin