Added Navigation React Native Plugin #111
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
It's good practive to remove handler (might have nested stateNavigators?)
No need for conditional state/data logic in style props (React Motion handles not animating the initial state).
Hides react motion from user code. Import navigation's spring instead
Didn't make sense to have two props for this because it needs to leave to the style it enters from. Copied the stripStyle function from react motion internals (it's not exposed on public api)
Makes it clearer where the style is coming from
Changed div to View in SceneNavigator and created NavigationReactNative.js as the public api
Hard-coded because it's the only non-typescript plugin
No point bring in babel and who different package process, when can remove rest/spread and switch to typescript
Used the existing typescript rollup, build and package tasks even though only need package. Had to target 'es6' because react-native.d.ts uses Promise
Brought in navigation typings now for consistency with other plugins
This reverts commit f0d4669.
Needs custom tab bar for icons
NavigationBackAndroid should return true if the navigation’s handled - either by navigating prop returning false or canNavigateBack returning true
Don’t need the onLayout listener in SceneNavigator. It seems to fire a lot and causes unnecessary defenders. Also means can reset the root background colour back to white because the style takes on ios now
Otherwise, pressing back on android and then going back in will call render without state
Now that truncateCrumbTrail is called before navigation, the navigation data doesn’t include defaults (and might be null). Used rest/spread to include defaults and ensure not null. Can be that item passed as a string that will become number after the link’s parsed. Not worried about that because data-first routing means should pass consistent types (and already changed navigation react active check to assume consistent types)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Native navigation is different to Web because going back must display the previous view exactly as it was. For example, in Netflix, going back after selecting a film must maintain the horizontal scroll positions of all category sections. The way to do this is to render, but hide, the stack of visited scenes and let React remember their State for you.
The Navigation router’s crumb trail is ideally suited for tracking the stack of visited scenes. So, created a SceneNavigator Component that renders a scene for each crumb in the trail together with the current scene. For performance, each crumb scene returns a cached React Element so that React ejects from the diffing routing at the earliest opportunity (it doesn’t even call render on the Element).
The SceneNavigator wraps React Motion around these scenes so they can be animated as the enter, leave or become a crumb. Created a spring that wraps React Motion’s spring so that the React Motion dependency isn’t exposed.