airbnb / native-navigation Goto Github PK

View Code? Open in Web Editor NEW

3.1K 112.0 177.0 1.64 MB

Native navigation library for React Native applications

Home Page: http://airbnb.io/native-navigation/

License: MIT License

Objective-C 0.97% Java 56.54% JavaScript 12.62% Python 0.40% Ruby 1.49% Swift 27.89% Shell 0.10%

react-native react navigation navigator

native-navigation's Introduction

Native Navigation

DISCLAIMER

This project is currently in beta.

Many of the core APIs are subject to change, and we do not consider this project "Production Ready" until it hits a 1.0 release. We encourage people to try this library out and provide us feedback as we get it to a stable state we are confident in, but not to rely on it for production use until then.

Installation

See the Installation Guide

Running the Example Project

To run the example project, first clone this repo:

git clone https://github.com/airbnb/native-navigation.git
cd native-navigation

Both npm and the ruby bundler gem are needed to run the project.

npm install

npm start

Then, in another CLI window:

To run on iOS: npm run run:ios

To run on Android: npm run run:android

Guides

API Documentation

Related Projects and Alternatives

Native Navigation is a navigation library for the React Native platform. There are many navigation libraries in the React Native ecosystem. Native Navigation is unique in that it is built on top of the iOS and Android platform navigational components, and is thus more "native" than most other options which implement navigation from scratch in JavaScript on top of base React Native components like View and Animated.

React Native Navigation by Wix engineering is an alternative library that uses "Native" navigation components of each platform, and has been around longer than Native Navigation. If you need a stable / production-ready navigation library today that uses native platform based navigation components, we recommend you check this library out.

If you are investigating navigation solutions and you are okay with JavaScript-based solutions, we also encourage you to check out React Navigation.

Contributing

See the Contributors Guide

FAQ

See the Frequently Asked Questions page

License

This project is licensed under the MIT License.

native-navigation's People

Contributors

Stargazers

Watchers

Forkers

rubythonode tbroadley charlesmangwa ilyi1116 ariesw hhy5277 gedeagas adamspgeek mgriepentrog minimalistic anonrig coder698 alexlecco zerosingularity tadeuzagallo orta bradparks shinsterneck nilopc-react-native rborn montazze xtabbas anand180 chirag04 kureev comigor sdiaz ztplz atreyaj quocphongdn benkraus tleeaet devenlu therealthing zjlweb nextdoor benvest ykcai dharmakshetri somendras zinthemoney nfcampos steff-mueller smowden domir ericvicenti jsamrei robinli08 anhntbk08 ivanml gitter-badger andrewsardone bluedreamfly kurokky icemilk0122 bliang anh01 vdt renatoagds almouro edmondpr jokerstudiodev serj-lotutovici geminilove esam091 notjosh pinguo-zhangzhi savelichalex hpstuff hitbear518 lucas-tulio loggi franksoong ognen trendingtechnology ctrl-alt-adrian mackentoch benaneesh jaewoook sneerin kennethvl taxfix abudel grimkirill thomasdegry ayocen xilibro miladebadi zhdhr0000 jorellek digitkhrisnaa atingtot vaxxis limaofeng bensonz zhangyu921 airato us1415 mixslice kagomema24

native-navigation's Issues

Dependency issues regarding security

I'm getting similar errors like this that indicates module changes, vulnerabilities and deprecated packages.

