{"id":17689369,"url":"https://github.com/morishin/reactnativepractice","last_synced_at":"2025-05-13T01:37:41.699Z","repository":{"id":73381457,"uuid":"114355134","full_name":"morishin/ReactNativePractice","owner":"morishin","description":"Example of React Native + TypeScript with TSLint and Prettier","archived":false,"fork":false,"pushed_at":"2018-07-21T02:56:52.000Z","size":694,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-26T17:12:27.132Z","etag":null,"topics":["react-native","typescript"],"latest_commit_sha":null,"homepage":"","language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/morishin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-15T09:52:31.000Z","updated_at":"2018-07-21T02:56:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"a47430b9-bf63-4149-b6b2-19544ff61c83","html_url":"https://github.com/morishin/ReactNativePractice","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morishin%2FReactNativePractice","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morishin%2FReactNativePractice/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morishin%2FReactNativePractice/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morishin%2FReactNativePractice/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/morishin","download_url":"https://codeload.github.com/morishin/ReactNativePractice/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243281148,"owners_count":20266153,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-native","typescript"],"created_at":"2024-10-24T11:47:34.695Z","updated_at":"2025-03-12T19:32:06.869Z","avatar_url":"https://github.com/morishin.png","language":"Objective-C","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ReactNativePractice\nExample of React Native + TypeScript with [TSLint](https://palantir.github.io/tslint/) and [Prettier](https://prettier.io/)\n\n## How did I setup\n`react-native` version is `0.51.0`\n\n### Create project\n- `react-native init ReactNativePractice`\n- `cd ReactNativePractice`\n- Try to run `react-native run-ios` (or `run-android`)\n\n### TypeScript\nAlmost the same as https://github.com/Microsoft/TypeScript-React-Native-Starter\n\n- `cd ReactNativePractice`\n- `mkdir src` \n- `mv index.js src` `mv App.js src` `mv ./__tests__/ ./src/__tests__/`\n- `touch index.js` and write `import './src/index';` into the `index.js`\n- Try to run `react-native run-ios` (or `run-android`)\n- `yarn add --dev typescript`\n- `tsc --init --pretty --sourceMap --target es2015 --outDir ./lib --module commonjs --jsx react`\n- Append `\"include\": [\"./src/\"]` into `tsconfig.json`\n- Replace `import './src/index';` with `import './lib/index';` in `ReactNativePractice/index.js`\n- Write the following code into `package.json`\n\n    ```js\n    \"jest\": {\n        \"preset\": \"react-native\",\n        \"moduleFileExtensions\": [\n            \"ts\",\n            \"tsx\",\n            \"js\"\n        ],\n        \"transform\": {\n            \"^.+\\\\.(js)$\": \"\u003crootDir\u003e/node_modules/babel-jest\",\n            \"\\\\.(ts|tsx)$\": \"\u003crootDir\u003e/node_modules/ts-jest/preprocessor.js\"\n        },\n        \"testRegex\": \"(/__tests__/.*|\\\\.(test|spec))\\\\.(ts|tsx|js)$\",\n        \"testPathIgnorePatterns\": [\n            \"\\\\.snap$\",\n            \"\u003crootDir\u003e/node_modules/\",\n            \"\u003crootDir\u003e/lib/\"\n        ],\n        \"cacheDirectory\": \".jest/cache\"\n    }\n    ```\n\n- `yarn add --dev @types/jest @types/react @types/react-native @types/react-test-renderer`\n- Change the file extensions of `src/index.js`, `src/App.js` and `src/__tests__/App.js` from `.js` to `.tsx`\n- Modify `src/App.tsx`\n    - Replace `import React, {Component} from 'react';` with `import * as React from 'react';`\n    - Replace `Component\u003c{}\u003e` with `React.Component\u003cobject, object\u003e`\n- Modify `src/__tests__/App.tsx`\n    - Replace `import React from 'react'` with `import * as React from 'react';`\n    - Replace `import renderer from 'react-test-renderer';` with `import * as renderer from 'react-test-renderer';`\n- `yarn add --dev jest-cli`\n- Append the following code into `scripts` in `package.json`\n\n    ```js\n    \"build\": \"tsc\",\n    \"build:watch\": \"tsc --watch\",\n    \"test\": \"jest\"\n    ```\n\n- Try to run the scripts `npm run build` `npm run build:watch` `npm run test`\n\n### Lint, Formatter\n- `yarn add --dev --exact tslint prettier tslint-config-prettier`\n- `node_modules/.bin/tslint --init`\n- Append `tslint-config-prettier` into `extends` in `tslint.json`\n- Append the following code into `scripts` in `package.json`\n\n    ```js\n    \"lint\": \"tslint -c tslint.json 'src/**/*.{ts,tsx}'\",\n    \"format\": \"prettier --find-config-path --write 'src/**/*.tsx'\"\n    ```\n\n- Add `.prettierrc` to project root with the following content\n\n    ```js\n    {\n        \"singleQuote\": true\n    }\n    ```\n\n- Try to run the scripts `npm run lint` `npm run format`\n\n### Visual Studio Code\n[TSLint](https://marketplace.visualstudio.com/items?itemName=eg2.tslint) and [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) are useful if you use Visual Studio Code.\n\n## How to devleop\n- `react-native run-ios`\n- Run `npm run build:watch`\n- Write code and reload on simlutor (`⌘R` for iOS, `RR` for Android)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorishin%2Freactnativepractice","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmorishin%2Freactnativepractice","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorishin%2Freactnativepractice/lists"}