react-native-navigation/docs

React Native Navigation v2 (WIP)

We are rebuilding react-native-navigation.

As we are in stage alpha, expect breaking API changes or use a specific version (for example “2.0.1234”)

• Why?
• v2 Roadmap
• v1 vs v2 feature comparison
• Documentation
• Contributing

Why Rebuild react-native-navigation?

A New & Improved Core Architecture

react-native-navigation has a few issues which are unsolvable in its current architecture. These issues stem from the same problem: you cannot specify on which screen you wish to make an action. Whenever you want to push a screen, show a modal or any other action, the action defaults to originate from your current screen. In most cases this is fine, but becomes problematic in specific edge cases. For example:

• What if you want to update your navbar icons and the user pops the screen? Your icons might update on the wrong screen.
• What if you want to push a screen as a result of a redux action?

There are ways to solve some of these problems in v1 but they are not straightforward. We want to change that.

New API

To solve this problem in v2, every screen receives its componentId as a prop. Whenever you want to perform an action from that screen you need to pass the componentId to the function:

Navigator.pop(this.props.componentId)

Another big architectural change is that now you can compose arbitrary native layout hierarchies, and assign a custom id to each and control them individually.

Built for Contributors

Currently, it requires a lot of work to accept pull requests. We need to manually make sure that everything works before we approve them because v1 is not thoroughly tested.
v2 is written with contributors in mind from day one.

Written In TDD

v2 is written in Test Driven Development. We have a test for every feature including features that are not implemented yet. This makes accepting pull requests extremely easy: If our tests pass, your pull request is accepted.

v2 Roadmap

Current Priorities

1) buttons in Android 2) showOverlay in iOS 3) showOverlay in Android 4) async commands 5) currentTab 6) change Options to be nested 7) topTabs in both platforms, with API implications

Top API

Top API	iOS	Android
setRoot	✅	✅
registerContainer	✅	✅
container	✅	✅
sideMenu	✅	✅
tabs	✅	✅
customViewController	Contribute	Contribute
splitView	Contribute	Contribute

Screen API

Screen API	iOS	Android
push	✅	✅
pop	✅	✅
popToRoot	✅	✅
resetTo	✅	✅
showModal	✅	✅
dismissModal	✅	✅
showOverlay	✅	✅
dismissOverlay	✅	✅
customTransition	✅	Contribute
Screen Visibility	✅	✅
async commands (await push)	✅	✅

Navigation Options

topBar	iOS	Android	contributors
title	✅	✅	Wix
textColor	✅	✅	Wix
textFontSize	✅	✅	Wix
textFontFamily	✅	✅	Wix
backgroundColor	✅	✅	Wix
buttonColor	✅	Contribute	Wix
hidden	✅	✅	Wix
hideOnScroll	✅	Contribute	Wix
translucent	✅	Contribute	Wix
transparent	✅	Contribute
noBorder	✅	Contribute	@gtchance
drawUnder	✅	Contribute
blur	✅	Contribute	@gtchance
custom	WIP @gran33	Contribute
subtitleColor	Contribute	Contribute
subtitleFontFamily	Contribute	Contribute
largeTitle (iOS 11)	✅	/iOS Specific

tabBar	iOS	Android	contributors
drawUnder	✅	Contribute
hidden	✅	✅	@gtchance
tabBadge	✅	Contribute	Wix
currentTab by Index	✅	✅	Wix
currentTab by cointainerId	Contribute	✅	Wix

buttons	iOS	Android	contributors
id	✅	@Johan-dutoit	@Johan-dutoit
testID	✅	Contribute	@Johan-dutoit
color	✅	@Johan-dutoit	@Johan-dutoit
icon	✅	@Johan-dutoit	@Johan-dutoit
disableTint	✅	@Johan-dutoit	@Johan-dutoit
fontSize	✅	@Johan-dutoit	@Johan-dutoit
fontWeight	✅	Contribute	Contribute