warning react-native > xcode > [email protected]: use uuid module instead
warning gitbook-cli > npm > request > [email protected]: use uuid module instead
warning gitbook-cli > npm > request > [email protected]: ReDoS vulnerability parsing Set-Cookie https://nodesecurity.io/advisories/130
warning gitbook-cli > npm > [email protected]: This package is deprecated. Use Array.isArray.
warning gitbook-cli > npm > node-gyp > [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
warning gitbook-cli > npm > node-gyp > glob > [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue

Feature Request: API replace

Navigator.replace(screenName[, props, options])

This allows users to clear all previous stack and start clean.

Provide an installation option without CocoaPods

Dear authors,

Currently, there is only one way how you can add this project to iOS app (using CocoaPods). As a JavaScript / React Native developer, I'd like to be able to install this awesome library using react-native install or link it by using react-native link. Although it's not hard to do, the code won't work with a standard react-native init app due to the current way it imports React (using import React in Swift files).

I managed to make it work without these imports (by adding native-navigation library directly to the project), but I consider this way pretty hackish as I have to remove these imports by hand. I'd like to find a way how we can distribute a Cocoa pod using CocoaPods and npm module using the same codebase. The best thing I can think of is a pre-publish hook that cuts off imports before publishing (tmp dir -> s/import React//g -> publish files from tmp dir -> rm tmp dir).

What do you think?

Can't load in iOS simulator

I tried following the simple instructions at the start of the docs:

npm install
npm start
(in another terminal): npm run run:ios

I get this failure:

Scanning 554 folders for symlinks in /Users/jonabrams/Documents/code/native-navigation/node_modules (12ms)
Found Xcode workspace native-navigation.xcworkspace
Launching iPhone 6 (iOS 10.2)...
Building using "xcodebuild -workspace native-navigation.xcworkspace -configuration Debug -scheme native-navigation -destination id=013537E7-1D88-4ADA-9619-E815A27C1B5E -derivedDataPath build"
User defaults from command line:

    IDEDerivedDataPathOverride = /Users/jonabrams/Documents/code/native-navigation/example/ios/build


xcodebuild: error: The workspace named "native-navigation" does not contain a scheme named "native-navigation". The "-list" option can be used to find the names of the schemes in the workspace.

Installing build/Build/Products/Debug-iphonesimulator/native-navigation.app
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=2):
Failed to install the requested application
An application bundle was not found at the provided path.
Provide a valid path to the desired application bundle.
Print: Entry, ":CFBundleIdentifier", Does Not Exist

Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/native-navigation.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist

I'm not an iOS dev, so I have no idea what I did wrong.

I'm on OSX 10.12.3, XCode 8.2.1, Node v6.2.0, [email protected]

How does this work ?

How to add it to the project - you are described well.
But! Please tell us how it works or provide a working example with perehomy on screens and different kinds of navigation (TabBar, Drawer).

Navigator.Config hidden does not work on Android

The Navigator.Config hidden prop does not seem to work on Android.

We are using Theme.AppCompat.Light.NoActionBar theme on the activity.
next.hasKey("hidden") is true only on the second call of reconcileNavigationProperties, when bar is null due to this call, making it not call bar.hide()

We tried replacing this line with activity.getSupportActionBar(), but that left an empty space above the react content, see image below.

Feature Request: Navigator stack reset to <X> view

I think an important navigation feature would be to reset the root navigation (this pattern is useful for apps that have a login screens, or an hamburger alike menu), in theory this could make issue #36 much more manageable (or defer the native drawer support to later).

how to register a native view

my app was a native app。 I need rn view -> native view ,sometime native view -> rn view. so, how to register a native view to nav?

iOS Example: List ends under Tab Bar.

Development Stalled?

@lelandrichardson has AirBnb continued working on this privately? Or has development stalled? It looks like the last commit was made a month ago.

Shared Element Transition Distorts Image

Hi guys! Thank you for the awesome work!

I'm trying to achieve this kind of transition based on Udacity's tutorial on Shared Element Transitions (https://www.youtube.com/watch?v=Z1Ilz-v1yF0). I'm only interested in the image transition and not the exploding part.

My Goal

My Accomplishment

My Code

Based on the boilerplate here - https://github.com/lelandrichardson/native-navigation-boilerplate.

ScreenOne

import React from 'react';
import { StyleSheet, View, Image, TouchableOpacity, Dimensions, ScrollView } from 'react-native';
import Navigator, { SharedElement, SharedElementGroup } from 'native-navigation';

const {height, width} = Dimensions.get('window');
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },

    scrollView: {
        flexWrap: 'wrap',
        flexDirection: 'row',
        alignItems: 'flex-start',
    },

    photo: {
        width: width/2,
        height: 200,
        resizeMode: 'cover',
        borderWidth: 1,
        borderColor: 'white',
    }
});

export const images = [
    require('./images/0.jpeg'),
    require('./images/1.jpeg'),
    require('./images/2.jpeg'),
    require('./images/3.jpeg')
];

const onPress = (index) => {
    const id = 'photo' + index;

    Navigator.push('ScreenTwo', { index }, {
        transitionGroup: id
    });
};

