Update to use modern techniques for React Native + TS

[orta]

From listening to native devs moving to TS, this repo is often used as the reference for RN + TS, and I think it's time we gave it a spring clean.

This issue is more of a TODO list to bring this up to speed:

• Update to the latest React Native ( you will probably need Fixed the app showing blank page. #28 ) (it may just be easier to literally start this repo from scratch)
• Update to use https://github.com/ds300/react-native-typescript-transformer instead of outputting the files to a build folder
• Provide a .vscode extensions recommendation?
• Mention the CRNA + TS setup here: https://github.com/mathieudutour/create-react-native-app-typescript
• Mention the RN + TS template here: https://github.com/emin93/react-native-template-typescript

[orta]

The rough technique to get set up with TS + RN should be:

# Init RN folder
react-native init MyAwesomeProject

# Setup TS
npm install --save-dev --dev react-native-typescript-transformer
npm install --save-dev --dev typescript
yarn tsc --init
yarn touch rn-cli.config.js # https://github.com/ds300/react-native-typescript-transformer#step-3-configure-the-react-native-packager 
npm install --save-dev --dev @types/react @types/react-native

# rename *.js -> *.ts

# Setup Jest 
npm install --save-dev ts-jest 
# copy this https://github.com/Microsoft/TypeScript-React-Native-Starter#adding-typescript-testing-infrastructure
npm install --save-dev @types/jest @types/react-test-renderer

Thoughts

• IMO, we should just recommend people do allowSyntheticDefaultImports to avoid the import * as x from "Y"
• I like that we show how to do a test 👍
• We can remove Replace old references to Component to React.Component<object, object>.

[ashfurrow]

I would be interested in helping out with this; I love documentation and I've been looking for a way to contribute back to the community. I'll begin by really familiarizing myself with the current state of the docs and then get a grasp of Orta's suggestions.

[freak4pc]

Exciting :) I was just looking into good resources to get started and bootstrapping is definitely a hard fence to go over

[adamcee]

@orta, I am following your instructions right now, and they seem great so far. My one point of confusion is, I am using create-react-native-app to get my project started. This appears to recommended as this project's README links to the "Getting Started" section of Facebook's React Native page, which recommends using create-react-native-app.

So far its been fine, and I don't think this is an issue (probably more a potential point of confusion), but I think with create-react-native-app one uses create-react-native-app MyAwesomeProject instead of react-native-init MyAwesomeProject. I'm new to all this so forgive me if I've gotten something confused.

[EDIT]

It looks like index.ios.js and index.android.js have been replaced simply by index.js, which, annoyingly, create-react-native-app MyAwesomeApp does not seem to produce. See:

• https://stackoverflow.com/questions/46455202/react-native-project-do-not-have-index-ios-js-or-index-android-js
• https://github.com/facebook/react-native/releases/tag/v0.49.0

[EDIT EDIT]

It looks like index.js does not exist for create-react-native-app because it is using Expo. And, in the package.json for create-react-native-app the "main" property, which points to a file in react-native-scripts (which is bundled with Create React Native App) is used as React Native's entry point, thus obviating the need for index.js as far as I can tell at this moment.

Ah, the joys of the ever-changing JS ecosystem. As someone experienced with React but new to React Native, these are all things I am unfamiliar with and which imho would be useful in any documentation meant for newcomers.

[EDIT EDIT EDIT]

The above steps did not quite work. I was able to start the app with Expo, but the app was broken - I got a very verbose error. I suspect this was because a) I may have needed to make modifications to App.ts App.test.ts, since they're no longer .js files, and, b) I did not know if typescript compilation was happening when I ran npm start, and if the react-native-scripts-start script was correctly getting the compiled javascript.

So, after a little searching, I found the following, which worked perfectly out of the box:
https://github.com/mathieudutour/create-react-native-app-typescript

[orta]

Yeah, for CRNA that link is definitely the right option - sorry, if I'd have been around to respond I would have recommended that having contributed to keep it up to date also. Think it's a great resource.

Maybe it should be linked in the README too, I'm gonna add this to the initial TODO list.

If you're coming from a native background CRNA isn't always an option, so I'd like to have this "from scratch" repo set up to fit how the CRNA works too (which is the aim of this issue 👍 )

[adamcee]

No worries! So far, Webpack config files my list for "most frustrating (yet super-useful!!) JS thing". This repo looks like a cool resource, and it would be great for it to be up to date. In an ideal world I would prefer to learn not using tools like CRN/CRNA, to build from scratch and understand what is going on, but, unfortunately that's often time-consuming/frustrating. So having a non-CRNA "from scratch" repo would be awesome :). And you make a good point about folks coming from the native dev world.

[jsbeckr]

There is a useful react-native template here: https://github.com/emin93/react-native-template-typescript

Maybe that can be linked in the README for non CRNA use cases.

[orta]

Agree