{"id":29745742,"url":"https://github.com/alexkev/alexkevrntemplate","last_synced_at":"2026-04-14T06:02:46.673Z","repository":{"id":209540384,"uuid":"724161983","full_name":"alexkev/AlexkevRNTemplate","owner":"alexkev","description":"A React Native Template featuring a Zustand, MMKV, Translations, React Navigation, etc","archived":false,"fork":false,"pushed_at":"2024-04-27T13:03:33.000Z","size":4043,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-12T07:36:26.554Z","etag":null,"topics":["i18n-react","mmkv","react","react-native","react-native-mmkv","react-navigation-v6","zustand"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/alexkev.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":"2023-11-27T14:19:44.000Z","updated_at":"2024-04-27T13:03:37.000Z","dependencies_parsed_at":"2024-04-27T14:23:05.855Z","dependency_job_id":"dae595ad-f4c1-4cf7-afea-8dd90440ea4f","html_url":"https://github.com/alexkev/AlexkevRNTemplate","commit_stats":null,"previous_names":["alexkev/alexkevrntemplate"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/alexkev/AlexkevRNTemplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexkev%2FAlexkevRNTemplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexkev%2FAlexkevRNTemplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexkev%2FAlexkevRNTemplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexkev%2FAlexkevRNTemplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexkev","download_url":"https://codeload.github.com/alexkev/AlexkevRNTemplate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexkev%2FAlexkevRNTemplate/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267128082,"owners_count":24040157,"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","status":"online","status_checked_at":"2025-07-26T02:00:08.937Z","response_time":62,"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":["i18n-react","mmkv","react","react-native","react-native-mmkv","react-navigation-v6","zustand"],"created_at":"2025-07-26T06:17:49.725Z","updated_at":"2026-04-14T06:02:46.572Z","avatar_url":"https://github.com/alexkev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Alexkev's React Native Template\n\n## Folder Structure and Naming Conventions\n```\n.\n├─@types\n├─android\n├───yada yada yada\n├─ios\n├───yada yada yada\n├─scripts\n├─src\n├───components \n├───hooks\n├───navigation\n├───screens\n├─────{StackName}\n├───store\n├───theme\n├─────assets\n├───────images\n└───translations\n```\n\n- Use PascalCase for Component names (e.g. `MyComponent.tsx`).\n- All folders must have a `index.ts` file that exports all the files in that folder. This is to make importing easier. \n\n\n## State Management\n-  Zustand\n-  react-native-mmkv (for persisting state to storage)\n\nWhy? Zustand is a simple, lightweight state management solution. It is a tiny wrapper around the React Context API.It is also very easy to use and understand. See [here](https://github.com/pmndrs/zustand) for more information.\n\nRedux 🥊 Zustand 🐻\n- No boilerplate code 🚫\n- Simple and un-opinionated\n- Makes hooks the primary means of consuming state\n- Doesn't wrap your app in context providers\n- [Can inform components transiently (without causing render)](https://github.com/pmndrs/zustand#transient-updates-for-often-occurring-state-changes)\n\nWhy? react-native-mmkv is a persistent storage solution. It is a wrapper around the native MMKV library. MMKV is 20x faster than AsyncStorage see [here](https://github.com/mrousavy/react-native-mmkv#benchmark).\n\n\n**Flipper required plugins:**\n- zustandstore\n- react-native-mmkv\n  \n## Navigation\nAs expected we will use **React Navigation**. Please also utilize and update the StackParamList Types here: [@types/navigation.d.ts](./@types/navigation.d.ts)\n\n**Flipper required plugins:**\n- react-navigation\n\n## Testing\n- React Native Testing Library see [here](https://callstack.github.io/react-native-testing-library/docs/getting-started) for more information\n- Jest, as the test runner\n\nWe will NOT be using jest snapshots, \"They may help you and your team quickly add coverage to the project. And at the same time, snapshots make adding low-quality and hard-to-maintain tests too easy.\" - [***The Ultimate Guide to React Native Optimization***](https://www.callstack.com/ebook/the-ultimate-guide-to-react-native-optimization). Instead we will be using the [***Testing Library***](https://testing-library.com/docs/react-native-testing-library/intro/) because it encourages testing the behaviour of the application from the user’s perspective, rather than testing the internal implementation details. \n\n\n## Translations\n- i18n (i18next, react-i18next)\n\n### Usage\nIn the translations folder each language will have a file containing a `.json` file. The key for each translation is the same as the value. For example:\n```json\n{\n  \"hello\": \"hello\"\n}\n```\n\nThese tranlations can be used in the app by importing the `useTranslation` hook from `react-i18next` and using it like so:\n```jsx\nimport { useTranslation } from 'react-i18next';\n\nexport const MyComponent = () =\u003e {\n  const { t } = useTranslation();\n\n  return (\n    \u003cdiv\u003e{t('hello');}\u003c/div\u003e\n  );\n};\n```\n\nEach line is parsed by running `npx i18next-parser` (which is configured in [i18next-parser.config.js](./i18next-parser.config.js)) and added to the keys of all the lanaguage files. The [./scripts/translate-empty-strings.js](./scripts/translate-empty-strings.js) script then translates the corresponding language files. This has been simnplified to `npm run i18n` which runs both scripts.\n\n\n## Styling \n-  Icons (react-native-vector-icons) \n   -  Only MaterialCommunityIcons \u0026 MaterialIcons were add to optimized bundle size\n   -  Use [this icon directory](https://oblador.github.io/react-native-vector-icons/) to find icons\n\n## Config\nUsing react-native-ulimate-config (for environment variables) see [here](https://github.com/maxkomarychev/react-native-ultimate-config/tree/master). configured here: [./rnucrc.js](./.rnucrc.js). \n\n`npm run rnuc \u003cenv file ex: .env.dev\u003e\t`\n\n\n## Credit\n- This a hard fork of [this repo](https://github.com/thecodingmachine/react-native-boilerplate/tree/main) by [TheCodingMachine](https://thecodingmachine.github.io/react-native-boilerplate/). See there site for more  information.\n- @alexkev: translations scripts, zustand store, and react-native-mmkv setup\n- Inspiration from this book: [***The Ultimate Guide to React Native Optimization***](https://www.callstack.com/ebook/the-ultimate-guide-to-react-native-optimization)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexkev%2Falexkevrntemplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexkev%2Falexkevrntemplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexkev%2Falexkevrntemplate/lists"}