export default class ScreenOne extends React.Component {
    render() {
        return (
            <Navigator.Config title="Screen One">
                <View style={styles.container}>
                    <Navigator.Spacer />

                    <ScrollView contentContainerStyle={styles.scrollView}>
                        {
                            images.map((image, index) => (
                                <SharedElementGroup id={'photo' + index} key={'photo' + index}>
                                    <TouchableOpacity onPress={() => onPress(index)}>
                                        <SharedElement type="photo" typeId={'photo' + index}>
                                            <Image source={image} style={styles.photo} />
                                        </SharedElement>
                                    </TouchableOpacity>
                                </SharedElementGroup>
                            ))
                        }
                    </ScrollView>
                </View>
            </Navigator.Config>
        )
    }
}

ScreenTwo

import React from 'react';
import { StyleSheet, View, Image, Dimensions, Text } from 'react-native';
import Navigator, { SharedElement } from 'native-navigation';
import { images } from './ScreenOne';

const {height, width} = Dimensions.get('window');
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },

    photo: {
        width: width,
        height: 200,
        resizeMode: 'cover',
    },

    text: {
        padding: 20,
    },
});

export default class ScreenTwo extends React.Component {

    render() {
        const id = 'photo' + this.props.index;
        const imageSource = images[this.props.index];

        return(
            <Navigator.Config title="Screen Two">
                <View style={styles.container}>
                    <Navigator.Spacer animated />

                    <SharedElement type="photo" typeId={id}>
                        <Image source={imageSource} style={styles.photo} />
                    </SharedElement>

                    <Text style={styles.text}>
                        Some text here...
                    </Text>
                </View>
            </Navigator.Config>
        )
    }
}

My Questions

Is the distortion the expected behavior?
Is the goal achievable?
Where did I screw up?

Thanks!

Images from Unsplash

Feature request: Expose screen stack events

Use case: we intend to use stacked fragments to create a card stack. A card needs to know that it's not on the top of the stack so it can render differently (for example, change its position and size, optimize away elements which won't be rendered, etc)

I'm thinking about a NavigatorModule.addScreenStackChangedListener or NavigatorModule.on('screenStackChanged', (name: string, props: object) => void) method. Then all the work to keep state of which screens are being show can be done on the JS side.

If you agree with that API, I'll (try to) make the PR.
I think implementation should not be too difficult using FragmentManager.addOnBackStackChangedListener on android and UINavigationController's delegate didShowViewController.

Native Routing Required?

So I've been plugging along in my fork, adding UISplitViewController support, and it wasn't until just now I realized a flaw. I don't think flaw is the right word, because this was built for Airbnb's use case of integrating React Native into and existing app, but it is a flaw for those using this library in an app meant to be 100% React Native.

What I noticed, is that it is impossible to push a TabBar component in React Native, as found in this library, and have it show the tab bar controller, without initializing a ReactTabBarController in Swift, and handling that natively.

Is there anything you would suggest for someone who wants to register a component as a tab bar controller and handle that in React Native entirely, rather than having to drop back into Swift to handle that routing?

Translucent ios nav bar

Looks like translucent not work correctly on iOS, I'm change in ReactNavigationImplementation.swift method reconcileScreenConfig part with translucent config to:

if let translucent = boolForKey("translucent", next) {
        if (translucent == true) {
            navBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
            navBar.shadowImage = UIImage()
            navController.view.backgroundColor = UIColor.clear
        }
        navBar.isTranslucent = translucent
}

but I really don't know how disable it when next screen will be with translucent false

[Question] [iOS] Does it wait for the react views to render before pushing to avoid flickering effects?

I am currently using react-native-navigation and there is one very nasty UX issue: UI flickering.
UI flickers because screens are pushed before react views in the pushed screen are rendered.

Question: Does native-navigation wait for the react views to render before pushing to avoid flickering effects?

Navigator.ScrollView not yet there?

In React.Native it seems to be quite challenging to have this collapsible toolbar and toolbar animations implemented. In my app I need the behavior similar to what you have in AirBnb app at the top – a form with fields that animates to toolbar and toolbar itself hides when user scrolls.

Leland have mentioned in his talk this Navigator.ScrollView component that, supposedly, can help achieve such behavior via native-navigation library. But, I didn't find it in the docs.

How long can it take to have in the library?
Does it make sense for me to wait or rather invest into other possible solutions?

iOS tabBar screen shows empty from time to time

