Move HelloWorld template to a single index.js entry point

[fson]

This change (initially discussed in expo/create-react-native-app#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.

Test plan:

• 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.

[pull-bot]

📄 Thanks for your contribution to the docs!

Attention: @facebook/react-native

Generated by 🚫 dangerJS

[hramos]

This is great! I'm slightly concerned that this may make writing different code for iOS and Android less discoverable, but that's something we can address by updating the Platform Specific Code docs.

Does this affect projects that use react-native init? IIRC, the HelloWorld template is a different template than what init uses.

[fson]

This HelloWorld template is used by react-native init by default (you can specify another template with the --template argument). I've tested the init flow using ./scripts/test-manual-e2e.sh.

Also react-native upgrade and react-native eject use the template. react-native upgrade should not be affected, since it calls copyProjectTemplateAndReplace with the upgrade flag, which tells it to not touch the entry point files. One thing we should still check is that also the HelloNavigation template works correctly after this change. It seems that react-native init uses the HelloWorld template as the base template and then just adds whichever custom template is specified on top.

It's true that getting rid of separate index.ios.js and index.android.js files makes at least that particular method of writing platform specific code (platform-specific file extensions) less discoverable. On the other hand we now show another way in the App.js file, Platform.select(), which is particularly useful for small differences between platforms.

[fson]

The navigation template is layered on top of the HelloWorld template when you run react-native init Project --template navigation. Therefore I've also adapted it to use App.js, so that it replaces the App.js added from HelloWorld.

The navigation template itself seems to be a bit outdated right now, it's using an older version of react-navigation which isn't compatible with React 16, so I couldn't run it for now. It should work once upgraded.

[facebook-github-bot]

@hramos has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.