Add typescript to existing react native project
Photo by Caspar Camille Rubin on Unsplash
Are you tired of trying to create a react-native project with a typescript template and ending up with the latest version every time? Well, I have the solution for you! Follow these steps to create your custom react-native project with a typescript template.
npx react-native init MyApp --template react-native-template-typescript --version 0.65.0
It seems like this doesn't work and you have to create a react-native with javascript template and then add typescript later. That's what I want to show you how to do today.
Steps you have to perform in order.
** Step 1: ** Create a react-native project with your desired version and install all the required dependencies npx react-native init MyApp --version 0.65.0 yarn add -D typescript @types/jest @types/react @types/react-native @types/react-test-renderer
** Step 2: ** Add a TypeScript config file. Create a tsconfig.json at the root of your project:
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"isolatedModules": true,
"jsx": "react-native",
"lib": ["es2017"], "moduleResolution": "node",
"noEmit": true,
"strict": true,
"target": "esnext"
},
"exclude": [
"node_modules",
"babel.config.js",
"metro.config.js",
"jest.config.js"
]
}
** Step 3: ** Create a jest.config.js file to configure Jest to use TypeScript
module.exports = {
preset: 'react-native',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
};
** Step 4: ** Rename a JavaScript file to be *.tsx. You should leave the ./index.js entry point file as it is otherwise you may run into an issue when it comes to bundling a production build.
** Step 5: ** Run yarn tsc to type-check your new TypeScript files.
This should you get started with a react-native project in typescript and a custom version.
Thank you for reading, If you need help on how to use this, hit me up and I will be happy to help you get going. Let me know if this has helped.