Screen capture attached (easier than to explain 😊 )

I just ran the example, nothing more.
Thank you.

Carthage support

Someone don't want to use CocoaPods to change their project structure, Carthage is a much simpler alternative

Difference to wix/react-native-navigation

Dear Team,

the readme of the project states the following:

Native Navigation is a navigation library for the React Native platform. There are many navigation libraries in the React Native ecosystem. Native Navigation is unique in that it is built on top of the iOS and Android platform navigational components, and is thus more "native" than most other options which implement navigation from scratch in JavaScript on top of base React Native components like View and Animated.

I am 100% with you that a native app just has to use the exiting native navigation solutions. Not some kind of looks like original one navigation. But then you say that there is a library doing exactly that:

React Native Navigation by Wix engineering is an alternative library that uses "Native" navigation components of each platform, and has been around longer than Native Navigation.

For me its not obvious why you guys are creating an alternative to the existing solution? Do you have a different goal? Do you want to simplify it? What will be the key difference? I think it would help a lot of people if you could add this to your readme. It would motivate a lot to contribute to the project 👍

Hope this helps.

Peace

Unable to resume activity: reactContext is null

I'm able to consistently crash an Android app with this exception by launching it from multiple sources.

E.g.: launching the app from the launcher, pressing home button, then try opening it again (restoring) from the launch activity feature from nova launcher, or from the open button on play store.

Bypassing the throw call seems to "solve" the issue, forcing the app to reload itself. However, I don't know the implications of doing this.

Relevant logcat:

