From dccc24d1d46490e8d6d51bc2126ea3d62bb7f5a0 Mon Sep 17 00:00:00 2001
From: Ville Immonen <ville.immonen@iki.fi>
Date: Thu, 3 Aug 2017 13:52:06 -0700
Subject: [PATCH] Move HelloWorld template to a single index.js entry point

Summary:
This change (initially discussed in https://github.com/react-community/create-react-native-app/issues/26) moves the HelloWorld project template from two nearly identical entry points (`index.android.js` and `index.ios.js`) to a single, minimal `index.js` entry point. The root component is created in `App.js`. This unifies the project structure between `react-native init` and Create React Native App and allows CRNA's eject to use the entry point from the HelloWorld template without any hacks to customize it. Also examples in the docs can be just copy-pasted to `App.js` the same way in both HelloWorld and CRNA apps without having to first learn about  `AppRegistry.registerComponent`.

* Created a new project from the template using `./scripts/test-manual-e2e.sh` and verified that:
  * The app builds, starts and runs both on Android and iOS.
  * Editing and reloading changes works.
  * The new files (`index.js`, `App.js`, `__tests__/App.js`) get created in the project folder.

<img width="559" alt="screen shot 2017-08-01 at 19 10 51" src="https://user-images.githubusercontent.com/497214/28835171-300a12b6-76ed-11e7-81b2-623639c3b8f6.png">
<img width="467" alt="screen shot 2017-08-01 at 19 09 12" src="https://user-images.githubusercontent.com/497214/28835180-33d285e0-76ed-11e7-8d68-2b3bc44bf585.png">

<!--
Thank you for sending the PR!

If you changed any code, please provide us with clear instructions on how you verified your changes work. In other words, a test plan is *required*. Bonus points for screenshots and videos!

Please read the Contribution Guidelines at https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md to learn more about contributing to React Native.

Happy contributing!
-->
Closes https://github.com/facebook/react-native/pull/15312

Differential Revision: D5556276

Pulled By: hramos

fbshipit-source-id: 068fdf7e51381c2bc50321522f2be0db47296c5e
---
 generator/copyProjectTemplateAndReplace.js    |  2 +
 .../{views/MainNavigator.js => App.js}        |  8 +--
 templates/HelloNavigation/index.android.js    |  5 --
 templates/HelloNavigation/index.ios.js        |  5 --
 .../HelloWorld/{index.android.js => App.js}   | 18 ++++---
 .../__tests__/{index.ios.js => App.js}        |  4 +-
 .../HelloWorld/__tests__/index.android.js     | 12 -----
 templates/HelloWorld/android/app/build.gradle |  4 ++
 .../java/com/helloworld/MainApplication.java  |  5 ++
 templates/HelloWorld/index.ios.js             | 53 -------------------
 templates/HelloWorld/index.js                 |  4 ++
 .../HelloWorld/ios/HelloWorld/AppDelegate.m   |  2 +-
 12 files changed, 33 insertions(+), 89 deletions(-)
 rename templates/HelloNavigation/{views/MainNavigator.js => App.js} (71%)
 delete mode 100644 templates/HelloNavigation/index.android.js
 delete mode 100644 templates/HelloNavigation/index.ios.js
 rename templates/HelloWorld/{index.android.js => App.js} (70%)
 rename templates/HelloWorld/__tests__/{index.ios.js => App.js} (81%)
 delete mode 100644 templates/HelloWorld/__tests__/index.android.js
 delete mode 100644 templates/HelloWorld/index.ios.js
 create mode 100644 templates/HelloWorld/index.js

diff --git a/generator/copyProjectTemplateAndReplace.js b/generator/copyProjectTemplateAndReplace.js
index 4d2725882..5adf70703 100644
--- a/generator/copyProjectTemplateAndReplace.js
+++ b/generator/copyProjectTemplateAndReplace.js
@@ -44,6 +44,8 @@ function copyProjectTemplateAndReplace(srcPath, destPath, newProjectName, option
       // This also includes __tests__/index.*.js
       if (fileName === 'index.ios.js') { return; }
       if (fileName === 'index.android.js') { return; }
+      if (fileName === 'index.js') { return; }
+      if (fileName === 'App.js') { return; }
     }
 
     const relativeFilePath = path.relative(srcPath, absoluteSrcFilePath);
diff --git a/templates/HelloNavigation/views/MainNavigator.js b/templates/HelloNavigation/App.js
similarity index 71%
rename from templates/HelloNavigation/views/MainNavigator.js
rename to templates/HelloNavigation/App.js
index 949fb08a9..9bd3691aa 100644
--- a/templates/HelloNavigation/views/MainNavigator.js
+++ b/templates/HelloNavigation/App.js
@@ -9,13 +9,13 @@
 import React, { Component } from 'react';
 import { StackNavigator } from 'react-navigation';
 
-import HomeScreenTabNavigator from './HomeScreenTabNavigator';
-import ChatScreen from './chat/ChatScreen';
+import HomeScreenTabNavigator from './views/HomeScreenTabNavigator';
+import ChatScreen from './views/chat/ChatScreen';
 
 /**
  * Top-level navigator. Renders the application UI.
  */
-const MainNavigator = StackNavigator({
+const App = StackNavigator({
   Home: {
     screen: HomeScreenTabNavigator,
   },
@@ -24,4 +24,4 @@ const MainNavigator = StackNavigator({
   },
 });
 
-export default MainNavigator;
+export default App;
diff --git a/templates/HelloNavigation/index.android.js b/templates/HelloNavigation/index.android.js
deleted file mode 100644
index e9ea66bf6..000000000
--- a/templates/HelloNavigation/index.android.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { AppRegistry } from 'react-native';
-
-import MainNavigator from './views/MainNavigator';
-
-AppRegistry.registerComponent('HelloWorld', () => MainNavigator);
diff --git a/templates/HelloNavigation/index.ios.js b/templates/HelloNavigation/index.ios.js
deleted file mode 100644
index e9ea66bf6..000000000
--- a/templates/HelloNavigation/index.ios.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { AppRegistry } from 'react-native';
-
-import MainNavigator from './views/MainNavigator';
-
-AppRegistry.registerComponent('HelloWorld', () => MainNavigator);
diff --git a/templates/HelloWorld/index.android.js b/templates/HelloWorld/App.js
similarity index 70%
rename from templates/HelloWorld/index.android.js
rename to templates/HelloWorld/App.js
index 71e391f53..659579088 100644
--- a/templates/HelloWorld/index.android.js
+++ b/templates/HelloWorld/App.js
@@ -6,13 +6,20 @@
 
 import React, { Component } from 'react';
 import {
-  AppRegistry,
+  Platform,
   StyleSheet,
   Text,
   View
 } from 'react-native';
 
-export default class HelloWorld extends Component {
+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}>
@@ -20,11 +27,10 @@ export default class HelloWorld extends Component {
           Welcome to React Native!
         </Text>
         <Text style={styles.instructions}>
-          To get started, edit index.android.js
+          To get started, edit App.js
         </Text>
         <Text style={styles.instructions}>
-          Double tap R on your keyboard to reload,{'\n'}
-          Shake or press menu button for dev menu
+          {instructions}
         </Text>
       </View>
     );
@@ -49,5 +55,3 @@ const styles = StyleSheet.create({
     marginBottom: 5,
   },
 });
-
-AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
diff --git a/templates/HelloWorld/__tests__/index.ios.js b/templates/HelloWorld/__tests__/App.js
similarity index 81%
rename from templates/HelloWorld/__tests__/index.ios.js
rename to templates/HelloWorld/__tests__/App.js
index ba7c5b5e1..d0b9ee316 100644
--- a/templates/HelloWorld/__tests__/index.ios.js
+++ b/templates/HelloWorld/__tests__/App.js
@@ -1,12 +1,12 @@
 import 'react-native';
 import React from 'react';
-import Index from '../index.ios.js';
+import App from '../App';
 
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';
 
 it('renders correctly', () => {
   const tree = renderer.create(
-    <Index />
+    <App />
   );
 });
diff --git a/templates/HelloWorld/__tests__/index.android.js b/templates/HelloWorld/__tests__/index.android.js
deleted file mode 100644
index b49b9087f..000000000
--- a/templates/HelloWorld/__tests__/index.android.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import 'react-native';
-import React from 'react';
-import Index from '../index.android.js';
-
-// Note: test renderer must be required after react-native.
-import renderer from 'react-test-renderer';
-
-it('renders correctly', () => {
-  const tree = renderer.create(
-    <Index />
-  );
-});
diff --git a/templates/HelloWorld/android/app/build.gradle b/templates/HelloWorld/android/app/build.gradle
index c46fd9439..ec6f30225 100644
--- a/templates/HelloWorld/android/app/build.gradle
+++ b/templates/HelloWorld/android/app/build.gradle
@@ -72,6 +72,10 @@ import com.android.build.OutputFile
  * ]
  */
 
+project.ext.react = [
+    entryFile: "index.js"
+]
+
 apply from: "../../node_modules/react-native/react.gradle"
 
 /**
diff --git a/templates/HelloWorld/android/app/src/main/java/com/helloworld/MainApplication.java b/templates/HelloWorld/android/app/src/main/java/com/helloworld/MainApplication.java
index f04af33c5..8b5a7f97b 100644
--- a/templates/HelloWorld/android/app/src/main/java/com/helloworld/MainApplication.java
+++ b/templates/HelloWorld/android/app/src/main/java/com/helloworld/MainApplication.java
@@ -25,6 +25,11 @@ protected List<ReactPackage> getPackages() {
           new MainReactPackage()
       );
     }
+
+    @Override
+    protected String getJSMainModuleName() {
+      return "index";
+    }
   };
 
   @Override
diff --git a/templates/HelloWorld/index.ios.js b/templates/HelloWorld/index.ios.js
deleted file mode 100644
index ede2dc268..000000000
--- a/templates/HelloWorld/index.ios.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- * @flow
- */
-
-import React, { Component } from 'react';
-import {
-  AppRegistry,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native';
-
-export default class HelloWorld 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 index.ios.js
-        </Text>
-        <Text style={styles.instructions}>
-          Press Cmd+R to reload,{'\n'}
-          Cmd+D or shake for dev menu
-        </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,
-  },
-});
-
-AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
diff --git a/templates/HelloWorld/index.js b/templates/HelloWorld/index.js
new file mode 100644
index 000000000..2d090c1de
--- /dev/null
+++ b/templates/HelloWorld/index.js
@@ -0,0 +1,4 @@
+import { AppRegistry } from 'react-native';
+import App from './App';
+
+AppRegistry.registerComponent('HelloWorld', () => App);
diff --git a/templates/HelloWorld/ios/HelloWorld/AppDelegate.m b/templates/HelloWorld/ios/HelloWorld/AppDelegate.m
index cff79affc..780773801 100644
--- a/templates/HelloWorld/ios/HelloWorld/AppDelegate.m
+++ b/templates/HelloWorld/ios/HelloWorld/AppDelegate.m
@@ -18,7 +18,7 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
 {
   NSURL *jsCodeLocation;
 
-  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
+  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
 
   RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                       moduleName:@"HelloWorld"