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

[pie6k]

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)

[lelandrichardson]

@ericvicenti @skevy this is a good point. Should we have some instructions for getting CRNA set up with native navigation?

[skevy]

cc @dikaiosune

In order for this to work, as things stand today, you will have to eject your project from CRNA in order to use native-navigation. Of course, this isn't the ideal state of affairs, but CRNA ships with Expo's SDK, which doesn't currently have native-navigation included (yet).

I think there's a longer discussion to be had here, but I definitely would like to see native-navigation become a navigation option in Expo.

I'm a bit swamped with work coming out of React Conf, but @lelandrichardson, you, @ericvicenti, and I should chat about this next week.

[G2Jose]

Have the same problem. Would be great to have this work with create-react-native-app

[elie222]

I'd prefer to see Wix navigation added to expo as that's production ready.

[ericvicenti]

Without support in Expo, it will require an eject to use native-navigation.

I am prototyping a way to do the following:

create-react-native-app SimpleApp
cd SimpleApp
npm install --save react-navigation

You could then sketch out an App.js using React Navigation's API:

import {
  StackNavigator,
} from 'react-navigation';
import {
  AppRegistry,
  Button,
} from 'react-native';

class MainScreen extends React.Component {
 ...
}
class ProfileScreen extends React.Component {
  static navigationOptions = {
    title: ({state}) => `${state.params.name}'s profile`,
  };
  render() {
    const { goBack } = this.props.navigation;
    return (
      <Button
        title="Go back"
        onPress={() => goBack()}
      />
    );
  }
}

const SimpleApp = StackNavigator({
  Main: {screen: MainScreen},
  Profile: {screen: ProfileScreen},
});

AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

At this point, the app works fine (and can be deployed to Expo), but does not have Native Navigation yet. Here's how you'd add it:

npm i --save-dev react-navigation-native-eject
npm i --save react-navigation-native

Modify the ejectModule field of the app.json config file, set it to react-navigation-native-eject. Then run eject to generate the native code:

npm run eject

Now edit App.js to use the native entry point:

import {
  registerNativeNavigator,
} from 'react-navigation-native';

// App code remains unchanged!

// This replaces the call to AppRegistry.registerComponent(SimpleApp):
registerNativeNavigator(SimpleApp);

Now, with react-native run-ios or run-android, the app will run with Native Navigation!

[brunolemos]

@ericvicenti did you open source this wrapper somewhere? I see the initial implementation on your video but not sure if you wrote more code or made it available

[oirodolfo]

I saw that react-navigation-native is available on npm, but has nothing on it; no code, only a package.json. Please, @ericvicenti , open source this wrapper for us 🙏 thksss

[ericvicenti]

I don't plan on working on it much further, but I've made the wrapper available here: https://gist.github.com/ericvicenti/9b193b07d527c2bf45e3521a31a20f6c

If anyone is interested in maintaining it for open source, reach out to me and we can discuss transferring or sharing ownership of the npm package.

[oirodolfo]

I'm really interested in maintaing it, @ericvicenti. I'll test it here and check if everything is okay and its next steps to open source it. How can we discuss it together?

And hey, thank you SO much for this wrapper. 🙏🏻

[aksonov]

@ericvicenti I'm interested to make it part of RNRF (react-native-router-flux). I don't see also react-navigation-native-eject, where I can get it?

[Stophface]

There is another way: https://github.com/react-community/react-navigation/issues/713

[swayampakula]

Hi I have created an application using the create-react-native-app. Now I wanna use the native features of the phone like Bluetooth etc. So I wanna use the application in react-native run-android. So it possible to import the code into the project where I have created a project using the react-native init.

Thanks in Advance. Kindly help !

[elie222]

CRNA doesn't support Bluetooth. You'll need to detach to use it.

On 25 Sep 2017 10:06, "swayampakula" [email protected] wrote:

Hi I have created an application using the create-react-native-app. Now I wanna use the native features of the phone like Bluetooth etc. So I wanna use the application in react-native run-android. So it possible to import the code into the project where I have created a project using the react-native init.

Thanks in Advance. Kindly help !

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/airbnb/native-navigation/issues/49#issuecomment-331794653, or mute the thread https://github.com/notifications/unsubscribe-auth/AC8oX2suB1pCeS4zryPRKlLgEkwwVLO0ks5sl1EHgaJpZM4Meho3 .