04-17 17:16:42.869  1662  3384 I ActivityManager: START u0 {cmp=com.myapp/com.myapp.MainReactActivity} from uid 10249 on display 0
04-17 17:16:42.924  8426  8426 D ReactNativeFragment: onCreate
04-17 17:16:42.924  8426  8426 D ScreenCoordinator: ScreenCoordinator{Back stack 0:	BackStack{, tag='STACK0, size=1, animation=Modal, promise?=false}}
04-17 17:16:42.926  8426  8426 D ReactNativeFragment: postponeEnterTransition
04-17 17:16:42.931  8426  8426 D ReactNativeFragment: onCreateView MyApp
04-17 17:16:42.931  8426  8426 D ReactNativeFragment: onActivityCreated
04-17 17:16:42.931  8426  8426 D ReactNativeFragment: onCreateWithReactContext
04-17 17:16:42.932  8426  8426 D DefaultImplementation: reconcileNavigationProperties
04-17 17:16:42.936  8426  8426 D ReactNativeFragment: onResume
04-17 17:16:42.937  8426  8426 D AndroidRuntime: Shutting down VM
04-17 17:16:42.938  8426  8426 E AndroidRuntime: FATAL EXCEPTION: main
04-17 17:16:42.938  8426  8426 E AndroidRuntime: Process: com.myapp, PID: 8426
04-17 17:16:42.938  8426  8426 E AndroidRuntime: java.lang.RuntimeException: Unable to resume activity {com.myapp/com.myapp.MainReactActivity}: java.lang.IllegalArgumentException: reactContext is null (calling event: AirbnbNavigatorScreen.onAppear.MyApp_fragment_2)
04-17 17:16:42.938  8426  8426 E AndroidRuntime: 	at android.app.ActivityThread.performResumeActivity(ActivityThread.java:3429)
04-17 17:16:42.938  8426  8426 E AndroidRuntime: 	at android.app.ActivityThread.handleResumeActivity(ActivityThread.java:3469)
04-17 17:16:42.938  8426  8426 E AndroidRuntime: 	at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2732)
04-17 17:16:42.938  8426  8426 E AndroidRuntime: 	at android.app.ActivityThread.-wrap12(ActivityThread.java)
04-17 17:16:42.938  8426  8426 E AndroidRuntime: 	at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1477)
04-17 17:16:42.938  8426  8426 E AndroidRuntime: 	at android.os.Handler.dispatchMessage(Handler.java:102)
04-17 17:16:42.938  8426  8426 E AndroidRuntime: 	at android.os.Looper.loop(Looper.java:154)
04-17 17:16:42.938  8426  8426 E AndroidRuntime: 	at android.app.ActivityThread.main(ActivityThread.java:6126)
04-17 17:16:42.938  8426  8426 E AndroidRuntime: 	at java.lang.reflect.Method.invoke(Native Method)
04-17 17:16:42.938  8426  8426 E AndroidRuntime: 	at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886)
04-17 17:16:42.938  8426  8426 E AndroidRuntime: 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)
04-17 17:16:42.938  8426  8426 E AndroidRuntime: Caused by: java.lang.IllegalArgumentException: reactContext is null (calling event: AirbnbNavigatorScreen.onAppear.MyApp_fragment_2)
04-17 17:16:42.938  8426  8426 E AndroidRuntime: 	at com.airbnb.android.react.navigation.ReactNativeUtils.maybeEmitEvent(ReactNativeUtils.java:68)
04-17 17:16:42.938  8426  8426 E AndroidRuntime: 	at com.airbnb.android.react.navigation.ReactNativeFragment.emitEvent(ReactNativeFragment.java:441)
04-17 17:16:42.938  8426  8426 E AndroidRuntime: 	at com.airbnb.android.react.navigation.ReactNativeFragment.onResume(ReactNativeFragment.java:309)
04-17 17:16:42.938  8426  8426 E AndroidRuntime: 	at android.support.v4.app.Fragment.performResume(Fragment.java:2235)
04-17 17:16:42.938  8426  8426 E AndroidRuntime: 	at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1346)
04-17 17:16:42.938  8426  8426 E AndroidRuntime: 	at android.support.v4.app.FragmentManagerImpl.moveFragmentToExpectedState(FragmentManager.java:1528)
04-17 17:16:42.938  8426  8426 E AndroidRuntime: 	at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1595)
04-17 17:16:42.938  8426  8426 E AndroidRuntime: 	at android.support.v4.app.FragmentManagerImpl.dispatchResume(FragmentManager.java:2898)
04-17 17:16:42.938  8426  8426 E AndroidRuntime: 	at android.support.v4.app.FragmentController.dispatchResume(FragmentController.java:223)
04-17 17:16:42.938  8426  8426 E AndroidRuntime: 	at android.support.v4.app.FragmentActivity.onResumeFragments(FragmentActivity.java:509)
04-17 17:16:42.938  8426  8426 E AndroidRuntime: 	at android.support.v4.app.FragmentActivity.onPostResume(FragmentActivity.java:498)
04-17 17:16:42.938  8426  8426 E AndroidRuntime: 	at android.support.v7.app.AppCompatActivity.onPostResume(AppCompatActivity.java:172)
04-17 17:16:42.938  8426  8426 E AndroidRuntime: 	at android.app.Activity.performResume(Activity.java:6807)
04-17 17:16:42.938  8426  8426 E AndroidRuntime: 	at android.app.ActivityThread.performResumeActivity(ActivityThread.java:3406)
04-17 17:16:42.938  8426  8426 E AndroidRuntime: 	... 10 more
04-17 17:16:42.945  1662  1790 W ActivityManager:   Force finishing activity com.myapp/com.myapp.MainReactActivity

bundler under npm install fails to execute (wrong ruby version)

if I run npm install the script dies with

Your Ruby version is 2.0.0, but your Gemfile specified 2.4.0

however if I run bundle install --binstubs ./examples/ios && bundle exec pod install --project-directory=./example/ios/ all goes fine

my env:

$ ruby -v
ruby 2.4.0p0 (2016-12-24 revision 57164) [x86_64-darwin16]

$ bundler -v
Bundler version 1.14.6

