{"id":21673996,"url":"https://github.com/ianhenrydev/rn-starter","last_synced_at":"2026-04-06T08:31:02.853Z","repository":{"id":73317219,"uuid":"144644235","full_name":"ianhenrydev/rn-starter","owner":"ianhenrydev","description":"My personal React Native starting template feat. TypeScript and Prettier","archived":false,"fork":false,"pushed_at":"2018-11-01T23:24:28.000Z","size":200,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-01-03T21:13:54.832Z","etag":null,"topics":["expo","prettier","react-native","template","typescript"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ianhenrydev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2018-08-13T23:30:46.000Z","updated_at":"2018-11-01T23:25:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"7e1a835d-1949-4845-b0e4-c2530bcc99c8","html_url":"https://github.com/ianhenrydev/rn-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ianhenrydev/rn-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ianhenrydev%2Frn-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ianhenrydev%2Frn-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ianhenrydev%2Frn-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ianhenrydev%2Frn-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ianhenrydev","download_url":"https://codeload.github.com/ianhenrydev/rn-starter/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ianhenrydev%2Frn-starter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31464604,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T21:22:52.476Z","status":"online","status_checked_at":"2026-04-06T02:00:07.287Z","response_time":112,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["expo","prettier","react-native","template","typescript"],"created_at":"2024-11-25T13:42:27.226Z","updated_at":"2026-04-06T08:31:02.827Z","avatar_url":"https://github.com/ianhenrydev.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ian's RN Starter Template\r\n\r\nMy personal reference for starting a new React Native project from scratch. Open source to share a little insight about what I've learned putting it together.\r\n\r\nIncludes instructions for both the `react-native-cli` and `expo-cli`. Each have distinct pros and cons that I'll highlight in their respective sections.\r\n\r\n## Expo CLI\r\n\r\nhttps://docs.expo.io/versions/latest/workflow/expo-cli\r\n\r\nUsing the expo-cli is the best choice for beginners or those who don't want to touch native iOS/Android code. Expo boasts tons of great features, but some of those come at cost. You can read more at:\r\n\r\nhttps://docs.expo.io/versions/v30.0.0/introduction/why-not-expo\r\n\r\n### Init Project\r\n\r\n`yarn global add expo-cli`\r\n\r\n`expo init sample-expo`\r\n\r\n### Add Typescript\r\n\r\n`yarn add --dev typescript tslint react-native-typescript-transformer react-native-scripts-ts`\r\n\r\n`yarn add --dev @types/react @types/react-native`\r\n\r\nreplace scripts with:\r\n\r\n```\r\n\"scripts\": {\r\n    \"start\": \"react-native-scripts-ts start\",\r\n    \"eject\": \"react-native-scripts-ts eject\",\r\n    \"android\": \"react-native-scripts-ts android\",\r\n    \"ios\": \"react-native-scripts-ts ios\"\r\n  },\r\n```\r\n\r\nreplace main with: `\"main\": \"./node_modules/react-native-scripts-ts/build/bin/crna-entry.js\"`\r\n\r\nadd tsconfig:\r\n\r\n```\r\n{\r\n  \"compilerOptions\": {\r\n    \"target\": \"es5\",\r\n    \"module\": \"es2015\",\r\n    \"outDir\": \"build/dist\",\r\n    \"sourceMap\": true,\r\n    \"experimentalDecorators\": true,\r\n    \"jsx\": \"react-native\",\r\n    \"lib\": [\"dom\", \"es2015\", \"es2016\"],\r\n    \"allowSyntheticDefaultImports\": true,\r\n    \"moduleResolution\": \"node\",\r\n    \"noEmitHelpers\": true,\r\n    \"importHelpers\": true,\r\n    \"strict\": true,\r\n    \"noImplicitReturns\": true\r\n  }\r\n}\r\n```\r\n\r\nadd packager info to app.json :\r\n\r\n```\r\n\"packagerOpts\": {\r\n  \"sourceExts\": [\"ts\", \"tsx\"],\r\n  \"transformer\": \"node_modules/react-native-typescript-transformer/index.js\"\r\n},\r\n```\r\n\r\n## React Native CLI\r\n\r\nhttps://facebook.github.io/react-native/docs/getting-started.html\r\n\r\nThis allows you to make React Native actually _Native_. Initialized a project with this cli will give you full Android Studio and Xcode projects that you can edit by hand. This allows you to do all kinds of cool stuff, but also adds extra complexity.\r\n\r\n### Init Project\r\n\r\n`yarn global add react-native-cli`\r\n\r\n`react-native init SampleProject`\r\n\r\n### Add TypeScript\r\n\r\nhttps://github.com/Microsoft/TypeScript-React-Native-Starter\r\n\r\n```\r\nyarn add --dev typescript\r\nyarn add --dev react-native-typescript-transformer\r\nyarn add --dev tslint\r\nyarn tsc --init --pretty --jsx react\r\ntouch rn-cli.config.js\r\nyarn add --dev @types/react @types/react-native\r\n```\r\n\r\nUncomment `allowSyntheticDefaultImports: true` in `tsconfig.json`\r\n\r\nAdd the following to `rn-cli.js`:\r\n\r\n```javascript\r\nmodule.exports = {\r\n  getTransformModulePath() {\r\n    return require.resolve(\"react-native-typescript-transformer\");\r\n  },\r\n  getSourceExts() {\r\n    return [\"ts\", \"tsx\"];\r\n  }\r\n};\r\n```\r\n\r\nRename `App.js` to `App.tsx`\r\n\r\n## Prettier\r\n\r\nhttps://github.com/prettier/prettier\r\n\r\nPrettier is a godsend for people like me that can't stand unformatted code. Combined with VS Code it can fix your ugly code every time you hit save.\r\n\r\n### Add Prettier\r\n\r\n```\r\nyarn add --dev prettier\r\ntouch .prettierrc\r\n```\r\n\r\nOpen VS Code workspace settings and add:\r\n\r\n```\r\n\"editor.formatOnSave\": true,\r\n\"javascript.format.enable\": false\r\n```\r\n\r\nUpdate prettier rules:\r\n\r\n```\r\n{\r\n  \"printWidth\": 160,\r\n  \"semi\": false,\r\n  \"singleQuote\": true\r\n}\r\n```\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fianhenrydev%2Frn-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fianhenrydev%2Frn-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fianhenrydev%2Frn-starter/lists"}