Unable to start new react-native > 0.49 project with react-native-navigation

[pepya2]

Issue Description

I have been struggling to start new react-native project with react-native 0.49 onwards, since they default to App.js not index.android.js or index.ios.js then giving me error "can not find entry file index.android.js" or even when i run in ios simulator gives "can not find entry file index.ios.js" but when i run project without linking and using react-native-navigation it works.

Steps to Reproduce / Code Snippets / Screenshots

Steps to Reproduce.

1. Started new react-native project with simply react-native init navigationtest
   Default files and folders created are as follows..
   

2. added react-native-navigation with yarn add react-native-navigation@latest

3. followed integration steps outlined in here https://wix.github.io/react-native-navigation/#/

4. started react-native packager

5. tested to run on android simulator.. the following error (always exist from react-native^0.49 after adding react-native-navigation and link)

My Package.json file

{
	"name": "navigationtest",
	"version": "0.0.1",
	"private": true,
	"scripts": {
		"start": "node node_modules/react-native/local-cli/cli.js start",
		"test": "jest"
	},
	"dependencies": {
		"react": "16.0.0",
		"react-native": "0.50.3",
		"react-native-navigation": "^1.1.283"
	},
	"devDependencies": {
		"babel-jest": "21.2.0",
		"babel-preset-react-native": "4.0.0",
		"jest": "21.2.1",
		"react-test-renderer": "16.0.0"
	},
	"jest": {
		"preset": "react-native"
	}
}

i really want to use react-native > 0.49 with react-native-navigation.. there's a module that requires react-native^0.49.

---

Environment

• React Native Navigation version: 1.1.283
• React Native version: 0.50.3
• Platform(s) (iOS, Android, or both?): both
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator

[chaitanya-bhagavan]

RN 0.49 removed platform specific index files, hence 404 for index.ios.js and index.android.js. The documentation for RNN does not reflect this change. Do the following for a fix.
Add below method to your Application.java

    @Override
    public String getJSMainModuleName() {
        return "index";
    }

On IOS in AppDelegate.m change the below line

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
to

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

[pepya2]

Here are Results!!..

after i added

    @Override
    public String getJSMainModuleName() {
        return "index";
    }

on android then run on simulator, gave me white blank screen, and after substituting
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
to
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
on ios, then i tried to build.. build failed with no error! just said build failed.. tried to clean project then build again still said build failed.. so that did not fix.

I removed "react-native-navigation": "^1.1.283" with react-native uninstall react-native-navigation and installed alpha as today (21/Nov/2017) current version is "react-native-navigation": "^2.0.2016"

i linked alpha version correctly by following this guide https://wix.github.io/react-native-navigation/v2/#/

TESTING ON ANDROID

after running on simulator without adding

    @Override
    public String getJSMainModuleName() {
        return "index";
    }

still gave me error

i added

    @Override
    public String getJSMainModuleName() {
        return "index";
    }

on MainApplication.java as

and when i ran, gave me error..

so i don't know what to do (that is in case of Android)..

TESTING ON iOS

after replacing AppDelegate.m codes as instructed here https://wix.github.io/react-native-navigation/v2/#/docs/installation-ios then ran the project, Project ran successfully but on simulator it hanged on splash screen.. restarted again but hanged on splash screen

here are my core files
1. Package.json

{
	"name": "navigationtest",
	"version": "0.0.1",
	"private": true,
	"scripts": {
		"start": "node node_modules/react-native/local-cli/cli.js start",
		"test": "jest"
	},
	"dependencies": {
		"react": "16.0.0",
		"react-native": "0.50.3",
		"react-native-navigation": "^2.0.2016"
	},
	"devDependencies": {
		"babel-jest": "21.2.0",
		"babel-preset-react-native": "4.0.0",
		"jest": "21.2.1",
		"react-test-renderer": "16.0.0"
	},
	"jest": {
		"preset": "react-native"
	}
}

2. index.js

import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('navigationtest', () => App);

3. App.js

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

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

What is the next...

[chaitanya-bhagavan]

Let's not use RNN 2 for now. Can you create a repo on GitHub with the project files? Please ensure you use RNN 1.x

…