Any idea? (sorry, not versed with ruby :( )

How to install Libraries Like Realm

Hi,
I'm currently trying to install Realm, but with no success. How can i do this?

Proguard error for jackson databind dependency library

Android gradle buld:

Warning: com.fasterxml.jackson.databind.ext.DOMSerializer: can't find referenced class org.w3c.dom.bootstrap.DOMImplementationRegistry
Warning: com.fasterxml.jackson.databind.ext.DOMSerializer: can't find referenced class org.w3c.dom.bootstrap.DOMImplementationRegistry
Warning: com.fasterxml.jackson.databind.ext.DOMSerializer: can't find referenced class org.w3c.dom.bootstrap.DOMImplementationRegistry
Warning: com.fasterxml.jackson.databind.ext.DOMSerializer: can't find referenced class org.w3c.dom.bootstrap.DOMImplementationRegistry
Warning: com.fasterxml.jackson.databind.ext.DOMSerializer: can't find referenced class org.w3c.dom.bootstrap.DOMImplementationRegistry
Warning: com.fasterxml.jackson.databind.ext.Java7SupportImpl: can't find referenced class java.beans.Transient
Warning: com.fasterxml.jackson.databind.ext.Java7SupportImpl: can't find referenced class java.beans.ConstructorProperties
Warning: com.fasterxml.jackson.databind.ext.Java7SupportImpl: can't find referenced class java.beans.Transient
Warning: com.fasterxml.jackson.databind.ext.Java7SupportImpl: can't find referenced class java.beans.ConstructorProperties
Warning: com.fasterxml.jackson.databind.ext.Java7SupportImpl: can't find referenced class java.beans.Transient
Warning: com.fasterxml.jackson.databind.ext.Java7SupportImpl: can't find referenced class java.beans.ConstructorProperties
Warning: com.fasterxml.jackson.databind.ext.Java7SupportImpl: can't find referenced class java.beans.Transient
Warning: com.fasterxml.jackson.databind.ext.Java7SupportImpl: can't find referenced class java.beans.ConstructorProperties
Warning: com.fasterxml.jackson.databind.ext.Java7SupportImpl: can't find referenced class java.beans.ConstructorProperties

Adding this configuration in proguard-rules.pro fix this issue. But why Navigation is need to have dependency to jackson databind? If I have dependency to gson is it possible to skip jackson and Navigation to switch to gson?

# Proguard configuration for Jackson 2.x (fasterxml package instead of codehaus package)
-keep class com.fasterxml.jackson.databind.ObjectMapper {
    public <methods>;
    protected <methods>;
}
-keep class com.fasterxml.jackson.databind.ObjectWriter {
    public ** writeValueAsString(**);
}
-keepnames class com.fasterxml.jackson.** { *; }
-dontwarn com.fasterxml.jackson.databind.**

Following the installation tutorial leads to error

I have been trying it set the navigation up like this: https://github.com/airbnb/native-navigation#installation
Here is my AppDelegate.h:

#import <UIKit/UIKit.h>
#import <React/RCTBridge.h>
@import NativeNavigation;

@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate, ReactNavigationCoordinatorDelegate>

@property (nonatomic, strong) UIWindow *window;

@end

I'm getting error: Module NativeNavigation not found. How can I fix this?

Feature Request: Inject navigation in tree

As i was trying out the library, i noticed that there's no way to have to inject the navigation anywhere within the react tree. I love the fact that each screen is atomic currently, but this would enable integration with flux libraries like (redux) and would allow to have persistent state across views (reinitialize redux every view isn't ideal).

A sub solution for this would be to be able to set an object that gets passed as props to each route, but i'd like much more a declarative api like

<Provider>
  <App>
     {(props) => <NativeNavigator {...props} />}
  </App>
</Provider>

This could possibly also indirectly fix the dependency on React mentioned here #54 (comment)

Is it possible to interigate "code-push"

Since native-navigation is goal to split up screens into separate root views, somehow "code-push" must be called in "Appregistry" function. So maybe it doesn't work with exist "code-push-apps".
What do you think?

Linking library after using native navigation gives error

I was trying to install react-native-image-picker in the project thats already using native-navigation but it does not allow me to link the library.

npm install react-native-image-picker@latest --save
react-native link

rnpm-install info Linking native-navigation android dependency 
rnpm-install info Android module native-navigation has been successfully linked 
rnpm-install info Linking native-navigation ios dependency 
rnpm-install ERR! It seems something went wrong while linking. Error: ENOENT: no such file or directory, open '/Users/nakib/Desktop/project/peercel/node_modules/native-navigation/lib/ios/NativeNavigation.xcodeproj/project.pbxproj' 
Please file an issue here: https://github.com/facebook/react-native/issues

I tried to install it manually but got different error in xcode
React/RCTBridgeModule.h file not found

Unfortunately App has stopped .

App is getting crashed when try to push() or present() , but registerScreen is working (probably) .

I dont think its a javascript issue .
here's my gradle file

