Src Content Docs Overview (`docs/src/content/docs/overview.md`) Copy Section

title: Overview
head:

• tag: title
  content: Overview | React Native / Expo Starter

Welcome to the Obytes Mobile Tribe's Expo / React Native Starter Kit!

🚀 Motivation Copy Chapter

Our goal with this starter kit was to streamline the process of building React Native apps, both for our own team and for our clients. We wanted to create a resource that would allow us to create high-quality apps faster and with less effort, while ensuring that all of our projects adhere to the same code standards and architectural principles.

The benefits of using this starter kit are numerous. It helps our team easily switch between projects, as we can rely on a consistent foundation of code. It also allows us to focus on the business logic of each project rather than getting bogged down in boilerplate code. And, because it promotes consistency across projects, it makes it easier to maintain and scale our apps, as well as share code between teams.

Overall, our starter kit is designed to facilitate efficient and effective app development, helping us to bring the best possible products to our clients

✍️ Philosophy Copy Chapter

When creating this starter kit, we had several guiding principles in mind::

• 🚀 Production-ready: We wanted to ensure that this starter was ready for real-world use, providing a solid foundation for building production-grade apps.
• 🥷 Developer experience and productivity: Our focus was on creating a starter that would enhance the developer experience and increase productivity.
• 🧩 Minimal code and dependencies: We aimed to keep the codebase and dependencies as small as possible.
• 💪 Well-maintained third-party libraries: We included only well-maintained and reliable third-party libraries, to provide stability and support for our projects.

⭐ Key Features Copy Chapter

• ✅ Latest Expo SDK with Custom Dev Client: Leverage the best of the Expo ecosystem while maintaining full control over your app.
• 🎉 TypeScript for enhanced code quality and bug prevention through static type checking.
• 💅 Minimal UI kit built with TailwindCSS, featuring common components essential for your app.
• ⚙️ Multi-environment build support (Production, Preview, Development) using Expo configuration.
• 🦊 Husky for Git Hooks: Automate your git hooks and enforce code standards.
• 💡 Clean project structure with Absolute Imports for easier code navigation and management.
• 🚫 Lint-staged: Run Eslint and TypeScript checks on Git staged files to maintain code quality.
• 🗂 VSCode recommended extensions, settings, and snippets for an enhanced developer experience.
• ☂️ Pre-installed Expo Router with examples for comprehensive app navigation.
• 💫 Auth flow implementation using Zustand for state management and react-native-mmkv for secure data storage.
• 🛠 10+ Github Actions workflows for building, releasing, testing, and distributing your app.
• 🔥 React Query and axios for efficient data fetching and state management.
• 🧵 Robust form handling with TanStack Form and zod for validation, plus keyboard handling.
• 🎯 Localization support with i18next, including Eslint for validation.
• 🧪 Unit testing setup with Jest and React Testing Library.
• 🔍 E2E testing capabilities with Maestro for comprehensive app testing.

🤔 Is this starter for me? Copy Chapter

Yes 😀

This starter kit is designed to benefit a wide range of React Native developers, from beginners to experienced professionals. Here's why it might be a good fit for you:

1. For beginners: It provides a solid foundation with best practices and common solutions, helping you learn industry-standard approaches to React Native development.

2. For experienced developers: It offers a well-structured, production-ready setup that can save you time and effort in project initialization and configuration.

3. For teams: It ensures consistency across projects and team members, making it easier to onboard new developers and maintain code quality.

4. For explorers: Even if you prefer not to use starter kits, this project can serve as a valuable reference. You can explore the codebase, documentation, and architectural decisions to gain insights and potentially adopt specific solutions for your own projects.

5. For learners: The starter kit incorporates up-to-date libraries and patterns, offering an opportunity to familiarize yourself with current best practices in the React Native ecosystem.

6. For AI-assisted development: This starter kit works well with AI coding tools. It provides a solid structure and best practices that can guide AI-generated code. This helps ensure that AI assistance leads to high-quality, maintainable code that fits well within your project.

Remember, you don't have to use the entire starter kit as-is. Feel free to cherry-pick ideas, configurations, or code snippets that align with your project needs. Whether you're building a new app from scratch or looking to improve your existing development process, this starter kit can provide valuable insights and practical solutions.

😉 Why Expo and not React Native CLI? Copy Chapter

We have been using Expo as our main framework since the introduction of Continuous Native Generation (CNG) concept and we are happy with the experience.

I think this question is not valid anymore specially after the last React conference when the core react native team recommended using Expo for new projects.

"As of today, the only recommended community framework for React Native is Expo. Folks at Expo have been investing in the React Native ecosystem since the early days of React Native and as of today, we believe the developer experience offered by Expo is best in class." React native core team

Still hesitating? Check out this article or this video, maybe this one video too.

🧑‍💻 Stay up to date Copy Chapter

We are committed to continually improving our starter kit and providing the best possible resources for building React Native apps. To that end, we regularly add new features and fix any bugs that are discovered.

