create-react-native-app and react-navigation

[wjgilmore]

Hi,

I'm attempting to use the new create-react-native-app with react-navigation and haven't gotten very far due to the following error:

2:42:02 PM: Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in. Check the render method of AwakeApp.

This app is brand new, meaning I ran:

$ npm install -g create-react-native-app
$ create-react-native-app my-project
$ cd my-project
$ npm start

After confirming the app opened in Expo, I returned to the command line and ran:

$ npm install --save react-navigation

I then swapped out my App.js code with the following code (from the react-navigation website):

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

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    return <Text>Hello, Navigation!</Text>;
  }
}

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
});

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

Upon Expo reload, the aforementioned occurred. I've searched high and low for an answer, but nothing has turned up. Really appreciate any input here!

Jason

[skevy]

cc @dikaiosune

I apologize for the bad error!

Here's an example of how to use react-navigation in CRNA: https://sketch.expo.io/B1nQSrdsg

(I know this example is in Sketch, but the same pattern applies to CRNA)

[wjgilmore]

No apologies necessary thank you *so* much! Just stepped out of my office but when get back I'll give this a whirl and will report back. Thanks a million! Jason

…

On Mar 16, 2017, at 2:50 PM, Adam Miskiewicz ***@***.***> wrote: cc @dikaiosune I apologize for the bad error! Here's an example of how to use react-navigation in CRNA: https://sketch.expo.io/B1nQSrdsg (I know this example is in Sketch, but the same pattern applies to CRNA) — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[anp]

@skevy do you think it's worth having a CRNA mention on react-navigation's guide that explains to exclude AppRegistry?

[rizwanellahi]

Hi, I am facing similar issue in React Navigation:

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

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    return Hello, Navigation!;
  }
}

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
});

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

I am facing this error on https://sketch.expo.io/HyjGivOil
Error log > Object is not a constructor (evaluating 'new r')

[jimmytb]

Just had the same problem as @wjgilmore , @skevy example fixed my problem, thanks!

[wjgilmore]

Hi @skevy and @dikaiosune

Just following up, this worked perfect, thanks so much! I have tried probably every RN navigator out there, and this one is by far the most intuitive. So happy to have it working. Thanks again!

Jason

[wjgilmore]

Just reopening because I suspect there may be one more issue here. The header does not appear despite adding the following to one of the screen classes:

static navigationOptions = {
  title: 'Welcome',
};

There is no error; the header just does not appear. There seems to be some disconnect between what's documented at https://reactnavigation.org/docs/intro/ and what should be done for create-react-native-app? Happy to test out any theories here and report back!

Here's a sketch:

https://sketch.expo.io/BJZ_aoOol

Jason

[ericvicenti]

@wjgilmore, in your sketch you are only using a TabNavigator, and the header is provided by StackNavigator, which is often used as a screen inside of the top TabNavigator. Apologies for the confusion!

[helmutgranda]

I just want to add that I was getting the same error by following the tutorial here: https://reactnavigation.org/docs/intro/

The most confusing part was the AppRegistry usage specially when Facebook's documentation talks about AppRegistry being the JS entry point for all React Native apps: https://facebook.github.io/react-native/docs/appregistry.html

It would be nice to know where to find the documentation where covers the difference of both instantiations.

[topless]

@skevy cc @dikaiosune

Your example works fine but only for iOS, on android is just a blank screen, any idea?

[pjcevans]

@topless

I think that on android the width of the TabNavigator is defaulting to 0

Try this out, I've just added a width property within the tabBarOptions: https://snack.expo.io/Sk3W8egTl

[subodhpareek18]

@pjcevans yes you are right, adding a manual width solved the issue for TabNavigator appearing blank on Android. But any idea how to achieve the same for Stacknavigator, which similarly shows a blank screen.

I'd say all navigators might be facing this issue on android.

cc @dikaiosune

[pjcevans]

@zusamann I agree that it was awkward that these navigators seem to have no width by default on android... The same approach didn't seem to work with StackNavigators, what I ended up doing was adding a full width sibling along with the StackNavigator, like this:

  <View>
    <Text style={{width: screenWidth}}></Text>
    <SomeStackNavigator />
  </View>

Where screenwidth is the width of the screen:

let screenWidth = Dimensions.get("window").width;

[pierre-H]

I tried the @pjcevans tip and the @skevy example and I still got a blank screen with Android ...

[pierre-H]

@skevy : tried your sketch with Android device and I've got the same error like in the sketch emulator for Android v16.0.0

[pierre-H]

Tried all skech proposed in this issue, and the blank screen is still here even with the @pjcevans solution

[pierre-H]

Ok, I found the solution : https://snack.expo.io/SksoGXR0l

Note : Style with width property is set on the MainScreenNavigator and the View.

[pierre-H]

I just updated to 1.0.0-beta.9 and the last version of CRNA (with v16 Expo) and with Redux I've got a problem because I do something like this :

class AppWithNavigation extends React.Component {
  render() {
    return (
      <AppNavigator style={{width: Dimensions.get("window").width}} navigation={addNavigationHelpers({
        dispatch: this.props.dispatch,
        state: this.props.nav,
      })} />
    );
  }
}

And I've got this error :

This navigator has both navigation and container props, so it is unclear if it should own its own state.
So I have to choose between style and navigation prop ...

Does anyone have a solution ?

[Stophface]

@pjcevans How would you set the width dynamically, so that when you turn the phone horizontally (and the App started when the phone was hold vertically), that the navigation stretches over the whole screen? With your approach the width is fixed and does not extend, when the phone is turned. It stays the size it got on startup.

[daviddat]

This is good example for your problem:
http://rationalappdev.com/cross-platform-navigation-in-react-native/

[nickjuntilla]

Using this example I'm still only seeing the first screen and first navigation option, but no other pages or navigation options.

[spiewak]

Here is a solution which works with CRNA (version: 1.0.0) on IOS and Android: https://snack.expo.io/rJpkAaKF-