This new updateProps command allows to update props for a component registered with Navigation.registerComponent.
The updated props are handled by shouldComponentUpdate and componentDidUpdate lifecycle methods.
This commit builds upon the work done in 291f16177d and is a breaking change.
## What this PR is about?
Finally all strict rules are enables for TypeScript compiler! 🎉 Basically previously `noImplicitAny` was turned off but now it plus all strict rules are turned ON! 💋
## Some highlights of the changes
- `Element` renamed internally to `SharedElement` to make more sense what is it
- `LayoutTreeParser`'s responsibility is now to do all `id` related stuff. Previously it was spread between `LayoutTreeCrawler` and `LayoutTreeParse` so it is more simple now
- clean up a lot of tests because they were testing duplicate stuff that was covered by other tests already
- removed all usages of `static get options` and replaces them with `static options`. This is how it is in the docs plus you cannot have `static get options(passProps)` because it is impossible to have getter with parameters.
- `registerCommandListener` documentation was wrong so that is fixed
- use `uniqueIdProvider` much as possible so we are not duplicating logic
- add `appRegistryService` which makes `componentRegistry` cleaner and also makes testing easier
- type return type of `NativeEventsReceiver.ts` correctly
- add types to `LayoutTreeParser`
- `ComponentRegistry.test.tsx` refactor so it tests only things that is should and not implementation of React Native functions
- fix type `center` prop to be required on `LayoutSideMenu`
- add missing layout props `topTabs` and `externalComponent`
- lots of minor cleaning
## Goal of this PR
The goal of this PR is to make `OptionsProcessor.ts` great again 🇺🇸 . To me it was total mess including tests.
## What was wrong or funky?
1. the tests tested if React Native's `processColor` color works as it should even though react native has [multiple tests for this](https://github.com/facebook/react-native/blob/master/Libraries/StyleSheet/__tests__/processColor-test.js). Aka we don't have to test React Native's functions :D
2. `LayoutTreeCrawler.test.ts` was testing `OptionsProcessor`s functionality so it was removed now
3. Lots of small things since this was done before putting `noImplicitAny` to true so it wasn't made TypeScript in mind
## Result
Now `OptionsProcessor.ts` should be
1. code way more clear
2. tests are testing only things that they should
3. tests are written in clear way
4. it is easy to see from the tests what the whole function does
5. type safe for TypeScript `noImplicitAny` (when we actually turn it on)
This PR adds support for setting stack root with multiple children, which is to be expected as stack can be initialised with multiple children.
Closes #4441
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
* Refactor peek and pop
* Rollback some XCode stuff
* Added tests for touchablePreview event
* Also fixing searchbarcancelpressed event
* Making sure tests work
[v2] (restore) Typings for styling options and layouts (#3931)
* Added all styling options and WIP comments
* Completed screen options and layout types
* Added typings to the main entrypoint
* Added buttons too
* Optional fields
* Fixes js unit tests
[BREAKING] Call Navigation.events().bindComponent(this) to listen to lifecycle events
This commit introduces breaking changes to the way components listen to RNN events.
Background
Up until now, components could handle navigation events by implemented a set of callbacks:
* componentDidAppear
* componentDidDisappear
* onNavigationButtonPressed
* onSearchBarUpdated
* onSearchBarCancelPressed
While this worked fine for the most part, this was completely broken for HOCs as RNN invoked these methods only on the registered component (top most HOC), leaving it to the user to propagate these events down the HOC chain. See the discussion in #1642 for more details.
Solution
In order to support HOC use case, we're introducing a new api which will let any Component bind itself to receive navigation events:
```js
class LifecycleScreen extends Component {
constructor(props) {
super(props);
this.subscription = Navigation.events().bindComponent(this);
}
componentWillUnmount() {
// The subscription is removed automatically when components unmount, but they can be explicitly removed as well by calling `this.subscription.remove(); `
}
}
```
It's still the users responsibility to propagate the `componentId` down the HOC chain, but by binding a component to RNN, it will be able to handle events as expected. Multiple components can be bound for the same `componentId`.
Consolidate event names
* onNavigationButtonPressed -> navigationButtonPressed
* onSearchBarUpdated -> searchBarUpdated
* onSearchBarCancelPressed -> searchBarCancelPressed
* Assign commandId to async commands
* CommandListener refactor
Pull listener out of Navigator and implement NativeCommandListener for native commands
* Emit onNavigationEvent when commands complete
* Rename timestamp to completionTime
* Rename NavigationEvent to EventEmitter
* Rename sendOnNavigationButtonPressed to emitOnNavigationButtonPressed
* Emit navigationEvent on bottom tab select
* rebase fix
* Emit commandCompleted event instead of nativeEvent
* fix native ios commands
* wait show and dismiss Overlay
Pontus Abrahamsson
Guy Carmeli
Danilo Bürger
Yogev Ben David
Vadim Laletin
Henrik Raitasola
Yogev Ben David
Birkir Rafn Guðjónsson
Daniel Zlotin
Guy Carmeli
Daniel Zlotin