If you want to stay up to date with the latest developments in our starter kit, you can either watch the repository or hit the "star" button. This will allow you to receive notifications whenever new updates are available.

We value the feedback and contributions of our users, and we encourage you to let us know if you have any suggestions for improving our starter kit. We are always looking for ways to make it even more effective and useful for our community. So, please do not hesitate to reach out and share your thoughts with us.

💎 Libraries used Copy Chapter

• Expo
• Expo Router
• Uniwind
• Flash list
• React Query
• Axios
• TanStack Form
• i18next
• zustand
• React Native MMKV
• React Native Gesture Handler
• React Native Reanimated
• React Native Svg
• React Error Boundaries
• Expo Image
• React Native Keyboard Controller
• Moti
• React Native Safe Area Context
• React Native Screens
• Tailwind Variants
• Zod

Contributors Copy Chapter

This starter is maintained by Obytes mobile tribe team and we welcome new contributors to join us in improving it. If you are interested in getting involved in the project, please don't hesitate to open an issue or submit a pull request.

In addition to maintaining this starter kit, we are also available to work on custom projects and help you build your dream app. If you are looking for experienced and reliable developers to bring your app vision to life, please visit our website at obytes.com/contact to get in touch with us. We would be happy to discuss your project in more detail and explore how we can help you achieve your goals.

❓ FAQ Copy Chapter

If you have any questions about the starter and want answers, please check out the Discussions page.

Src Content Docs Ci Cd Overview (`docs/src/content/docs/ci-cd/overview.mdx`) Copy Section

title: Overview
head:

• tag: title
  content: CI/CD | React Native / Expo Starter

CI/CD stands for Continuous Integration and Continuous Delivery/Deployment. It is a set of practices that help developers automate the process of building, testing, and distributing applications to end-users (such as app stores for mobile apps).

Having a good CI/CD process in place is crucial for any project, as it helps you save time and effort, as well as ensuring that you are delivering a high-quality product to your users. It helps avoid common mistakes and bugs, reduces your time to market, and allows for faster updates to your users.

As most of our projects are hosted on GitHub, we use GitHub Actions and Expo EAS as our CI/CD solution. The starter kit comes with over 10 GitHub Actions workflows:

• .github/workflows/lint-ts.yml: On PR and new commits on the master branch, run linting and formatting checks.
• .github/workflows/test.yml: On PR and new commits on the master branch, run unit tests.
• .github/workflows/type-check.yml: On PR and new commits on the master branch, run type checking.
• .github/workflows/compress-images.yml: On new commits to the master branch, when adding images, open a pull request (PR) with the compressed images.
• .github/workflows/expo-doctor.yml: On PR and new commits to the master branch, check whether dependencies are aligned with the Expo SDK version.
• .github/workflows/new-app-version.yml: A workflow to manually trigger and update the app version, and publish a tag.

You can check the full list of workflows here

Pushing the new release to the stores is a weekly process for our team. To make it easier, we have created a simple process using GitHub Actions and Expo EAS. You can check the full guide here.

Src Content Docs Testing Overview (`docs/src/content/docs/testing/overview.mdx`) Copy Section

title: Testing Overview
head:

• tag: title
  content: Testing Overview| React Native / Expo Starter

Testing is an essential part of any software development process. It helps ensure that your code is working as expected and that you don't introduce any bugs into your codebase. As we believe in the importance of testing, we have made it easy to write your tests with the starter template. We include the Jest testing framework and the React Native Testing Library for unit tests, along with mocks for most libraries. We also use Maestro for end-to-end tests.

Testing approaches Copy Chapter

It's clear that testing is important, but what should you test? Apparently, and especially for front-end apps (including mobile apps), there is no clear answer. Should I aim for 100% code coverage? Should I test every component?

The answer is it depends. It depends on your app, your team, and your goals. We believe that testing is a trade-off between the time you spend writing tests and the confidence you get from them. You should aim for a good balance between the two.

Aiming for 100% test coverage is not always a good idea and doesn't always make sense. Same with testing views and components that only render a UI. Instead, you should focus on the following:

• Business logic: Test component and function utilities that contain business logic. Form validation, data manipulation and calculations, etc.

• Complex components: Test components that contain complex logic. For example, components that contain a lot of conditional rendering, or components that contain a lot of state management logic.

Focus on the above and write unit tests for them. This will help you get the most out of your tests and will assist you in finding bugs early on.

To ensure that your app is functioning as expected, we recommend writing end-to-end tests, as they provide the highest level of confidence and help you test the app as a whole similar to how your users will use it.

Package.Json (`docs/package.json`) Copy Section

{
"name": "ossified-orbit",
"type": "module",
"version": "0.0.1",
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "astro build",
"preview": "astro preview",
"astro": "astro"
},
"dependencies": {
"@astrojs/starlight": "^0.37.6",
"@expressive-code/plugin-collapsible-sections": "^0.33.4",
"@expressive-code/plugin-line-numbers": "^0.33.4",
"@fontsource/ibm-plex-mono": "^5.0.8",
"@fontsource/ibm-plex-serif": "^5.0.8",
"astro": "^5.17.1",
"hast-util-to-html": "^9.0.0",
"starlight-llms-txt": "^0.4.0"
}
}

Src Content Docs Changelog (`docs/src/content/docs/changelog.md`) Copy Section

title: CHANGELOG
head:

• tag: title
  content: Obytes Starter ChangeLog | React Native / Expo Starter

For complete changelog, please check the GitHub releases page.

Src Content Docs Faq (`docs/src/content/docs/faq.md`) Copy Section

title: Frequently asked questions
head:

• tag: title
  content: FAQ | React Native / Expo Starter

This page is a collection of frequently asked questions about the React Native / Expo Starter.

Is this starter for me? Copy Section

Yes 😀

This starter kit is designed to benefit a wide range of React Native developers, from beginners to experienced professionals. Here's why it might be a good fit for you:

1. For beginners: It provides a solid foundation with best practices and common solutions, helping you learn industry-standard approaches to React Native development.

2. For experienced developers: It offers a well-structured, production-ready setup that can save you time and effort in project initialization and configuration.

3. For teams: It ensures consistency across projects and team members, making it easier to onboard new developers and maintain code quality.

4. For explorers: Even if you prefer not to use starter kits, this project can serve as a valuable reference. You can explore the codebase, documentation, and architectural decisions to gain insights and potentially adopt specific solutions for your projects.

5. For learners: The starter kit incorporates up-to-date libraries and patterns, allowing you to familiarize yourself with current best practices in the React Native ecosystem.

6. For AI-assisted development: This starter kit works well with AI coding tools. It provides a solid structure and best practices that can guide AI-generated code. This helps ensure that AI assistance leads to high-quality, maintainable code that fits well within your project.

Remember, you don't have to use the entire starter kit as-is. Feel free to cherry-pick ideas, configurations, or code snippets that align with your project needs. Whether you're building a new app from scratch or looking to improve your existing development process, this starter kit can provide valuable insights and practical solutions.

Why Expo and not React Native CLI? Copy Section

We have been using Expo as our main framework since the introduction of Continuous Native Generation (CNG) concept and we are happy with the experience.

I think this question is not valid anymore, especially after the last React conference when the core React native team recommended using Expo for new projects.

"As of today, the only recommended community framework for React Native is Expo. Folks at Expo have been investing in the React Native ecosystem since the early days of React Native and as of today, we believe the developer experience offered by Expo is best in class." React native core team

Still hesitating? Check out this article or this video, maybe this one video too.

Who is behind the starter kit? Copy Section

This starter kit has been maintained by the Obytes mobile tribe team since 2021. We actively use it for our internal projects and are excited to share it with the amazing React Native / Expo community. The project is open-source, released under the MIT license, ensuring flexibility for users. Our commitment to this starter kit is ongoing; we will continue to maintain and improve it as long as it remains a core part of our internal development process. We welcome contributions and feedback from the community to help make this starter kit even better.

Can you include X feature or library? Copy Section

We aim to keep the starter as simple as possible. Based on our experience, we believe the current setup provides a solid foundation for most projects.

The starter is opinionated, reflecting our best practices. If you disagree with some of our choices, that's perfectly fine. The starter is designed to be easily customizable to suit your specific needs.

We often receive requests to provide multiple choices for libraries and tools through a CLI. While this may seem appealing, it would significantly increase complexity and maintenance overhead, which we are trying to avoid.

Src Content Docs How To Contribute (`docs/src/content/docs/how-to-contribute.md`) Copy Section

title: How to Contribute
head:

• tag: title
  content: How to Contribute | React Native / Expo Starter

Thank you for your interest in contributing to our project. Your involvement is greatly appreciated and we welcome your contributions. Here are some ways you can help us improve this project:

1. Show your support for the project by giving it a 🌟 on Github. This helps us increase visibility and attract more contributors.
2. Share your thoughts and ideas with us by opening an issue. If you have any suggestions or feedback about any aspect of the project, we are always eager to hear from you and have a discussion.
3. If you have any questions about the project, please don't hesitate to ask. Simply open a new QA discussion and our team will do our best to provide a helpful and informative response.
4. If you encounter a bug or typo while using the starter kit or reading the documentation, we would be grateful if you could bring it to our attention. You can open an issue to report the issue, or even better, submit a pull request with a fix.

We value the input and contributions of our community and look forward to working with you to improve this project.

Src Content Docs Libraries Recommendation (`docs/src/content/docs/libraries-recommendation.md`) Copy Section

title: Libraries Recommendation
head:

• tag: title
  content: Libraries Recommendation | React Native / Expo Starter

The starter kit comes with a set of pre-installed and configured libraries. We recommend using these libraries for your project.

Below, we'll list other libraries we often use in our projects. These aren't included in the starter because:

1. They're for specific use cases.
2. They need a lot of setup.

This way, you can add them to your project only if you need them, keeping things simple to start with.

State Management: Copy Section

The starter kit comes with Zustand out of the box but if your application implements a lot of workflows, you might want to use XState as it's more powerful on managing complex workflows and state machines.

For example, if you have a workflow to create a new card for user and this workflow has a lot of steps and conditions, Zustand might not be the best choice as it's more designed for simple state management and XState is your best choice in this case.

Error Reporting: Copy Section

• Sentry: very popular solution for error reporting in the javascript ecosystem and has a great integration with Expo.

Notifications: Copy Section

There is no solution fit all for notifications, but based on your use case we would recommend one of the following:

• Expo Push Notifications
• OneSignal

Analytics: Copy Section

• PostHog : Easy to setup and use and has a great free tier.

• Google Analytics

Charts: Copy Section

• Victory Native

For sure we are missing some great libraries here, so we count on your contribution to add them in the comments sections below.

Src Content Docs Reviews (`docs/src/content/docs/reviews.md`) Copy Section

title: What people say about the starter
head:

• tag: title
  content: Reviews | React Native / Expo Starter

This is a list of reviews from people who have used the starter kit.

Please feel free to add your in the comments section 👇

Src Content Docs Stay Updated (`docs/src/content/docs/stay-updated.md`) Copy Section

title: Stay Up-to-Date with React Native
head:

• tag: title
  content: Stay Updated | React Native / Expo Starter

Make sure to check out the links below to stay up-to-date with React Native news.

:::note
We are in favor of reducing the number of news sources you use to avoid feeling overwhelmed. Therefore, we have only included resources that we think are essential and deserve your attention.

:::

Websites Copy Chapter

• React Native Documentation
• React Native Directory
• React Native Reddit Channel

Blogs Copy Chapter

• Expo blog
• React Native Dev Blog
• TkDodo's blog
• Developer way
• Bam React Native blog

Newsletters Copy Chapter

• This week in react
• The React Native Newsletter

Twitter accounts Copy Chapter

• Evan Bacon
• React Native
• Expo
• Sebastien Lorber

Open source projects Copy Chapter

A list of open-source projects and production-ready apps that you can use to learn and get inspired from.

• showtime-frontend
• xLog-mobile
• CommE2E
• Expensify

Src Content Docs Ci Cd App Releasing Process (`docs/src/content/docs/ci-cd/app-releasing-process.mdx`) Copy Section

title: App releasing process
head:

• tag: title
  content: App releasing process | React Native / Expo Starter

import CodeBlock from '../../../components/code.astro';

Releasing your app to the App Store and Google Play or even to your QA team for real testing is a very important step in the app development process. Internally, we tend to release a new version of the app to our QA team by the end of each sprint(every week or two weeks). This way, we can get feedback from our team and test the app on real devices.

Doing this in a weekly basis requires automating the process as much as possible to gain time and avoid a lot of manual work.

To make this process as easy as possible, we use Github action and expo eas to build and release our app to the App Store and Google Play.

The Philosophy Copy Chapter

The philosophy behind this process is to have a single task that you should trigger to build and distribute the app. This task should be triggered manually by any developer on the team.

The main idea is that we focus on the QA release process and push a new release to the QA team whenever our team pushes a new release to GitHub (at the end of the sprint). Whenever we feel that we are ready to push a new release to the App Store and Google Play, we can trigger a production release manually from the master branch or from the last GitHub release tag that has already been pushed to the QA team.

In conclusion, we have two types of releases:

• QA release: This release is triggered automatically whenever a new github release is created. This release is used to distribute the app to the QA team for testing.

• Production release: This release is triggered manually whenever we want to push a new release to the App Store and Google Play and can be build it based on the last GitHub release tag or from the master branch.

:::note
We aim to simplify the process as much as possible. Depending on your requirements, you can take inspiration from this process and modify it to meet your needs.
:::

The Process Copy Chapter

The starter comes with a set of tools and tricks that help make the process as easy as possible.

`app-release` npm script Copy Section

A simple npm script that run np package that helps us to manage the version of the app and push a new tag to GitHub.

{
  "scripts": {
    "app-release": "cross-env SKIP_BRANCH_PROTECTION=true np --no-publish --no-cleanup --no-release-draft",
    "version": "pnpm run prebuild && git add ."
  }
}

If you run pnpm run app-release, it will ask you to choose the type of release (major, minor, patch). based on the type of release, it will update the version inside package.json.

As we use the version from package.json as app version inside app-config.ts, we just need to run the prebuild script to update App version inside the ios and android folders. The prebuild script will be executed automatically using a version script inside package.json that will handle the task for us. It will also add the changes to the commit that will be pushed to GitHub and create a new tag with the version number.

So technically, we just need to run pnpm run app-release and it will handle the rest for us. from updating native app version to pushing a new tag to GitHub.

GitHub actions and Expo EAS workflows Copy Section

