Typescript Template initialised as a folder

[mayzyo]

Environment

System:
OS: macOS 10.14.4
CPU: (4) x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
Memory: 3.57 GB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.15.3 - /usr/local/bin/node
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
IDEs:
Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.6 => 16.8.6
react-native: 0.60.5 => 0.60.5
npmGlobalPackages:
react-native-cli: 2.0.1

Description

When I initialised a project with the typescript template, it completes with the template as a folder inside the project folder instead of being applied to the project. The project app file is still app.js, while the app file inside the template folder is app.tsx. Both contains a set of /ios /android and package.json etc.

The github editor won't let me process the screenshot png file for some reason.

Reproducible Demo

react-native init projectname --template typescript

[JoelOnGithub]

I have this same issue.
Command used: react-native init AwesomeProject --template typescript

This leads to the following files

├── App.js
├── LICENSE
├── README.md
├── __tests__
│   └── App-test.js
├── android
│   ├── app
│   ├── build.gradle
│   ├── gradle
│   ├── gradle.properties
│   ├── gradlew
│   ├── gradlew.bat
│   └── settings.gradle
├── app.json
├── babel.config.js
├── index.js
├── ios
│   ├── Podfile
│   ├── Podfile.lock
│   ├── Pods
│   ├── build
│   ├── MyProject
│   ├── MyProject-tvOS
│   ├── MyProject-tvOSTests
│   ├── MyProject.xcodeproj
│   ├── MyProject.xcworkspace
│   └── MyProjectTests
├── metro.config.js
├── package.json
├── template
│   ├── App.tsx
│   ├── __tests__
│   ├── android
│   ├── app.json
│   ├── babel.config.js
│   ├── index.js
│   ├── ios
│   ├── metro.config.js
│   └── package.json
├── template.config.js
└── yarn.lock

Now when I run react-native run-ios, the bundlers says

Failed to construct transformer:  { Error: Duplicated files or mocks. Please check the console for more info
    at setModule (/Users/.../code/pocs/rn/MyProject/node_modules/jest-haste-map/build/index.js:620:17)
    at workerReply (/Users/.../code/pocs/rn/MyProject/node_modules/jest-haste-map/build/index.js:691:9)
    at process._tickCallback (internal/process/next_tick.js:68:7)
  mockPath1: 'package.json',
  mockPath2: 'template/package.json' }

[mayzyo]

I was able to get it working by uninstalling react-native-cli globally, and using
npx react-native init myproject --template react-native-typescript-template

This is the recommended method on react-native-cli github page as of 0.60; however, the official document on React Native still indicates to use react-native-cli global method.

--template react-native-typescript-template
was cited in react-native-community/react-native-template-typescript

[mayzyo]

@JoelOnGithub I had the same error report, its because you have 2 /ios folders in the project, one in the main project folder and one in /template folder

[Quadriphobs1]

@DarknessZY I actually don't think the command would work because internally the cli prefix your template input with react-native- so if you have react-native-typescript-template it will resolve to react-native-template-react-native-typescript-template which doesn't exist

[mayzyo]

@Quadriphobs1 I thought the same initially, and had that resulting error. But after following the official instruction to uninstall the react-native-cli globally and use npx react-native, it resolved without an issue. I assume they must've changed how it works :/

[thymikee]

react-native init and npx react-native init are separate commands, the former being "legacy" and the later being the "new init" and the one we recommend currently. We didn't remove legacy init yet, because there's a lot of training material using it. And we had pretty good reasons to create a new command. The new one doesn't support template shorthands, you need to pass full name of npm package or github repo or absolute path to tarball or a local directory.

Please visit documentation: https://github.com/react-native-community/cli/blob/master/docs/init.md

[AndreiCalazans]

For anyone else getting this issue

if react-native-cli was installed via yarn:

1. yarn global remove react-native-cli

if npm:

1. npm uninstall -g react-native-cli --save

then

2. npx react-native init YourAppName --template react-native-template-typescript

Since you no longer have react-native-cli globally when when cd into your directory do

3. npx react-native run-ios or npx react-native run-android

[mohamed-Hamdy97]

i have the same problem and found the main issue from the old react-native-cli is installed globally
and it is mentioned at
this repo

so the solution

1. remove react-native-cli globally using npm and yarn
   yarn global remove react-native-cli
   and
   npm uninstall -g react-native-cli --save

2. the you can use the same command using npx it is great for not installing library globally
   npx react-native init myappName --template react-native-template-typescript

3. go to the folder
   cd myappName

4. finally run the app by any command you like
   yarn android
   or
   yarn ios
   or
   npx react-native run-ios

it works ..