[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
Summary: This adds a new event `onSearchBarCancelPressed` that fires
when the user presses the cancel button on the search bar in the
navigation bar. `onSearchBarUpdated` does indirectly fire when the user
presses cancel, as the query will be reset to an empty string, but it is
not possible to distinguish those events from the user simply resetting
the query. My use case for this is to have a view that appears on top of
the normal content of the view controller when the search bar is
focused.
Test Plan: ran `npm run test-js` and confirmed added JS unit tests
passed.
I also tested this with my app, and confirmed the
`onSearchBarCancelPressed` method was called when I pressed the cancel
button.
* Refactored backButton api
* Move StackController to separate package
Implement BackButtonOptions
* Somewhat simplify StackController creation in tests
* Pull backButton logic from StackController
* Handle all TopBar button options in TopBarButtons
* fix back button on iOS
[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
* 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
* Make detox android test suit pass
Disabled emulator animations due to limitation of espresso/detox which can't wait until
a push/pop animation ends
* Fix orientation parsing and enable detox orientation tests
* remove only
* Fix BottomTabs testId
* Support user orientation
* Fix rightButtons testId
* Add Modals tests
* e2e fix ios
Birkir Rafn Guðjónsson
Dima Loktev
Daniel Zlotin
yogevbd
Ben Hiller
Guy Carmeli
frankenthumbs