android {
    compileSdkVersion 25
    buildToolsVersion "25.0.2"
    
	    dexOptions {
    jumboMode = true
}
	packagingOptions {
        exclude 'META-INF/LICENSE'
        exclude 'META-INF/DEPENDENCIES.txt'
        exclude 'META-INF/LICENSE.txt'
        exclude 'META-INF/NOTICE.txt'
        exclude 'META-INF/NOTICE'
        exclude 'META-INF/DEPENDENCIES'
        exclude 'META-INF/notice.txt'
        exclude 'META-INF/license.txt'
        exclude 'META-INF/dependencies.txt'
        exclude 'META-INF/LGPL2.1'
    }
    defaultConfig {
        applicationId "com.shopfort"
        minSdkVersion 16
        targetSdkVersion 25
        versionCode 1
		multiDexEnabled true
        versionName "1.0"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }
		signingConfigs {
        release {
            storeFile file(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }
	
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86"
        }
    }
    buildTypes {
        release {
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
			 signingConfig signingConfigs.release
        }
    }
    // applicationVariants are e.g. debug, release
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
            def versionCodes = ["armeabi-v7a":1, "x86":2]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
            }
        }
    }
}

dependencies {
  
   
    compile project(':react-native-vector-icons')
    compile project(':react-native-spinkit')
    compile project(':react-native-share')

    compile project(':react-native-linear-gradient')
    
    compile(project(':react-native-fcm')){
	  exclude group: "com.google.firebase" 
	}
	 compile(project(':react-native-maps'))
	   {
	    exclude group: 'com.google.android.gms'
	   }
  
	
    compile ("com.google.firebase:firebase-core:9.8.0"){
	    force = true;
	}
	compile ('com.google.firebase:firebase-messaging:9.8.0'){
	   	    force = true;
	}
 

	
	compile ("com.google.android.gms:play-services-base:9.8.0") {
        force = true;
    }
    compile ("com.google.android.gms:play-services-maps:9.8.0") {
        force = true;
    }
	
    compile ('com.google.android.gms:play-services-gcm:9.8.0') {
        force = true;
    }
	
    compile project(':react-native-fbsdk')
    compile project(':react-native-camera')
    compile project(':lottie-react-native')
    compile project(':gl-react-native')
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:25.1.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
    compile 'com.android.support:support-annotations:25.1.1'

    // add native-navigation
    compile project(':native-navigation')

Need help .

Feature Request: UISplitViewController support

Thoughts on supporting UISplitViewController for navigation?

At my company, we bought into React Native pretty heavily for a new app being developed currently, and are actually on a pretty tight deadline. One problem that has remained unsolved as of yet in the React Native community is iPad support. Most implementations I have seen all are essentially just a blown up iPhone. Our designs for this new app really call for a UISplitViewController.

We are currently using Wix's react-native-navigation library, and I wouldn't be opposed forking theirs and shoehorning in support for UISplitViewController, but in talking with them, it sounded like it is something they want to do eventually, and would prefer not to accept pull requests from the community until v2 is finalized and out in the wild.

I'm going to start digging around in this source a little more than I have, but from your perspective, would you be at all interested in accepting a pull request with UISplitViewController support? I'd assume it could be a somewhat invasive change. What are your thoughts on implementation of such? Would you have any tips to throw our way?

[Question]: Advantages and Disadvantages

Can you please point the advantages and disadvantages of this library over Wix/react-native-navigation

Road to v1

What all needs to happen before the v1 milestone? I'd like to compile a list here (edit this comment), so that any contributors can have a list of tasks to choose from if they'd like to help. Perhaps the airbnb folks can get a project set up under the projects tab to track this better?

Document all teh things
Revisit installation steps, try to be dependency manager agnostic (#57, #57)
... much more

Is it possible to push a Native UIViewController on a Controller which has got React native component as subview?

Example App

Tell the author that this fails on your system:
react-native run-ios --project-path ./example/ios

hidden doesn't work for Navigator.Config with tabs

I added hidden={true} to example/components/Screen.js -> Navigator.Config props and top navigation bar was still visible.

titleView prop in Navigator.Config?

Would it make sense to add a titleView prop to Navigator.Config to be able to use a custom view in place of the title?
Something like:

<Navigator.Config
  titleView="SomeView"
/>

where SomeView is

...
AppRegistry.registerComponent('SomeView', () => SomeView)

and possibly a titleViewProps prop for props to pass to the view.

It's not the ideal API, I think, I'd want this instead

<Navigator.Config
  titleView={<SomeView prop="value" />}
/>

but I'm not sure how feasible that is

Super useful either way IMO, what do you guys think?

(EDIT: this might make sense only for iOS, not sure about that)

Feature: support drawer navigation

How to make it work with create-react-native-app?

In create-react-native-app entry file looks like:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

There is no AppRegistry.registerComponent('MyNewProject', () => MyNewProject); that could be replaced with Navigator.registerScreen('Home', () => MyNewProject); (http://airbnb.io/native-navigation/docs/installation.html)

Build failed in Android while trying to run the example project

I did

git clone https://github.com/airbnb/native-navigation.git
cd native-navigation
npm install
npm start

Then opened another tab on the terminal and ran:
npm run run:android

The output was:

FAILURE: Build failed with an exception.

* What went wrong:
Task 'installDebug' not found in root project 'android'.

* Try:
Run gradlew tasks to get a list of available tasks. Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 55.172 secs

npm ERR! Darwin 16.4.0
npm ERR! argv "/usr/local/Cellar/node/7.2.0/bin/node" "/usr/local/bin/npm" "run" "run:android"
npm ERR! node v7.2.0
npm ERR! npm  v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! [email protected] run:android: `cd example/android && ./gradlew installDebug && cd - && npm run start:android`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] run:android script 'cd example/android && ./gradlew installDebug && cd - && npm run start:android'.

I'm on macOS Sierra 10.12.3, Node 7.2.0

Add Navigator.Config Showcase to Example App

We should add a showcase of the Config props (https://github.com/airbnb/native-navigation/blob/master/docs/api/navigator-config.md) to the example app.

I can get started on it this weekend. I just wanted to make sure no one else is already working on it.

Android top tabbar

Hi,

Any plans to implement "standard" android top tab bar with viewpager, scrollable tabs, etc?
Thank you 😄

NvaigationBar title replaces TabBarItem item on iOS

ie. if they're different, when you visit the tab, the tab bar item title changes.

this issue is described here http://stackoverflow.com/questions/21615637/how-to-change-uiviewcontroller-title-independent-of-tabbar-item-title

I'm happy to fix this, do you guys have any preference between any of the hacky solutions proposed in that stack overflow link? ;)

Tabs flicker on load

the tab bar items flicker on load when using a tabs screen, see movie on the url for details

I'd guess it's due to using animated: true https://github.com/airbnb/native-navigation/blob/master/lib/ios/native-navigation/ReactTabBarController.swift#L167 here,

https://www.dropbox.com/s/oxdi8t1r2fmqmie/native-navigation%20tabs%20flicker%20bug.m4v?dl=0

Support for modals

I was just curious if native-navigation will ever support modals just like react-native-navigation does? I couldn't see it in the documentation.

Is this able to recover when activity is destroyed?

When talking about natively build navigators for React Native the main problem with them have been compatibility with Android when activity is destroyed. When I turn "Don't keep activities" to ON on Android and put my app on background the activity is destroyed right away. With this setting on and using wix's react-native-navigation it does not remember the route I was in. This will be major drawback for apps that are required to be used on background too.

The main benefit with the JS based routing is that you can put routes to redux store which is not destroyed on activity destroy and all my routes are on memory even when activity is destroyed.

So I would recommend you guys to keep "Don't keep activities" to ON mode all the time when developing this navigator. And maybe it will become defacto navigation library of RN! :)

[Request] Get current state

It would be helpful to have something like

Navigator.status()

to retrieve the current Navigation state

Also, is there currently a way to retrieve the initial Route when reloading? It doesn't seem like onAppear/onEnterTransitionComplete events are fired. Don't know if that's a bug or by design.

when release 0.3?

when release the 0.3 version? @lelandrichardson

"pod install" step missing

Following the install and run instructions for ios on a fresh cloned project will fail because the pods are not installed.
Once you run cd example/ios && pod install everything goes fine.

Thank you 😄

CRASH everytime with log [Unable to execute JS call: __fbBatchedBridge is undefined] when integrated to existing iOS app. Any particular thing I am missing?

Does native-navigation support 0.41.* version of react-native?

I'm using react-native 0.41.2 and I'm having trouble installing native-navigation.

There is nor Yoga.podspec file in ~/ReactCommon/yoga.
if I'm commenting this line` pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga/Yoga.podspec' I'm having another issue

Any suggestions please