statusBar	iOS	Android	contributors
textColorScheme	in development	/ iOS specific
textColorSchemeSingleScreen	in development	/ iOS specific
blur	✅	Contribute	@gtchance
hideWithTopBar	✅	Contribute	@gtchance
hidden	✅	Contribute	WIX

other	iOS	Android	contributors
screenBackgroundColor	✅	Contribute	Wix
orientation	✅	Contribute	Wix
disabledBackGesture	✅	/ iOS specific
screenBackgroundImageName	✅	Contribute
rootBackgroundImageName	✅	Contribute
sideMenuVisible	✅	Contribute

v1 vs v2 Feature Comparison

v2 currently supports most of react-native-navigation’s basic functionality but it is still behind v1. Here is the full comparison of features between v1 and v2 (will be updated regularly):

Top Level API

API	v1	v2
startTabBasedApp	✅	✅
startSinglePageApp	✅	✅
registerScreen	✅	✅
drawer	✅	✅

Screen API

API	v1	v2 iOS	v2 Android
push	✅	✅	✅
pop	✅	✅	✅
showModal	✅	✅	✅
popToRoot	✅	✅	✅
resetTo	✅	✅	✅
dismissModal	✅	✅	✅
dismissAllModals	✅	✅	✅
showContextualMenu	✅	/ Android specific	Contribute
dismissContextualMenu	✅	/ Androic specific	Contribute
showFab	✅	/ Android specific	Contribute
dismissFab	✅	/ Android specific	Contribute
showSnackBar	✅	/ Android specific	Contribute
dismissSnackBar	✅	/ Android specific	Contribute
showLightBox	✅	Contribute	Contribute
dismissLightBox	✅	Contribute	Contribute
handleDeepLink	✅	Contribute	Contribute
Screen Visibility	✅	✅	✅

Styles

Note: v1 properties with names beginning with ‘navBar’ are replaced in v2 with properties beginning with ‘topBar’ to avoid confusion with the Android native bottom nav bar.

	v1	v2 iOS	v2 Android	Contributors
topBarTextColor	✅	✅	✅	Wix
topBarTextFontSize	✅	✅	✅	Wix
topBarTextFontFamily	✅	✅	✅	Wix
topBarBackgroundColor	✅	✅	✅	Wix
topBarButtonColor	✅	✅	Contribute	Wix
topBarHidden	✅	✅	✅	Wix
topBarHideOnScroll	✅	✅	Contribute	Wix
topBarTranslucent	✅	✅	Contribute	Wix
topBarTransparent	✅	WIP @bogobogo	Contribute
topBarNoBorder	✅	✅	Contribute	@gtchance
drawUnderTabBar	✅	✅	Contribute
drawUnderTopBar	✅	✅	Contribute
statusBarBlur	✅	✅	Contribute	@gtchance
topBarBlur	✅	✅	Contribute	@gtchance
tabBarHidden	✅	✅	Contribute	@gtchance
statusBarTextColorScheme	✅	in development	/ iOS specific
statusBarTextColorSchemeSingleScreen	✅	in development	/ iOS specific
topBarSubtitleColor	✅	Contribute	Contribute
topBarSubtitleFontFamily	✅	Contribute	Contribute
screenBackgroundColor	✅	✅	Contribute	Wix
orientation	✅	✅	Contribute	Wix
statusBarHideWithTopBar	✅	✅	Contribute	@gtchance
statusBarHidden	✅	✅	Contribute	WIX
disabledBackGesture	✅	✅	/ iOS specific
screenBackgroundImageName	✅	✅	Contribute
rootBackgroundImageName	✅	✅	Contribute
setButtons	✅	✅	Contribute	@Johan-dutoit
title	✅	✅	✅	Wix
toggleDrawer	✅	✅	Contribute
setTabBadge	✅	✅	Contribute	Wix
switchToTab	✅	✅	Contribute
topBarCustomView	✅	WIP @gran33	Contribute
customTransition(shared element)	:x:	WIP @bogobogo	Contribute
splitViewScreen	:x:	Contribute	Contribute

Element transitions, adding buttons and styles are not yet implemented. Contribute