Bootstrapping a React Native Project in 2019
When it comes to creating a new React Native project, many things have changed lately. Expo which used to support Flow out of the box now supports TypeScript. Babel now supports TypeScript as well. The cherry on top of the cake: ESLint also now supports parsing of TypeScript files. It feels like a dream come true.
Below is the script that I use to create new React Native projects.
First, we create the project using expo init . Then we add the eslint package as well as a plugin that I use to keep a source of truth for all my linting. While you might use your own default rules, the plugin repository is worth to take look at: it’s a good example on how to configure ESLint support on TypeScript files. We also need the @types/expo package.
Next step, we rename App.js to App.tsx . Then we download two files: tsconfig.json for the type checking configuration, and .eslintrc for the linting configuration.
In tsconfig.json , we set the noEmit to true: TypeScript is now only a type checker. Babel is taking care of the compilation. moduleResolution needs to be set to node in order for the module resolution to match 1-to1 with the React Native module resolution. For now, allowSyntheticDefaultImports needs to be set to true because a React Native type definition still rely on a synthetic default import of React. In include , we add the web speech API type definition we need in order for the Expo type definition to work properly. And for the web speech API definition to work properly, we need to add the React and React Native type definition to the types property. This is because the web speech API definition relies on types defined by React Native.
The Expo still needs some improvements but it looks like the community is on top of it 😀
Last thing, don’t forget to configure ESLint to also lint TypeScript files in the VSCode settings.
Et Voilà!
Hopefully, you will find this information useful. Do you bootstrap your React Native Project in a similar manner? What are your tips and tricks? Looking forward to reading them.
Looking to build your best app yet? Check out React Native Elements.
