This will no longer be used once we refactor the project to use TypeScript. This is used for implementing type-checking for props. Also, if you’re following the manual install for Android, only follow until the 6th step. Note: don’t follow the very first step, the one for installing react-native-camera with npm since we already installed it with Yarn. This is because react-native link affects both platforms. We’re only doing the manual install for Android because we don’t want the automatic install to affect iOS. If you’re only testing on Android, you can safely follow the automatic install for Android. After that, read through the following links based on the platform you will be running the app on: For both platforms, follow the requirements section first. Once that’s done, follow the installation instructions on the GitHub repo of the module. Next, in the root directory of the project you created, install react-native-camera: And also to fix some of the linting errors that will surely show once we’ve setup linting on Sublime Text. Though we’ll refactor the code in a later section so we can benefit from TypeScript’s type-checking capabilities. This means you don’t have to update the code just to get it to work. Note that the existing JavaScript code are valid TypeScript code as well. js files inside the src directory as well. Once the project is created, copy the following files (and folders) from the repo you cloned earlier:Īfter copying them over, delete the existing App.tsx file then rename the App.js file to App.tsx. We’ll go through this template later, so you know what it’s actually doing, and how is it set up. This method is by far the simplest and easiest way to get started with TypeScript in React Native. The typescript template that we’re using is created by Emin Khateeb. This option has been around since the 0.42 release. This allows you to customize which template you want your project to use. The only difference is you’re specifying a -template option. Here’s how it looks like:Īs you can see from the command above, it’s like setting up a plain React Native project. The only thing it does is allow the user to take a picture and then preview it. The project that we will be working with is a simple camera app. That’s why at the end of the section for setting up Sublime Text for TypeScript development, I’m going to point out some links that will help you do a similar setup to what we’re going to do here. We’re specifically going to use Sublime Text in this tutorial, but there should be an equivalent for the text editor you’re using as well. You also need to know your way around the text-editor you are using. I’ve used Node version 8.3.0 for testing, so anything higher than that should also be good. I assume you’ve set up the React Native development environment on your machine. To follow this tutorial, you need to have basic knowledge of developing React Native apps. The only change I made to it is adding the Gradle 3 configuration. The starter branch simply contains a sample of how your project will look like when you use the TypeScript template to initialize a new React Native project. While the branch containing the final output of this tutorial is the typescript branch. The starter project which contains a standard React Native project is on the standard-rn branch. You can view the source code used in this tutorial on this GitHub repo. The aim of this tutorial is just to get you up and running with TypeScript in React Native quickly. So I’m not going to sell you in the idea that TypeScript is better than Flow. This tutorial assumes that you’ve already weighed the pros and cons of using TypeScript over Flow. Refactoring the code of an existing project to use TypeScript.Setting up linting and auto-completion of TypeScript code for Sublime Text.Setting up a new React Native project that uses TypeScript.Specifically, we’re going to take a look at the following: In this tutorial, we’re going to take a look at how you can use TypeScript for building your React Native projects.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |