React Native Typescript Template doesn't work

Question

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!

gon250 · Accepted Answer · 2019-02-11 10:54:05Z

2

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

edited Feb 11, 2019 at 10:54

answered Feb 9, 2019 at 17:05

gon250

3,5737 gold badges48 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

emin93 · Accepted Answer · 2019-03-12 17:57:13Z

0

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.

answered Mar 12, 2019 at 17:57

emin93

1

1 Comment

Freezy Over a year ago

When I create native project with typescript template It still creates App.js and index.js, instead od .tsx

Collectives™ on Stack Overflow

React Native Typescript Template doesn't work

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related