The starter comes with a set of GitHub workflows that use EXPO EAS to build and distribute the app to the App Store and Google Play.

• new-app-version.yml : A workflow that run app-release script in order to update the app version and push a new tag to GitHub.

• new-github-release.yml : A workflow that is triggered whenever a new tag is pushed to GitHub. It will create a new GitHub release based on the tag name with the correct changelog.

• eas-build-qa.yml : A workflow that is triggered whenever a new release is created on GitHub. It will build the app using EXPO EAS and based on the config it will distribute.

• eas-build-prod.yml : A workflow that is triggered manually whenever we want to push a new release to the App Store and Google Play. It will build the app using EXPO EAS and based on the config it will distribute.

In conclusion, when you want to release a new QA version, manually execute new-app-version.yml with the correct release type. After successful execution, new-github-release.yml will be triggered automatically, followed by the automatic execution of eas-build-qa.yml. This will distribute the app to the QA team.

Setup Release Process to your app Copy Chapter

To setup the release process to your app, you need to follow these steps:

Run Build Locally Copy Section

First, make sure to create an Expo account then create a new organization for your project.

When then name of your organization is ready, you need to update the EXPO_ACCOUNT_OWNER variable in env.ts file with the name of your organization.

For QA release:

pnpm run prebuild:preview

The above command will regenerate the iOS and Android folders based on the preview configuration.

Then run the following command to build the app using EAS:

:::caution
You need to be logged in to EAS using eas login command before running this command. check step 1 and 2 from EAS docs for more details.
:::

pnpm run build:preview:ios
pnpm run build:preview:android

The above commands will generate the required credentials for the build and store them in EAS servers so that we can use them later to trigger the build from GitHub actions.

For production release:

pnpm run prebuild:production
pnpm run build:production:ios
pnpm run build:production:android

In case you want to submit the app to the App Store and Google Play, you need to check eas submit configuration and follow the steps from EAS docs.

Setup GitHub Actions Copy Section

All github workflows are already ready to be used in the starter. You just need to add the required secrets to your GitHub repo:

• GH_TOKEN: A Github token with access to your repo.

• EXPO_TOKEN: Expo token to authenticate with EAS. You can get generate yours here

Github action and env variables Copy Section

For simplicity, we assume that all your environment variables are already added to your .env file and have been pushed to your repository.

If you prefer not to push the .env file (recommended), you need to add all your environment variables to GitHub secrets. Then, use create-envfile action to create the env file on the fly before the prebuild script.

## .github/workflows/eas-build-prod.yml

- name: Create envfile
  uses: SpicyPizza/[email protected]
  with:
    envkey_DEBUG: false
    envkey_SECRET_KEY: ${{ secrets.PRODUCTION_SECRET_KEY }}
    file_name: .env

- name: ⏱️ EAS Build
  uses: ./.github/actions/eas-build
  with:
    EXPO_PUBLIC_APP_ENV: production
    EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}

This action will create a new .env file with the DEBUG and SECRET_KEY variables you added to the action. so make sure to include all your env variables to the action.

Create new release Copy Chapter

For QA release, Go to your GitHub repo actions tab and run new-app-version workflow with the your desired release type.

After successful execution, a new tag will be pushed to master and then new-github-release workflow will be triggered automatically and create a github release based on the tag name with the correct changelog.

After that, eas-build-qa workflow will be triggered automatically and build the app using EAS and distribute it to the QA team.

For production release, Go to your GitHub repo actions tab and run eas-build-prod workflow manually.

Src Content Docs Ci Cd Workflows References (`docs/src/content/docs/ci-cd/workflows-references.mdx`) Copy Section

title: Github Action workflows
head:

• tag: title
  content: Github Action workflows | A list of all the Github Action workflows that come with the starter and how to use them.

import CodeBlock from '../../../components/code.astro';

The starter comes with over 10 GitHub Actions workflows that help you automate the process of checking, testing, releasing, and much more.

All those workflows are self-documented and contain all details directly inside the workflow file as comments. This approach makes it easier to understand what each workflow does and how to use it without having to go back and forth between the documentation and the workflow file.

This page lists all workflows and actions we use and adds more details on the approach we are using to make those workflows as simple as possible.

All files related to GitHub Actions are located in the .github/workflows and .github/actions folders.

Actions Copy Chapter

You can think of actions as functions that are used by workflows to perform a specific task and allow you to reuse the same task in multiple workflows without duplicating the code which made them easier to maintain.

All actions are located in the .github/actions folder, and here is the complete list:

⚙️ Node setup and PNM install Copy Section

npm install pnpm

npx create-obytes-app@latest MyApp

cursor .

# Run the app on iOS simulator
pnpm ios

# Run the app on Android simulator
pnpm android

# Client-accessible variable (available in src folder)
EXPO_PUBLIC_MY_NEW_VAR=my-value

# Build-time only variable (NOT available in src folder)
MY_SECRET_KEY=my-secret

