React Native project without TypeScript – Typescript

The Problem:

Creating a React Native project without TypeScript using the React Native CLI. While setting up a new React Native project using the CLI, it’s observed that TypeScript is used by default. Manual removal of TypeScript is not desired. Is there a way to create a React Native project without TypeScript using the command line interface?

The Solutions:

Solution 1: Removing TypeScript Manually

1. Create a new React Native project using npx react-native init MyProject as usual.

2. Remove all *.ts files from the project.

3. In the package.json file, change all occurrences of ".ts" to ".js".

4. Remove the following lines from the package.json file:

   • "typescript": "latest"
   • "jsx": "react-jsx"

5. Install @babel/plugin-transform-typescript and babel-preset-expo packages:

   • npm install --save-dev @babel/plugin-transform-typescript babel-preset-expo

6. Create or update the .babelrc file in your project directory with the following content:

{
  "presets": ["expo"],
  "plugins": ["@babel/plugin-transform-typescript"]
}

7. Depending on the version of React Native you are using:

   • For React Native versions 0.63 and above, add --no-packager to the react-native start command.
   • For React Native versions below 0.63, add --reset-cache to the react-native start command.

8. Start the development server using react-native start --no-packager (or react-native start --reset-cache for older versions).

9. Your React Native project should now be running without TypeScript.

Tips:

• To keep your project up to date, use npx react-native upgrade instead of react-native upgrade. This will prevent TypeScript from being re-introduced into your project.

Note:

This method may not be suitable for projects that already have a significant amount of TypeScript code. In such cases, it is recommended to use a different approach, such as gradually migrating the codebase to JavaScript or using a tool like ts-migrate to automate the conversion.

Solution 2: Use JavaScript Instead of TypeScript

When creating a new React Native project using the React Native CLI, TypeScript is enabled by default since version 0.71. While it’s possible to manually change file extensions to .js and .jsx and remove unnecessary TypeScript packages, it’s generally recommended to use TypeScript for its type-checking features.

Here are the steps to create a new React Native project without TypeScript using the CLI:

1. Install the React Native CLI globally:

npm install -g react-native-cli

2. Create a new React Native project:

react-native init MyProject --template react-native-template-js

Note: Make sure to specify the --template react-native-template-js flag to use the JavaScript template.

3. Navigate to the project directory:

cd MyProject

4. Run the packager:

react-native start

5. Run the project on iOS or Android:

For iOS:

react-native run-ios

For Android:

react-native run-android

This will launch the project using the JavaScript template, without TypeScript.

Using JavaScript Instead of TypeScript:

While TypeScript offers type checking and improved code organization, it can sometimes be more complex for beginners. If you prefer a simpler approach, you can use JavaScript instead. However, keep in mind that TypeScript is widely adopted in the React Native community and provides several benefits in terms of code maintainability and error detection.

Conclusion:

You can use JavaScript instead of TypeScript in your React Native project, but TypeScript is generally recommended for its type checking and code organization features. Ultimately, the choice depends on your preferences and project requirements.

Video Explanation: