CODEWITHSUNDEEP
reactjstypescriptreact-native
gon250
gon250

Reputation: 3545

React Native Typescript Template doesn't work

I have created a new project of React Native with a typescript template using the official command react-native init MyApp --template typescript (a couple of times) and I can't see the changes I apply when I run the app. Looks like the hot reload its working on terms of refresh the screen but doesn't apply the changes. In the case I create the app without typescript all its working properly.

I don't get any error so I have no idea what I can do. Below its the package.json in case this help but its basically the autogenerated file from typescript template

{
  "name": "MyApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.6.3",
    "react-native": "0.58.4"
  },
  "devDependencies": {
    "@types/jest": "^24.0.0",
    "@types/react": "^16.8.2",
    "@types/react-native": "^0.57.34",
    "@types/react-test-renderer": "^16.8.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "24.1.0",
    "jest": "24.1.0",
    "metro-react-native-babel-preset": "0.51.1",
    "react-test-renderer": "16.6.3",
    "ts-jest": "^23.10.5",
    "typescript": "^3.3.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["es6"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext"
  },
  "exclude": ["node_modules", "babel.config.js"]
}

Any idea how I can get react-native working with typescript. Thanks!

Upvotes: 1

Views: 3086

Answers (2)

emin93
emin93

Reputation: 1

Seems like you didn't execute the post installation setup script which takes care of removing the App.js file. Anyway, that's not necessary anymore as with the release of React Native 0.59 the post installation setup script is being executed automatically.

Upvotes: 0

gon250
gon250

Reputation: 3545

I have find the solution, and basically when you create the react native app using the typescript template in the ./ of your project apperar 2 files named App (App.js and App.tsx) so basically the solution to get this working is go to the index.js and replace

import App from './App'; per import App from './App.tsx';

index.js

import {AppRegistry} from 'react-native';
import App from './App.tsx';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

Also you can solve the problem removing the .js file so the index will point to the .ts

Upvotes: 2

Related Questions