const envSchema = z.object({
  EXPO_PUBLIC_APP_ENV: z.enum(['development', 'preview', 'production']),
  // ... existing vars

  // Add your new client-accessible variable here
  EXPO_PUBLIC_MY_NEW_VAR: z.string(),
});

const _env: z.infer<typeof envSchema> = {
  // ... existing vars

  // Add your new variable
  EXPO_PUBLIC_MY_NEW_VAR: process.env.EXPO_PUBLIC_MY_NEW_VAR ?? '',
};

pnpm prebuild

import Env from 'env'; // or import Env from '@env';

// Access environment variables
console.log(Env.EXPO_PUBLIC_MY_NEW_VAR);

// For numbers
EXPO_PUBLIC_VAR_NUMBER: Number(process.env.EXPO_PUBLIC_VAR_NUMBER ?? 0),

// For booleans
EXPO_PUBLIC_VAR_BOOL: process.env.EXPO_PUBLIC_VAR_BOOL === 'true',

# Development (default)
pnpm start

# Preview environment
pnpm start:preview

# Production environment
pnpm start:production

# Development
pnpm prebuild:development

# Preview
pnpm prebuild:preview

# Production
pnpm prebuild:production

❌ Invalid environment variables: { EXPO_PUBLIC_API_URL: ['Invalid url'] }
❌ Missing variables in .env file for APP_ENV=development
💡 Tip: If you recently updated the .env file, try restarting with -c flag to clear the cache.

// 1. Define Zod schema
const envSchema = z.object({
  EXPO_PUBLIC_APP_ENV: z.enum(['development', 'preview', 'production']),
  EXPO_PUBLIC_API_URL: z.string().url(),
  // ... other vars
});

// 2. Define config records per environment
const BUNDLE_IDS = {
  development: 'com.obytes.development',
  preview: 'com.obytes.preview',
  production: 'com.obytes',
} as const;

// 3. Build env object from process.env
const _env: z.infer<typeof envSchema> = {
  EXPO_PUBLIC_APP_ENV: process.env.EXPO_PUBLIC_APP_ENV ?? 'development',
  EXPO_PUBLIC_API_URL: process.env.EXPO_PUBLIC_API_URL ?? '',
  // ...
};

// 4. Validate conditionally
const Env = STRICT_ENV_VALIDATION ? getValidatedEnv(_env) : _env;

// 5. Export for use
export default Env;

import 'tsx/cjs'; // Required to import TypeScript files
import Env from './env';

export default ({ config }: ConfigContext): ExpoConfig => ({
  name: Env.EXPO_PUBLIC_NAME,
  bundleIdentifier: Env.EXPO_PUBLIC_BUNDLE_ID,
  // ... rest of config

  extra: {
    eas: {
      projectId: EAS_PROJECT_ID,
    },
  },
});

pnpm add -D tsx

import Env from 'env'; // or import Env from '@env';

export const client = axios.create({
  baseURL: Env.EXPO_PUBLIC_API_URL, // Type-safe access
});

export default ({ config }: ConfigContext): ExpoConfig => ({
  // ...
  hooks: {
    postPublish: [
      {
        file: 'sentry-expo/upload-sourcemaps',
        config: {
          authToken: process.env.SENTRY_AUTH_TOKEN, // Build-time only
        },
      },
    ],
  },
});

env:
  EXPO_PUBLIC_APP_ENV: production
  EXPO_PUBLIC_API_URL: ${{ secrets.API_URL }}
  STRICT_ENV_VALIDATION: 1

// app/login.tsx
export { LoginScreen as default } from '@/features/auth/login-screen';

// ✅ CORRECT - Direct imports
import { Button, Input, Text } from '@/components/ui';
import { LoginScreen } from '@/features/auth/login-screen';
import { usePosts } from '@/features/feed/api';
import { translate } from '@/lib/i18n';
import { client } from '@/lib/api';

// ❌ WRONG - Barrel exports (causes fast refresh issues)
import { LoginScreen } from '@/features/auth';
import { usePosts } from '@/features/feed';

import { LoginForm } from './components/login-form';
import { useAuthStore } from './use-auth-store';

import { useAuthStore } from '@/features/auth/use-auth-store';
import { PostCard } from '@/features/feed/components/post-card';

import { Button, Input, View } from '@/components/ui';
import { getFieldError } from '@/components/ui/form-utils';
import { useThemeConfig } from '@/components/ui/use-theme-config';

import { translate } from '@/lib/i18n';
import { useIsFirstTime } from '@/lib/hooks/use-is-first-time';
import { client, APIProvider } from '@/lib/api';

# Create feature structure
mkdir -p src/features/my-feature/components

# Create screen
touch src/features/my-feature/my-feature-screen.tsx

# Create route re-export
echo "export { MyFeatureScreen as default } from '@/features/my-feature/my-feature-screen';" > src/app/my-feature.tsx

