RN-windows with TypeScript?

[creambyemute]

Sorry for polluting the issues list with this but I haven't found a reference anywhere to this:

Is it possible to use RN-windows with TypeScript? If yes, which setup/structure should you use? The one described at https://github.com/Microsoft/TypeScript-React-Native-Starter or would it be fine with this https://github.com/emin93/react-native-template-typescript approach as well?

Cheers and thanks for providing UWP SDK to React Native!

[jmcginty]

Hi @creambyemute , you can use typescript with RNW. We have a large RNW project with > 300 typescript files. Not sure which starter project you should use, we converted across from pure js without a starter project.

[creambyemute]

@jmcginty Thansk for the clarification. Do I have to consider some special things (structure, file placement, file naming) in order to make it work with TypeScript and RNW?

[jmcginty]

Our structure is with all the .ts files under a "\src" folder, which builds to a folder called "\build" which contains all the .js files.

One "gotcha" is that at some point, the react native bundler stopped understanding .map files which allow you to debug in chrome looking at the typescript sources - you can only see the complied javascript when debugging. We haven't found this to be an issue.

The only other thing which stumped us for a while was the platform specific file extensions. Given two component files called PickerContainer.ios.tsx PickerContainer.windows.tsx

The RN bundler will automatically choose the right one based on your platform. Typescript requires you to specifically import a file, so you can't just say import PickerContainer from './PickerContainer'

because there are two, and neither match.

You need to create a "PickerContainer.tsx" file containing something like this:

import { Component } from 'react'
import { Platform } from 'react-native'
import Ios from './PickerContainer.ios'
import Windows from './PickerContainer.windows'

export interface PickerContainerProps {
  dataset?: any
  onSelected: (res: {id: string, name: string}) => void
  searchPlaceholder?: string
  selectedId?: string
  currentSavedId?: string
  selectedText?: string
}

export default function (ownProps: PickerContainerProps): Component<PickerContainerProps, any> {
  if (Platform.OS === 'ios') {
    return new Ios(ownProps)
  } else {
    return new Windows(ownProps)
  }
}

I'm happy to provide copies of our tslint.json, tsconfig.json, and package.json if that helps

[creambyemute]

@jmcginty Thanks for the inputs!

How about the App.windows.js? Did you move that to a .tsx file as well?

tslint and tsconfig examples would be sweet as well If you already have a "big" project running react-native-windows 👍

Do you use many native apis/features? If yes, did you write most of them yourself for Windows I guess, I haven't found many libraries that support windows.

Thx for you inputs again :)

Btw, I'll close this issue soon, but ppl will be able to find it so it may provide them with a good starting point/understanding as well.

[creambyemute]

@jmcginty How do u make the changes in .ts/.tsx be compiled/built onSave? I always have to run ./node_modules/.bin/tsc in order to see the changes in the emulator.

[jmcginty]

I have created a sample project over here https://github.com/jmcginty/ReactNativeWindowsTypeScript

TL;DR use npm module "concurrently" to run things side by side. Have a look in the package.json setup

RNWTypeScript@0.0.1 start C:\Git\ReactNativeWindowsTypeScript concurrently "node node_modules/react-native/local-cli/cli.js start" "tsc -w" --kill-others --prefix "[{name}]" --names "react-native,tsc"

[tsc] 21:50:52 - Compilation complete. Watching for file changes. [tsc] [tsc] [react-native] Scanning folders for symlinks in C:\Git\ReactNativeWindowsTypeScript\node_modules (63ms) [react-native] ┌─────────────────────────────────────────────────────────────┐ [react-native] │ │ [react-native] │ Running Metro Bundler on port 8081. │ [react-native] │ │ [react-native] │ Keep Metro running while developing on any JS projects. Feel free to │ [react-native] │ close this tab and run your own Metro instance if you prefer. │ [react-native] │ │ [react-native] │ https://github.com/facebook/react-native │ [react-native] │ │ [react-native] └──────────────────────────────────────────────────────────────┘ [react-native] [react-native] Looking for JS files in [react-native] C:\Git\ReactNativeWindowsTypeScript [react-native] [react-native] [react-native] Metro Bundler ready. [react-native] [react-native] Loading dependency graph, done. [react-native] BUNDLE [windows, dev] ./index.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (488/488), done. [react-native]

[jmcginty]

Oh, and one more thing - currently using TypeScript 2.5.3, as upgrading to 2.7.x breaks Hot Reloading. Haven't investigated why, but just assuming this will be fixed in an upcoming release. .

[creambyemute]

Nice, thanks!

One more question, is there some recommendation about navigation library for windows? We're looking at react-navigation as that'd would work on uwp out of the box as well

[jmcginty]

We use react-navigation..

[jmcginty]

FYI - when I said that we were stuck on TypeScript 2.5.3 due to Hot Reloading issues, this is fixed now in 2.8.3. Happy days