On 21-Nov-2017 7:28 PM, "pepya2" ***@***.***> wrote: Here are Results!!.. after i added @OverRide public String getJSMainModuleName() { return "index"; } on android then run on simulator, gave me white blank screen, and after substituting jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil]; to jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; on ios, then i tried to build.. build failed with no error! just said build failed.. tried to clean project then build again still said build failed.. so that did not fix. I removed "react-native-navigation": "^1.1.283" with *react-native uninstall react-native-navigation* and installed alpha as today (21/Nov/2017) current version is *"react-native-navigation": "^2.0.2016"* i linked alpha version correctly by following this guide https://wix.github.io/react-native-navigation/v2/#/ TESTING ON ANDROID after running on simulator without adding @OverRide public String getJSMainModuleName() { return "index"; } still gave me error [image: 33049389-ecd7f7b6-ce70-11e7-825b-50910eb3f58a] <https://user-images.githubusercontent.com/25289859/33075728-82d209ea-cedb-11e7-8d8d-778bc0a16776.png> i added @OverRide public String getJSMainModuleName() { return "index"; } on MainApplication.java as [image: 1] <https://user-images.githubusercontent.com/25289859/33075777-b2ffdfca-cedb-11e7-97f6-f2e21918d98d.png> and when i ran, gave me error.. [image: 2] <https://user-images.githubusercontent.com/25289859/33075818-d3df51b2-cedb-11e7-8cf9-80f4a592ba08.png> so i don't know what to do (that is in case of Android).. TESTING ON iOS after replacing AppDelegate.m codes as instructed here https://wix.github.io/react-native-navigation/v2/#/docs/installation-ios then ran the project, Project ran successfully but on simulator it hanged on splash screen.. restarted again but hanged on splash screen [image: 3] <https://user-images.githubusercontent.com/25289859/33075953-3b4ea762-cedc-11e7-9f8d-9846af2c0921.png> here are my core files *1. Package.json* { "name": "navigationtest", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "dependencies": { "react": "16.0.0", "react-native": "0.50.3", "react-native-navigation": "^2.0.2016" }, "devDependencies": { "babel-jest": "21.2.0", "babel-preset-react-native": "4.0.0", "jest": "21.2.1", "react-test-renderer": "16.0.0" }, "jest": { "preset": "react-native" } } *2. index.js* import { AppRegistry } from 'react-native'; import App from './App'; AppRegistry.registerComponent('navigationtest', () => App); *3. App.js* import React, { Component } from 'react'; import { Platform, StyleSheet, Text, View } from 'react-native'; const instructions = Platform.select({ ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu', android: 'Double tap R on your keyboard to reload,\n' + 'Shake or press menu button for dev menu', }); export default class App extends Component<{}> { render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit App.js </Text> <Text style={styles.instructions}> {instructions} </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, }); What is the next... — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2201 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEkuVd7kUrb1X9AwISrmMBGxN52oOWenks5s4tcTgaJpZM4QlIy_> .

[pqkluan]

If your app is not required RN 0.49+ then the shortest way to fix this is using RN 0.48.4 while waiting for the team to upgrade.

react-native init ExampleApp --version 0.48.4

Also closing this issue since it's duplicate with #2040

[adrienharnay]

Hey for people still running into this issue,, I updated the docs to explain the changes needed on ios and android: #2412

As for the blank screen it may be because you didn't follow the Usage section to adapt the entry of your app

[angusmccloud]

I have Android working fine, but iOS is just getting stuck on the Splash screen (it doesn't crash, it just sits there forever).

My AppDelegate.m has:
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

I'm always used a single entry-point app (just pointed the other indexes at app.js), but I've played around with the index.js file trying to get it to do SOMETHING. It currently looks like:

`
import { AppRegistry } from 'react-native';
import App from './App';
import { Navigation } from 'react-native-navigation';

//AppRegistry.registerComponent('BrewGene', () => App);

Navigation.registerComponent('BrewGene', () => RunseApp);
Navigation.startSingleScreenApp({
screen: {
screen: 'BrewGene',
title: 'Welcome',
navigatorStyle: {}, // override the navigator style for the screen, see "Styling the navigator" below (optional)
navigatorButtons: {} // override the nav buttons for the screen, see "Adding buttons to the navigator" below (optional)
},
passProps: {}, // simple serializable object that will pass as props to all top screens (optional)
animationType: 'slide-down' // optional, add transition animation to root change: 'none', 'slide-down', 'fade'});
});
`

Any suggestions on what I'm missing here? Really struggling here...
+-- react-native@0.51.0
+-- react-native-navigation@1.1.334

Other Modules:
+-- babel-jest@19.0.0
+-- babel-preset-react-native@1.9.2
+-- flow-bin@0.41.0
+-- invariant@2.2.2
+-- jest@19.0.2
+-- react@16.0.0
+-- react-native-collapsible@0.8.1
+-- react-native-fbsdk@0.7.0
+-- react-native-image-picker@0.26.7
+-- react-native-keyboard-aware-scroll-view@0.4.1
+-- react-native-md5@1.0.0
+-- react-native-sglistview@0.3.10
+-- react-native-social-share@1.4.0
+-- react-navigation@1.0.0-beta.23
+-- warnings@1.0.1

[dreamdev21]

Any update?
I have same issue on RN 0.54 iOS running.