mkdir -p src/features/my-feature/components
touch src/features/my-feature/my-feature-screen.tsx
touch src/features/my-feature/api.ts
touch src/features/my-feature/components/my-component.tsx

type(scope?): subject  #scope is optional; multiple scopes are supported (current delimiter options: "/", "\" and ",")

fix(ui): fix input width
feat(ui): add button variants
feat(api): add usePost query hook

import { useAuthStore as useAuth, hydrateAuth } from '@/features/auth/use-auth-store';

hydrateAuth(); // call this when the application is started to check if the user is authenticated or not

const App = () => {
  const status = useAuth.use.status();
  const signOut = useAuth.use.signOut();

  return (
    <View>
      <Text>{status}</Text>
      <Button title="Sign Out" onPress={signOut} />
    </View>
  );
};

import React from 'react';
import { useTranslation } from 'react-i18next';

import { Text } from '@/components/ui';

export const Foo = () => {
  const { t } = useTranslation();
  return (
    <>
      <Text className="text-center">{t('settings.language')}</Text>
    </>
  );
};

import React from 'react';

import { Text } from '@/components/ui';

export const Foo = () => {
  return <Text className="text-center" tx="settings.language" />;
};

rm -rf node_modules ## remove node_modules folder
pnpm install ## install new dependencies
pnpm run doctor ## check for any issues with the dependencies you added to your project
pnpm lint ## linting
pnpm type-check ## type checking
pnpm test ## tests
pnpm prebuild --clean ## clean ios and android build folders and regenerate them
pnpm ios ## run ios build
pnpm android ## run android build
pnpm start -c ## start the server

pnpm add expo@latest
## pnpm add [email protected] for example

pnpm expo install --fix

pnpm run doctor ## a script inside the starter

rm -rf node_modules ## remove node_modules folder
pnpm install ## install new dependencies
pnpm lint ## linting
pnpm type-check ## type checking
pnpm test ## tests
pnpm prebuild --clean ## clean ios and android build folders and regenerate them
pnpm ios ## run ios build
pnpm android ## run android build
pnpm start -c ## start the server

pnpm up -i

/* Detailed source-code truncated for AI context efficiency. */

rm -rf node_modules ## remove node_modules folder
pnpm install ## install new dependencies
pnpm lint ## linting
pnpm type-check ## type checking
pnpm test ## tests
pnpm prebuild --clean ## clean ios and Android build folders and regenerate them
pnpm ios ## run ios build
pnpm android ## run android build
pnpm start -c ## start the server

