{"id":21409857,"url":"https://github.com/stackbuilders/react-native-with-typescript","last_synced_at":"2025-03-16T17:45:12.229Z","repository":{"id":38944631,"uuid":"206657975","full_name":"stackbuilders/react-native-with-typescript","owner":"stackbuilders","description":"Quito Lambda - React Native and TypeScript","archived":false,"fork":false,"pushed_at":"2023-01-04T09:14:40.000Z","size":1377,"stargazers_count":2,"open_issues_count":22,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-01-23T04:32:38.645Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Haskell","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/stackbuilders.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}},"created_at":"2019-09-05T21:10:36.000Z","updated_at":"2022-02-06T02:25:38.000Z","dependencies_parsed_at":"2022-08-30T02:31:28.926Z","dependency_job_id":null,"html_url":"https://github.com/stackbuilders/react-native-with-typescript","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/stackbuilders%2Freact-native-with-typescript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackbuilders%2Freact-native-with-typescript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackbuilders%2Freact-native-with-typescript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackbuilders%2Freact-native-with-typescript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stackbuilders","download_url":"https://codeload.github.com/stackbuilders/react-native-with-typescript/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243910690,"owners_count":20367538,"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":[],"created_at":"2024-11-22T17:34:44.036Z","updated_at":"2025-03-16T17:45:12.193Z","avatar_url":"https://github.com/stackbuilders.png","language":"Haskell","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Quito Lambda - React Native + Typescript\n\n## Steps\n- Install `react-native-cli`:\n``` bash\nnpm install -g react-native-cli\n```\n- Create a new project with typescript template\n```bash\nreact-native init [project name] --template typescript\n```\n- Create new environment variable `ANDROID_SDK_ROOT` with the path of your `~/Android/Sdk/.\n- Create android and ios scripts on `package.json`\n```json\n  \"android\": \"react-native run-android\"\n  \"ios\": \"react-native run-ios\"\n```\n- Execute `npm run android` or `yarn android` to see your initial application.\n- Remove `.prettierrc.js`.\n- Add a tslinter to the project.\n```bash\nnpm install --save-dev tslint tslint-react tslint-config-prettier\nyarn install --dev tslint tslint-react tslint-config-prettier\n```\n- Create `tslint.json` file.\n```json\n{\n  \"extends\": [\"tslint:recommended\", \"tslint-react\", \"tslint-config-prettier\"]\n}\n```\n- Add rule `\"resolveJsonModule\": true` to `tsconfig` and change `index.js` to `index.tsx`.\n```json\n{\n  \"resolveJsonModule\": true\n}\n```\n- Add type definitions for `User`.\n``` typescript\nexport type UserType = \"admin\" | \"normal\";\n\nexport type Hobby = \"soccer\" | \"basketball\" | \"baseball\";\n\nexport interface IApiUser {\n  id: number;\n  name: string;\n  age: number;\n  hobbies: Hobby[];\n  type: UserType;\n}\n\nexport interface INormalUser extends IApiUser {\n  type: \"normal\";\n}\n\nexport interface IAdminUser extends IApiUser {\n  type: \"admin\";\n}\n\nexport type Users = IApiUser[];\n\ntype Omit\u003cT, K extends keyof T\u003e = Pick\u003cT, Exclude\u003ckeyof T, K\u003e\u003e;\n\nexport type PostUser = Omit\u003cIApiUser, \"id\"\u003e;\n\nexport type UpdateUser = Omit\u003cPostUser, \"name\" | \"type\"\u003e;\n```\n- Create components for normal and admin user.\n``` javascript\ninterface INormalProps {\n  user: INormalUser;\n}\n\nexport const Normal: React.FC\u003cINormalProps\u003e = ({ user: { name, hobbies } }) =\u003e (\n  \u003cView style={{ flex: 1, flexDirection: \"row\" }}\u003e\n    \u003cText style={{ fontWeight: \"bold\" }}\u003e{name}\u003c/Text\u003e\n    \u003cText\u003eHobbies\u003c/Text\u003e\n    {hobbies.map((hobby, index) =\u003e (\n      \u003cText key={`normal-user-${index}`}\u003e{hobby}\u003c/Text\u003e\n    ))}\n  \u003c/View\u003e\n);\n\ninterface IAdminProps {\n  user: IAdminUser;\n}\n\nexport const Admin: React.FC\u003cIAdminProps\u003e = ({ user: { name, age } }) =\u003e (\n  \u003cView style={{ flex: 1, flexDirection: \"row\" }}\u003e\n    \u003cText style={{ fontWeight: \"bold\" }}\u003eWelcome {name}\u003c/Text\u003e\n    \u003cText\u003eYou can do anything with {age} years!\u003c/Text\u003e\n  \u003c/View\u003e\n);\n```\n- Add a component to display a list of users\n``` javascript\ninterface IUserListProps {\n  users: Users;\n}\n\nexport const List: React.FC\u003cIUserListProps\u003e = ({ users }) =\u003e {\n  const renderUser: ListRenderItem\u003cUser\u003e = ({ item, index }) =\u003e {\n    if (item.type === \"admin\") {\n      return \u003cAdmin user={item} /\u003e;\n    }\n    return \u003cNormal user={item} /\u003e;\n  };\n  const keyExtractor = (item: User, index: number) =\u003e `${item.type}-${index}`;\n  return (\n    \u003cFlatList\n      keyExtractor={keyExtractor}\n      data={users}\n      renderItem={renderUser}\n    /\u003e\n  );\n};\n```\n- Create screen to load user data from API\n``` javascript\n\ninterface IUserScreenState {\n  loading: boolean;\n  users: Users;\n  error: string | null;\n}\n\nexport const User: React.FC = () =\u003e {\n  const [{ error, loading, users }, setState] = useState\u003cIUserScreenState\u003e({\n    error: null,\n    loading: true,\n    users: []\n  });\n  useEffect(() =\u003e {\n    fetch(\"http://fbd5c453.ngrok.io/users\", {\n      headers: {\n        Accept: \"application/json\",\n        \"Content-Type\": \"application/json\"\n      },\n      method: \"GET\"\n    })\n      .then(response =\u003e {\n        if (response.ok) {\n          response\n            .json()\n            .then(us =\u003e setState({ loading: false, users: us, error: null }));\n        } else {\n          setState({\n            error: `Server responded with error ${response.status}.`,\n            loading: false,\n            users: []\n          });\n        }\n      })\n      .catch(err =\u003e {\n        setState({\n          error: err,\n          loading: false,\n          users: []\n        });\n      });\n  });\n  if (loading) {\n    return (\n      \u003cView style={{ flex: 1, justifyContent: \"center\" }}\u003e\n        \u003cActivityIndicator size=\"large\" /\u003e\n      \u003c/View\u003e\n    );\n  }\n  if (error) {\n    return (\n      \u003cView style={{ flex: 1, justifyContent: \"center\" }}\u003e\n        \u003cText style={{ color: \"red\" }}\u003e{error}\u003c/Text\u003e\n      \u003c/View\u003e\n    );\n  }\n  return (\n    \u003cView style={{ flex: 1 }}\u003e\n      \u003cList users={users} /\u003e\n    \u003c/View\u003e\n  );\n};\n```\n- Add navigation libraries\n``` bash\nyarn add react-native-gesture-handler react-native-reanimated react-navigation\nnpm install react-native-gesture-handler react-native-reanimated react-navigation\n```\n- Create navigation for the application\n``` javascript\nexport const AppNavigator = createAppContainer(\n  createStackNavigator(\n    {\n      Users: {\n        navigationOptions: {\n          title: \"Quito Lambda - Users\"\n        },\n        screen: User\n      }\n    },\n    { initialRouteName: \"Users\" }\n  )\n);\n```\n- Add navigation into entry point of the application\n``` javascript\nconst App: React.FC = () =\u003e (\n  \u003cView style={{ flex: 1 }}\u003e\n    \u003cAppNavigator /\u003e\n  \u003c/View\u003e\n);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstackbuilders%2Freact-native-with-typescript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstackbuilders%2Freact-native-with-typescript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstackbuilders%2Freact-native-with-typescript/lists"}