Then add it to your `app.config.ts`

   ```ts title='app.config.ts'
   import applePrivacyManifest from './apple-privacy-manifest.json';
   export default ({ config }: ConfigContext): ExpoConfig => ({
     ...config,
     // rest of the config
     ios: {
       // rest of ios config
       privacyManifests: applePrivacyManifest,
     },
   });

# a simple npm script that runs the following command:  curl -Ls 'https://get.maestro.mobile.dev' | bash
pnpm install-maestro

pnpm e2e-test

pnpm  test
pnpm test:watch # To run the tests in watch mode

/* Detailed source-code truncated for AI context efficiency. */

const schema = z.object({
  email: z
    .string()
    .min(1, 'Email is required')
    .email('Invalid email format'),
  password: z
    .string()
    .min(6, 'Must be at least 6 characters'),
});

const form = useForm({
  validators: {
    onChange: schema as any, // Real-time validation as user types
  },
  // ... other options
});

import { getFieldError } from '@/components/ui/form-utils';

<form.Field
  name="email"
  children={(field) => (
    <Input
      error={getFieldError(field)}
      // ... other props
    />
  )}
/>

<form.Subscribe
  selector={(state) => [state.isValid, state.isSubmitting]}
  children={([isValid, isSubmitting]) => (
    <Button
      disabled={!isValid}
      loading={isSubmitting}
      onPress={form.handleSubmit}
    />
  )}
/>

<form.Field
  name="email"
  children={(field) => {
    // Available properties:
    field.state.value       // Current field value
    field.handleChange      // Update value handler
    field.handleBlur        // Blur event handler
    field.state.meta.isTouched  // Whether field has been interacted with
    field.state.meta.errors     // Array of validation errors

    return <Input {...props} />
  }}
/>

<form.Field
  name="category"
  children={(field) => (
    <Select
      label="Category"
      value={field.state.value}
      onSelect={(value) => field.handleChange(value)}
      options={categories}
      error={getFieldError(field)}
    />
  )}
/>

/* Detailed source-code truncated for AI context efficiency. */

const schema = z.object({
  name: z.string().optional(),
  email: z.string().email(),
});

const schema = z.object({
  acceptTerms: z.boolean(),
  email: z.string().email(),
}).refine(
  (data) => data.acceptTerms === true,
  { message: 'You must accept the terms', path: ['acceptTerms'] }
);

const form = useForm({
  validators: {
    onChange: schema,
    onSubmitAsync: async ({ value }) => {
      // Async validation logic
      const isUnique = await checkEmailUnique(value.email);
      if (!isUnique) {
        return {
          fields: {
            email: 'Email already exists',
          },
        };
      }
    },
  },
});

import * as React from 'react';
import { List, EmptyList, Text } from '@/components/ui';

const MyComponent = () => {
  return (
    <List
      data={['Item 1', 'Item 2']}
      renderItem={({ item }) => <Text>{item}</Text>}
      ListEmptyComponent={<EmptyList message="No items" />}
    />
  );
};

import * as React from 'react';
import { Image } from '@/components/ui';

const MyComponent = () => {
  return (
    <Image
      className="w-32 h-32"
      source={{
        uri: 'https://images.unsplash.com/photo-1524758631624-e2822e304c36',
      }}
    />
  );
};

import * as React from 'react';
import { Text, View } from 'react-native';

const MyComponent = () => {
  return (
    <View className="flex flex-col items-center justify-center">
      <Text className="text-2xl" tx="welcome" />
      <Text className="text-md" className="text-base">
        Hello world
      </Text>
    </View>
  );
};

import * as React from 'react';
import { Input, View } from '@/components/ui';

const MyComponent = () => {
  return (
    <View className="flex flex-col items-center justify-center">
      <Input label="Email" error="Email is required" />
    </View>
  );
};

import * as React from 'react';
import { Modal, useModal, View, Button, Text } from '@/components/ui';

const MyComponent = () => {
  const modal = useModal();

  return (
    <View className="flex flex-col items-center justify-center">
      <Button variant="primary" label="Show Modal" onPress={modal.present} />
      <Modal ref={modal.ref} title="modal title" snapPoints={['60%']}>
        <Text>Modal Content</Text>
      </Modal>
    </View>
  );
};

import * as React from 'react';

import type { Option } from '@/components/ui';
import { SelectInput, View } from '@/components/ui';

const options: Option[] = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
];

const MyComponent = () => {
  const [value, setValue] = React.useState<string | number | undefined>();
  return (
    <View className="flex flex-col items-center justify-center">
      <Select
        label="Select"
        error="Select is required"
        options={options}
        value={value}
        onSelect={(option) => setValue(option.value)}
      />
    </View>
  );
};

import { Checkbox } from '@/components/ui';

const App = () => {
  const [checked, setChecked] = useState(false);

  return (
    <Checkbox
      checked={checked}
      onChange={setChecked}
      accessibilityLabel="accept terms of condition"
      label="I accept terms and conditions"
    />
  );
};

import { Checkbox } from '@/components/ui';

const App = () => {
  const [checked, setChecked] = useState(false);

  return (
    <Checkbox.Root
      checked={checked}
      onChange={setChecked}
      accessibilityLabel="accept terms of condition"
    >
      <Checkbox.Icon checked={checked} />
      <Checkbox.Label text="I agree to terms and conditions" />
    </Checkbox.Root>
  );
};

import { Text } from 'react-native';

<Text className="font-sans font-normal">Regular Text (400)</Text>
<Text className="font-sans font-medium">Medium Text (500)</Text>
<Text className="font-sans font-semibold">SemiBold Text (600)</Text>
<Text className="font-sans font-bold">Bold Text (700)</Text>

<Text style={{ fontFamily: 'Inter', fontWeight: '400' }}>Regular Text</Text>
<Text style={{ fontFamily: 'Inter', fontWeight: '500' }}>Medium Text</Text>
<Text style={{ fontFamily: 'Inter', fontWeight: '600' }}>SemiBold Text</Text>
<Text style={{ fontFamily: 'Inter', fontWeight: '700' }}>Bold Text</Text>

pnpm add @expo-google-fonts/roboto

/* Detailed source-code truncated for AI context efficiency. */

@theme {
  /* Font families */
  --font-family-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-family-roboto: 'Roboto', ui-sans-serif, system-ui, sans-serif;

  /* ... other theme config */
}

pnpm run prebuild

pnpm run ios  # or pnpm run android

assets/fonts/
  ├── CustomFont-Regular.ttf
  └── CustomFont-Bold.ttf

plugins: [
  [
    'expo-font',
    {
      ios: {
        fonts: [
          './assets/fonts/CustomFont-Regular.ttf',
          './assets/fonts/CustomFont-Bold.ttf',
        ],
      },
      android: {
        fonts: [
          {
            fontFamily: 'CustomFont',
            fontDefinitions: [
              {
                path: './assets/fonts/CustomFont-Regular.ttf',
                weight: 400,
              },
              {
                path: './assets/fonts/CustomFont-Bold.ttf',
                weight: 700,
              },
            ],
          },
        ],
      },
    },
  ],
],

pnpm run prebuild

<View className="... border-neutral-200 dark:border-yellow-700">....</View>

import { useColorScheme } from 'uniwind';

const colorScheme = useColorScheme();
const style =
  colorScheme === 'dark'
    ? { backgroundColor: 'black' }
    : { backgroundColor: 'white' };