### Run React Native app on iOS or Android simulator

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/getting-started/create-new-app.md

Executes pnpm commands to launch the React Native application on either an iOS or Android simulator. These commands are used after project setup and dependency installation to start the development server and deploy the app to a virtual device.

```bash
# Run the app on iOS simulator
pnpm ios
```

```bash
# Run the app on Android simulator
pnpm android
```

--------------------------------

### Install Maestro via pnpm script

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/testing/end-to-end-testing.mdx

This command utilizes a pnpm script to execute a curl command, which downloads and installs Maestro. It simplifies the setup process by abstracting the direct curl command.

```bash
pnpm install-maestro
```

--------------------------------

### Install pnpm globally

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/getting-started/create-new-app.md

Installs the pnpm package manager globally on your system using npm. pnpm is a prerequisite for initializing new projects with the `create-obytes-app` starter.

```bash
npm install -g pnpm
```

--------------------------------

### Conventional Commit Real-World Examples

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/getting-started/rules-and-conventions.mdx

Provides practical examples of conventional commit messages, demonstrating how to apply different types (fix, feat) and scopes (ui, api) to describe changes effectively.

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

--------------------------------

### Clone Repository and Install Dependencies

Source: https://github.com/obytes/react-native-template-obytes/blob/master/README-project.md

This command sequence clones the project repository from GitHub and installs all necessary dependencies using pnpm, preparing the environment for development.

```sh
git clone https://github.com/user/repo-name

cd ./repo-name

pnpm install
```

--------------------------------

### Example React Native Component Unit Test Structure

Source: https://github.com/obytes/react-native-template-obytes/blob/master/prompts/write-unit-tests.md

This code snippet provides a template for structuring unit tests for a React Native component. It demonstrates the use of Jest's setup/teardown hooks (`beforeAll`, `beforeEach`, `afterEach`) and how to group tests by functionality (Rendering, Interactions, State Management) using `describe` blocks. It also showcases common assertions and user interaction simulations with React Native Testing Library.

```tsx
import React from 'react';

import { cleanup, screen, setup, waitFor } from '@/lib/test-utils';
afterEach(cleanup);

const onSubmitMock: jest.Mock<LoginFormProps['onSubmit']> = jest.fn();

describe('ComponentName', () => {
  // Setup section
  beforeAll(() => {
    // Global setup
  });

  beforeEach(() => {
    // Reset mocks and state
    jest.clearAllMocks();
  });

  // Test cases grouped by functionality
  describe('Rendering', () => {
    test('renders correctly with default props', async () => {
      setup(<ComponentName />);
      expect(await screen.findByTestId('component-name')).toBeOnTheScreen();
    });
    test('renders correctly with custom props', async () => {});
  });

  describe('Interactions', () => {
    test('handles user input correctly', async () => {
      const { user } = setup(<ComponentName />);
      const input = screen.getByTestId('input-id');
      await user.type(input, 'test');
      expect(input).toHaveValue('test');
    });
    test('triggers appropriate callbacks', async () => {});
  });

  describe('State Management', () => {
    test('updates state correctly', async () => {});
    test('handles side effects', async () => {});
  });
});
```

--------------------------------

### Astro Starlight CLI Management Commands

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/README.md

A comprehensive list of command-line interface operations for developing, building, and managing an Astro Starlight project. These commands are executed from the project root and cover dependency installation, local development server, production build, and build preview.

```APIDOC
npm install
  - Action: Installs project dependencies.

npm run dev
  - Action: Starts local development server at `localhost:3000`.

npm run build
  - Action: Builds your production site to `./dist/`.

npm run preview
  - Action: Previews your build locally, before deploying.

npm run astro ...
  - Action: Run CLI commands like `astro add`, `astro check`.

npm run astro -- --help
  - Action: Get help using the Astro CLI.
```

--------------------------------

### Initialize new React Native project with create-obytes-app

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/getting-started/create-new-app.md

Uses `npx` to execute the `create-obytes-app` command, creating a new Expo app named `MyApp` and installing all necessary dependencies. This command sets up the project structure based on the Obytes starter template.

```bash
npx create-obytes-app@latest MyApp
```

--------------------------------

### Start Application with Specific Environment and Clear Cache

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/getting-started/environment-vars-config.mdx

Provides a command to launch the application while explicitly setting the `APP_ENV` to 'production' and clearing the cache. This ensures the application starts with the correct environment-specific configurations and a clean state.

```bash
APP_ENV=production pnpm start -cc
```

--------------------------------

### Install Sentry React Native SDK

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/recipes/sentry-setup.mdx

Installs the official Sentry SDK for React Native applications using `npx expo install`. This command adds the necessary `@sentry/react-native` package to your project dependencies, enabling Sentry's error monitoring capabilities.

```bash
npx expo install @sentry/react-native
```

--------------------------------

### Example Usage of Modal Component (React Native TSX)

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/ui-and-theme/components.mdx

Illustrates how to integrate and control the `Modal` component in a React Native application. This example demonstrates using the `useModal` hook to present the modal and configuring its title and snap points.

```tsx
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>
  );
};
```

--------------------------------

### Initialize New React Native Project with Obytes Template

Source: https://github.com/obytes/react-native-template-obytes/blob/master/cli/README.md

This command provides a quick and easy way to scaffold a new React Native project using the Obytes template. It utilizes `npx` to execute the latest version of the `create-obytes-app` package, setting up a pre-configured project with all the integrated tools and best practices, such as Expo, TypeScript, and Tailwind CSS.

```Shell
npx create-obytes-app@latest MyApp
```

--------------------------------

### Example Usage of Input Component (React Native TSX)

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/ui-and-theme/components.mdx

Demonstrates how to use the `Input` component within a React Native functional component. This example shows basic integration, including setting a label and displaying an error message, wrapped within a `View` for layout.

```tsx
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>
  );
};
```

--------------------------------

### Example Usage of Select Component

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/ui-and-theme/components.mdx

Demonstrates how to integrate and use the `Select` component in a React Native application. This example shows state management for the selected value using React's `useState` hook and passing required props like `label`, `error`, `options`, and `onSelect` to render a functional select input.

```tsx
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>
  );
};
```

--------------------------------

### Example Environment Variable Validation Error Message

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/getting-started/environment-vars-config.mdx

Displays a typical error message encountered when environment variables are missing or invalid according to the defined `zod` schema. It provides details on the problematic variables and offers a tip for resolving the issue by restarting the server with a cache-clearing flag.

```bash
❌ Invalid environment variables: { TEST: [ 'Required' ] }
❌ Missing variables in .env.development file, Make sure all required variables are defined in the .env.development file.
💡 Tip: If you recently updated the .env.development file and the error still persists, try restarting the server with the -c flag to clear the cache.
```

--------------------------------

### Initialize Sentry SDK in Application

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/recipes/sentry-setup.mdx

Provides the initial setup for Sentry within the application, including importing necessary modules and conditionally initializing Sentry only in non-development environments. It also demonstrates setting up React Navigation integration for enhanced error tracking within navigation flows.

```typescript
import { Env } from '@env';
import * as Sentry from '@sentry/react-native';
import { useNavigationContainerRef } from 'expo-router';
import { useEffect } from 'react';

const navigationIntegration = Sentry.reactNavigationIntegration({
  enableTimeToInitialDisplay: true,
});

export const initSentry = () => {
  if (!__DEV__) {
    Sentry.init({

```

--------------------------------

### Basic Usage of Checkbox Component

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/ui-and-theme/components.mdx

Illustrates a straightforward implementation of the `Checkbox` component. This example demonstrates how to manage its checked state using React's `useState` hook and handle user interactions with the `onChange` prop, along with setting accessibility and display labels.

```tsx
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"
    />
  );
};
```

--------------------------------

### Fix Expo Dependency Mismatches

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/guides/upgrading-deps.mdx

This command automatically analyzes your project's dependencies and updates them to match the exact version requirements of the currently installed Expo SDK, resolving potential compatibility issues.

```bash
pnpm expo install --fix
```

--------------------------------

### Using the Authentication Store in React Components

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/guides/authentication.mdx

This snippet demonstrates how to import and use the authentication store's status and actions within a React Native component. It shows how to hydrate the authentication state on app start and conditionally render UI based on the authentication status, such as displaying a sign-out button.

```tsx
import { useAuth, hydrate } from '@/lib';

hydrate(); // 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>
  );
};
```

--------------------------------

### Verify Project Functionality After Dependency Updates

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/guides/upgrading-deps.mdx

After updating dependencies, especially devDependencies, it is crucial to verify the project's integrity and functionality. This sequence of commands ensures a clean slate by removing old modules, reinstalls new ones, and runs various checks including linting, type checking, tests, and builds for both iOS and Android, followed by starting the development server to confirm operational status.

```bash
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
```

--------------------------------

### Implement React Native Login Form with react-hook-form and Zod

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/ui-and-theme/Forms.mdx

This example shows a complete React Native login screen component. It integrates `react-hook-form` with `zodResolver` for schema-based validation, utilizes custom `ControlledInput` components, and handles form submission to log user data and trigger a sign-in action.

```tsx
import { zodResolver } from '@hookform/resolvers/zod';
import React from 'react';
import { useForm } from 'react-hook-form';
import * as z from 'zod';

import { useAuth } from '@/lib';
import { Button, ControlledInput, View } from '@/components/ui';

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(6),
});

type FormType = z.infer<typeof schema>;

export const Login = () => {
  const { signIn } = useAuth();

  const { handleSubmit, control } = useForm<FormType>({
    resolver: zodResolver(schema),
  });

  const onSubmit = (data: FormType) => {
    console.log(data);
    signIn({ access: 'access-token', refresh: 'refresh-token' });
  };
  return (
    <View className="flex-1 justify-center p-4">
      <ControlledInput control={control} name="email" label="Email" />
      <ControlledInput
        control={control}
        name="password"
        label="Password"
        placeholder="***"
        secureTextEntry={true}
      />
      <Button
        label="Login"
        onPress={handleSubmit(onSubmit)}
        variant="primary"
      />
    </View>
  );
};
```

--------------------------------

### Create a Reusable React Native Title Component with Nativewind

Source: https://github.com/obytes/react-native-template-obytes/blob/master/prompts/image-to-components.md

This example demonstrates how to build a simple, reusable React Native functional component for displaying a title. It utilizes Nativewind for styling, applying flexbox properties, text sizing, and background colors. The component also integrates an image placeholder and uses shared UI components from `@/components/ui`.

```tsx
import * as React from 'react';

import { Text, View, Image, SavaAreaView } from '@/components/ui';

// Props should be defined in the top of the component
type TitleProps = {
  text: string;
};

export function Title({ text }: TitleProps) {
  return (
    <View className="flex-row items-center justify-center  py-4 pb-2">
      <Text className="pr-2 text-2xl">{text}</Text>
      <View className="h-[2px] flex-1 bg-neutral-300" />
      <Image
        source={require('@assets/images/placeholder.png')}
        style={{ width: 24, height: 24 }}
        contentFit="contain"
      />
    </View>
  );
}
```

--------------------------------

### Dynamically Apply Styles with useColorScheme Hook in React Native

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/ui-and-theme/ui-theming.mdx

This example illustrates how to use the `useColorScheme` hook from `nativewind` (or React Native) to programmatically determine the current color scheme. This allows for conditional styling based on whether the app is in 'dark' or 'light' mode, although NativeWind's `dark:` variant often negates the need for this approach.

```tsx
import { useColorScheme } from 'nativewind';

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

--------------------------------

### Implement a React Native Form with React Hook Form, Zod, and Nativewind

Source: https://github.com/obytes/react-native-template-obytes/blob/master/prompts/image-to-components.md

This example showcases the implementation of a robust login form in React Native. It integrates `react-hook-form` for efficient form state management and `zod` for schema-based validation, ensuring data integrity. Styling is handled with Nativewind, and `KeyboardAvoidingView` from `react-native-keyboard-controller` is used to manage keyboard overlaps. The form uses custom `ControlledInput` and `Button` components from `@/components/ui`.

```tsx
import { zodResolver } from '@hookform/resolvers/zod';
import React from 'react';
import type { SubmitHandler } from 'react-hook-form';
import { useForm } from 'react-hook-form';
import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
import * as z from 'zod';

import { Button, ControlledInput, Text, View } from '@/components/ui';

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

export type FormType = z.infer<typeof schema>;

export type LoginFormProps = {
  onSubmit?: SubmitHandler<FormType>;
};

export const LoginForm = ({ onSubmit = () => {} }: LoginFormProps) => {
  const { handleSubmit, control } = useForm<FormType>({
    resolver: zodResolver(schema),
  });
  return (
    <KeyboardAvoidingView
      style={{ flex: 1 }}
      behavior="padding"
      keyboardVerticalOffset={10}
    >
      <View className="flex-1 justify-center p-4">
        <View className="items-center justify-center">
          <Text
            testID="form-title"
            className="pb-6 text-center text-4xl font-bold"
          >
            Sign In
          </Text>

          <Text className="mb-6 max-w-xs text-center text-gray-500">
            Welcome! 👋 This is a demo login screen! Feel free to use any email
            and password to sign in and try it out.
          </Text>
        </View>

        <ControlledInput
          testID="name"
          control={control}
          name="name"
          label="Name"
        />

        <ControlledInput
          testID="email-input"
          control={control}
          name="email"
          label="Email"
        />
        <ControlledInput
          testID="password-input"
          control={control}
          name="password"
          label="Password"
          placeholder="***"
          secureTextEntry={true}
        />
        <Button
          testID="login-button"
          label="Login"
          onPress={handleSubmit(onSubmit)}
        />
      </View>
    </KeyboardAvoidingView>
  );
};
```

--------------------------------

### Using custom Text component with built-in translation support

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/guides/internationalization.mdx

This example illustrates an alternative, more concise method for displaying translated text in a React Native application. It utilizes a custom `Text` component that accepts a translation key directly via a `tx` prop, simplifying the process of rendering translated strings without explicitly calling a translation function.

```tsx
import React from 'react';

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

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

--------------------------------

### Open project in Cursor editor

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/getting-started/create-new-app.md

Opens the current directory as a project in the Cursor editor. This command is used to launch the recommended IDE for the Obytes starter, allowing access to project-specific settings and recommended extensions.

```bash
cursor .
```

--------------------------------

### Initialize Astro Starlight Project

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/README.md

Uses the npm package manager to scaffold a new Astro project, pre-configured with the Starlight documentation template. This command sets up the basic project structure and dependencies.

```Shell
npm create astro@latest -- --template starlight
```

--------------------------------

### Astro Starlight Project Directory Structure

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/README.md

Illustrates the typical file and folder layout for an Astro Starlight project. It highlights key directories such as 'public/' for static assets, 'src/' for source code including 'content/docs/' for Markdown files, and main configuration files.

```Text
.
├── public/
├── src/
│   ├── assets/
│   ├── content/
│   │   ├── docs/
│   │   └── config.ts
│   └── env.d.ts
├── astro.config.mjs
├── package.json
└── tsconfig.json
```

--------------------------------

### Local Build Commands for Production Environment

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/ci-cd/app-releasing-process.mdx

These commands are used for local builds targeting the production environment. The `prebuild:production` command prepares native project files, and the subsequent `build:production:ios` and `build:production:android` commands initiate the EAS build for production release on iOS and Android.

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

--------------------------------

### Run Prebuild Command to Load Environment Variables

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/getting-started/environment-vars-config.mdx

Executes the `pnpm prebuild` command, which is necessary to process and load newly defined environment variables into the project's build system, making them accessible to the application.

```bash
pnpm prebuild
```

--------------------------------

### Local Build Commands for Staging Environment

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/ci-cd/app-releasing-process.mdx

These commands facilitate local builds for the staging environment. The `prebuild:staging` command regenerates native project files (iOS/Android) based on the staging configuration, while the `build:staging:ios` and `build:staging:android` commands trigger the EAS build process for their respective platforms. Ensure you are logged into EAS before running build commands.

```bash
pnpm run prebuild:staging
```

```bash
pnpm run build:staging:ios
pnpm run build:staging:android
```

--------------------------------

### GitHub Actions Workflow for Environment File Creation and EAS Build

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/ci-cd/app-releasing-process.mdx

This YAML snippet demonstrates a GitHub Actions workflow step. It utilizes the `create-envfile` action to dynamically generate a `.env.production` file from GitHub secrets, followed by triggering an EAS build using a custom action, passing the application environment and Expo token.

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

- name: Create envfile
  uses: SpicyPizza/create-envfile@v2.0
  with:
    envkey_DEBUG: false
    envkey_SECRET_KEY: ${{ secrets.PRODUCTION_SECRET_KEY }}
    file_name: .env.production

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

--------------------------------

### NPM Scripts for App Release and Version Management

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/ci-cd/app-releasing-process.mdx

Defines essential npm scripts within `package.json` to automate the app versioning and release tagging process. The `app-release` script uses the `np` package to handle version bumps and Git tagging, while the `version` script ensures native app configurations are updated and changes are staged for commit.

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

--------------------------------

### Run Unit Tests Locally

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/testing/unit-testing.mdx

Commands to execute unit tests using pnpm. The `test` command runs all tests, while `test:watch` runs tests in watch mode for continuous feedback during development.

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

--------------------------------

### Define a New Environment Variable

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/getting-started/environment-vars-config.mdx

Illustrates how to define a new environment variable by adding it to a configuration file, typically a `.env` file. This variable will then be available for use within the project.

```bash
NEW_ENV_VAR=my-new-var
```

--------------------------------

### Run Maestro end-to-end tests locally

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/testing/end-to-end-testing.mdx

This command executes the pre-configured pnpm script designed to run all end-to-end tests. The tests are performed on the local emulator, providing immediate feedback during development.

```bash
pnpm e2e-test
```

--------------------------------

### Run Post-Dependency Update Checks

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/guides/upgrading-deps.mdx

After manually updating dependencies in package.json, execute this sequence of commands to clean the project, reinstall dependencies, and perform comprehensive checks including linting, type checking, testing, and rebuilding platform-specific assets to ensure project health.

```bash
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
```

--------------------------------

### GitHub Actions for Maestro End-to-End Testing on CI

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/testing/end-to-end-testing.mdx

This section details the pre-configured GitHub Actions workflows available for automating Maestro end-to-end tests on Continuous Integration (CI) environments. It outlines triggers, functionalities, and specific requirements for each workflow, supporting various testing scenarios on Android.

```APIDOC
GitHub Actions Workflows for Maestro E2E Testing:

e2e-android.yml
  Description: Workflow for running Maestro E2E tests on a self-hosted runner.
  Triggers:
    - Pull Request labeled 'android-test-github'
    - Manual workflow dispatch from GitHub Actions tab
  Functionality:
    - Generates a staging build of the application.
    - Sets up an Android emulator.
    - Runs Maestro E2E tests on the emulator.

e2e-android-maestro.yml
  Description: Workflow for running Maestro E2E tests on Maestro Cloud.
  Triggers:
    - Pull Request labeled 'android-test-maestro-cloud'
    - Manual workflow dispatch from GitHub Actions tab
  Functionality:
    - Runs Maestro E2E tests using Maestro Cloud.
    - Requires Maestro Cloud token to be configured in GitHub secrets.

e2e-android-eas-build.yml
  Description: Workflow for running Maestro E2E tests against a provided EAS APK URL.
  Triggers:
    - Manual workflow dispatch from GitHub Actions tab
  Parameters:
    - EAS APK URL: The URL of the Expo Application Services (EAS) APK to test.
  Functionality:
    - Accepts an EAS APK URL as input.
    - Runs Maestro E2E tests against the specified APK.
```

--------------------------------

### Conventional Commit Message Format

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/getting-started/rules-and-conventions.mdx

Illustrates the required structure for commit messages, including type, optional scope, and subject, as enforced by commitlint. This format helps standardize commit history for better readability and automated tooling.

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

--------------------------------

### Interactively Update Project Dependencies with pnpm

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/guides/upgrading-deps.mdx

This command initiates an interactive update process for all project dependencies managed by pnpm. It prompts the user to select which dependencies to update to their latest versions, including both regular and development dependencies, providing control over the update scope.

```bash
pnpm up -i
```

--------------------------------

### Run Expo Doctor for Project Health Check

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/guides/upgrading-deps.mdx

Execute the `doctor` script, typically part of the starter project, to identify and report any issues or inconsistencies related to Expo dependencies and configurations within the project.

```bash
pnpm run doctor ## a script inside the starter
```

--------------------------------

### Configure Sentry Initialization and Navigation Hook

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/recipes/sentry-setup.mdx

This snippet provides the configuration for Sentry's initialization, including the DSN and navigation integration. It also defines the `useSentryNavigationConfig` hook, which registers the `navigationRef` with Sentry's navigation integration for performance monitoring, ensuring it's only active in non-development environments.

```typescript
         dsn: Env.SENTRY_DSN,
         integrations: [navigationIntegration],
       });
     }
   };

   export const useSentryNavigationConfig = () => {
     const navigationRef = useNavigationContainerRef();

     useEffect(() => {
       if (navigationRef && !__DEV__) {
         navigationIntegration.registerNavigationContainer(navigationRef);
       }
     }, [navigationRef]);
   };
```

--------------------------------

### Map Environment Variables to Internal Objects

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/getting-started/environment-vars-config.mdx

This JavaScript snippet shows how to map new environment variables from `process.env` into the internal `_clientEnv` and `_buildTimeEnv` objects within `env.js`. This step makes the variables available for use within the application, distinguishing between client-side and build-time access.

```javascript
const _clientEnv = {
  // ...
  // add the new environment variable here
  NEW_ENV_VAR: process.env.NEW_ENV_VAR,
};

const _buildTimeEnv = {
  // ...
  // add the new environment variable here
  NEW_SECRET_ENV: process.env.NEW_SECRET_ENV,
};
```

--------------------------------

### Define Zod Schemas for Environment Variables

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/getting-started/environment-vars-config.mdx

This JavaScript snippet demonstrates how to extend the `client` and `buildTime` Zod schemas in `env.js` to include new environment variables. `NEW_ENV_VAR` is accessible on the client side, while `NEW_SECRET_ENV` is restricted to build-time operations, ensuring proper validation and security.

```javascript
const client = z.object({
  // ...
  // add the new environment variable here/ accessible on the client side and build time(app.config.ts)
  NEW_ENV_VAR: z.string(),
});

const buildTime = z.object({
  // ...
  // add the new environment variable here / accessible only on build time(app.config.ts)
  NEW_SECRET_ENV: z.string(),
});
```

--------------------------------

### Verify Project After Expo Upgrade

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/guides/upgrading-deps.mdx

After upgrading Expo and fixing dependencies, execute these commands to clean, reinstall, and thoroughly test the project, ensuring all components function correctly with the new Expo version and to identify any remaining issues.

```bash
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
```

--------------------------------

### Add Environment Variable to .env File

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/getting-started/environment-vars-config.mdx

This Bash snippet illustrates where to add new environment variables within your `.env` files. It emphasizes the importance of including the variable in all relevant environment-specific files (e.g., `.env.development`, `.env.staging`, `.env.production`) for consistent configuration across different deployment stages.

```bash
# ...
```

--------------------------------

### Button Component Overview and Props (React Native)

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/ui-and-theme/components.mdx

Documents the `Button` component, a customizable `Pressable` with `Text` using Tailwind CSS and `tailwind-variants`. It details the structure, styling logic, and available props for customization, including variants, loading state, and sizing.

```APIDOC
Button Component (React Native)

Description:
The Button component is a customizable Pressable with Text, styled using Tailwind CSS classes and variant definitions based on the `tailwind-variants` package. The `tv` function generates styling configurations for the container (Pressable), label (Text), and indicator (ActivityIndicator for loading state). Each variant must define styles for `container`, `indicator`, and `label` keys.

Props:
- All React Native Pressable Props are supported.
- `variant`: string - Defines the button's visual style. Must be one of the keys defined in the `variant` object. Default: `default`.
- `loading`: boolean - If `true`, displays an `ActivityIndicator` and typically disables interaction. Default: `false`.
- `label`: string - The text content displayed within the button.
- `size`: string - Controls the button's dimensions. Must be one of the keys defined in the `size` object. Default: `default`.
- `className`: string - Additional Tailwind CSS class names applied directly to the Button's root container (`Pressable`).
- `textClassName`: string - Additional Tailwind CSS class names applied to the Button's label (`Text`) component.
```

--------------------------------

### Modal Component Overview and Props (React Native)

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/ui-and-theme/components.mdx

Documents the `Modal` component, which utilizes `@gorhom/bottom-sheet` to provide a flexible bottom sheet modal. It outlines the supported props, including standard `@gorhom/bottom-sheet` props, and custom props for content and title.

```APIDOC
Modal Component (React Native)

Description:
The Modal component implements a bottom sheet modal using the `@gorhom/bottom-sheet` library, offering more flexibility and control than a standard modal. It's suitable for scenarios where the content height is not fixed.

Props:
- All `@gorhom/bottom-sheet` Props are supported.
- `children`: React.ReactNode - The content to be rendered inside the modal.
- `title`: string - A string displayed as the title of the modal.
```

--------------------------------

### Upgrade Expo Package to Latest Version

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/guides/upgrading-deps.mdx

Use pnpm to update the Expo package to its latest stable version. This command ensures your project utilizes the most recent features and fixes provided by the Expo SDK.

```bash
pnpm add expo@latest
## pnpm add expo@48.0.5 for example
```

--------------------------------

### Input Component Overview and Props (React Native)

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/ui-and-theme/components.mdx

Documents the `Input` component, a simple wrapper around React Native's `TextInput` with added label and error styling. It leverages `tailwind-variants` for dynamic styling based on component state and supports all standard `TextInput` props, along with custom props for label and error messages.

```APIDOC
Input Component (React Native)

Description:
The Input component provides a styled wrapper around React Native's `TextInput`, including support for a label and error messages. It leverages the `tv` function from `tailwind-variants` to dynamically apply styles based on states like focused, error, and disabled. While simple, it's designed for extensibility (e.g., adding focus/blur handlers or icons).

Related Component:
- `ControlledInput`: A variant of `Input` integrated with `react-hook-form` via the `useController` hook for simplified form management.

Props:
- All React Native TextInput Props are supported.
- `label`: string - The text displayed as a label above the input field.
- `error`: string - An error message displayed below the input field, typically triggering error styling.
```

--------------------------------

### Integrate Sentry into React Native Root Layout

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/recipes/sentry-setup.mdx

This code demonstrates how to import and utilize the `initSentry` function and `useSentryNavigationConfig` hook within the `RootLayout` component of an Expo application. It ensures Sentry is initialized and configured for navigation tracking, and wraps the entire application with `Sentry.wrap` for comprehensive error and performance monitoring.

```typescript
import { initSentry, useSentryNavigationConfig } from '@/lib/sentry';
import * as Sentry from '@sentry/react-native';

initSentry();

function RootLayout() {
  useSentryNavigationConfig();

  return (
    <Providers>
      <Stack>
        <Stack.Screen name="(app)" options={{ headerShown: false }} />
        <Stack.Screen name="onboarding" options={{ headerShown: false }} />
        ...
      </Stack>
    </Providers>
  );
}

// Wrap your app with Sentry
export default Sentry.wrap(RootLayout);
```

--------------------------------

### Define Sentry Environment Variables in .env

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/recipes/sentry-setup.mdx

Defines the essential Sentry organization, project, and DSN variables required for your application's Sentry integration. These variables should be added to your project's `.env` file for local development and build processes.

```bash
SENTRY_ORG=your_sentry_organization_slug
SENTRY_PROJECT=your_sentry_project_name
SENTRY_DSN=your_sentry_dsn
```

--------------------------------

### Run React Native App on iOS Simulator

Source: https://github.com/obytes/react-native-template-obytes/blob/master/README-project.md

Executes the React Native application on an iOS simulator. This command assumes the iOS development environment is correctly set up.

```sh
pnpm ios
```

--------------------------------

### Select Component Props and Interface

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/ui-and-theme/components.mdx

Defines the properties and interface for the `Select` React Native UI component, including options for labels, error handling, data options, selection callbacks, and disabled states. It outlines the expected types and purpose of each prop to facilitate correct usage.

```APIDOC
label: string - Input label
error: string - Input error message
options: array of { label: string; value: string | number } - List of items to select from
value: string | number - Selected item value
onSelect: (option: Option) => void; - Callback function to handle item selection
placeholder: string - Placeholder text
disabled: boolean - Disable select input (default: false)
```

--------------------------------

### Define Apple Privacy Manifest for Sentry

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/recipes/sentry-setup.mdx

This JSON snippet defines the `apple-privacy-manifest.json` file, specifying the types of data collected (crash, performance, diagnostic) and the accessed API categories (UserDefaults, SystemBootTime, FileTimestamp) along with their reasons. This manifest is essential for complying with Apple's privacy requirements when using SDKs like Sentry in your application.

```json
{
  "NSPrivacyCollectedDataTypes": [
    {
      "NSPrivacyCollectedDataType": "NSPrivacyCollectedDataTypeCrashData",
      "NSPrivacyCollectedDataTypeLinked": false,
      "NSPrivacyCollectedDataTypeTracking": false,
      "NSPrivacyCollectedDataTypePurposes": [
        "NSPrivacyCollectedDataTypePurposeAppFunctionality"
      ]
    },
    {
      "NSPrivacyCollectedDataType": "NSPrivacyCollectedDataTypePerformanceData",
      "NSPrivacyCollectedDataTypeLinked": false,
      "NSPrivacyCollectedDataTypeTracking": false,
      "NSPrivacyCollectedDataTypePurposes": [
        "NSPrivacyCollectedDataTypePurposeAppFunctionality"
      ]
    },
    {
      "NSPrivacyCollectedDataType": "NSPrivacyCollectedDataTypeOtherDiagnosticData",
      "NSPrivacyCollectedDataTypeLinked": false,
      "NSPrivacyCollectedDataTypeTracking": false,
      "NSPrivacyCollectedDataTypePurposes": [
        "NSPrivacyCollectedDataTypePurposeAppFunctionality"
      ]
    }
  ],
  "NSPrivacyAccessedAPITypes": [
    {
      "NSPrivacyAccessedAPIType": "NSPrivacyAccessedAPICategoryUserDefaults",
      "NSPrivacyAccessedAPITypeReasons": ["CA92.1"]
    },
    {
      "NSPrivacyAccessedAPIType": "NSPrivacyAccessedAPICategorySystemBootTime",
      "NSPrivacyAccessedAPITypeReasons": ["35F9.1"]
    },
    {
      "NSPrivacyAccessedAPIType": "NSPrivacyAccessedAPICategoryFileTimestamp",
      "NSPrivacyAccessedAPITypeReasons": ["C617.1"]
    }
  ]
}
```

--------------------------------

### Displaying Images with Expo Image and Nativewind Styling

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/ui-and-theme/components.mdx

Illustrates the usage of the custom `Image` component, which leverages `expo-image` for performance and `nativewind` for Tailwind CSS styling via the `className` prop. It supports all props from `expo-image`.

```tsx
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',
      }}
    />
  );
};
```

--------------------------------

### Validate and Expose Sentry Environment Variables in env.js

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/recipes/sentry-setup.mdx

Updates the `env.js` file to include validation for `SENTRY_DSN` (client-side) and `SENTRY_ORG`, `SENTRY_PROJECT` (build-time) using Zod. This ensures proper type checking and availability of Sentry configuration within the application, distinguishing between client and build-time variables.

```javascript
// ... existing imports and configurations

const client = z.object({
  // ... other client env vars
  SENTRY_DSN: z.string().min(1, 'SENTRY_DSN is required'),
});

const buildTime = z.object({
  // ... other build-time env vars
  SENTRY_ORG: z.string().min(1, 'SENTRY_ORG is required'),
  SENTRY_PROJECT: z.string().min(1, 'SENTRY_PROJECT is required'),
});

const _clientEnv = {
  // ... other client env vars
  SENTRY_DSN: process.env.SENTRY_DSN,
};

const _buildTimeEnv = {
  // ... other build-time env vars
  SENTRY_ORG: process.env.SENTRY_ORG,
  SENTRY_PROJECT: process.env.SENTRY_PROJECT,
};

// ... rest of the file
```

--------------------------------

### Diagnosing and Committing React Native Dependency Fixes with Expo Doctor

Source: https://github.com/obytes/react-native-template-obytes/blob/master/prompts/expo-doctor.md

This snippet provides the shell commands to diagnose React Native project dependencies using `expo doctor` and to commit the `package.json` and `pnpm-lock.yaml` changes after successful resolution of issues. It assumes `pnpm` is used as the package manager for running `expo doctor`.

```shell
pnpm run doctor
```

```shell
git add package.json pnpm-lock.yaml && git commit -m "fix(deps): expo doctor issues"
```

--------------------------------

### Using List Component with FlashList in React Native

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/ui-and-theme/components.mdx

Demonstrates how to use the custom `List` component, which wraps `@shopify/flash-list`, along with `EmptyList` for displaying messages when the list is empty. It supports all props from `@shopify/flash-list`.

```tsx
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" />}
    />
  );
};
```

--------------------------------

### Run React Native App on Android Emulator

Source: https://github.com/obytes/react-native-template-obytes/blob/master/README-project.md

Executes the React Native application on an Android emulator or connected device. This command requires the Android development environment to be properly configured.

```sh
pnpm android
```

--------------------------------

### Configure Expo to Include Apple Privacy Manifest

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/recipes/sentry-setup.mdx

This TypeScript snippet demonstrates how to import the previously defined `apple-privacy-manifest.json` and integrate it into the `app.config.ts` file for an Expo project. By assigning the imported JSON to `ios.privacyManifests`, it ensures that the privacy manifest is correctly bundled with the iOS application.

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

--------------------------------

### Configure Expo Font Plugin for Native Font Loading

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/ui-and-theme/fonts.mdx

This JavaScript configuration for `app.config.js` demonstrates how to use the `expo-font` plugin to load custom fonts natively in an Expo application. It specifies the path to the font file, enabling the font to be bundled and used by the native build.

```js
import type { ConfigContext, ExpoConfig } from '@expo/config';

export default ({ config }: ConfigContext): ExpoConfig => ({
  ...config,
  plugins: [
    [
      'expo-font',
      {
        fonts: ['./assets/fonts/Inter.ttf'],
      },
    ],
  ],
});
```

--------------------------------

### Configure Sentry Expo Plugin in app.config.ts

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/recipes/sentry-setup.mdx

Adds the Sentry Expo plugin to `app.config.ts`, configuring it with the Sentry organization and project details from the `Env` variables. This step integrates Sentry into the Expo build process for error reporting and automated source map uploads.

```typescript
// rest of the file

import { ClientEnv, Env } from './env';

export default ({ config }: ConfigContext): ExpoConfig => ({
  ...config,
  // rest of the config

  plugins: [
    // rest of the plugins
    [
      '@sentry/react-native/expo',
      {
        url: 'https://sentry.io/',
        organization: Env.SENTRY_ORG,
        project: Env.SENTRY_PROJECT,
        note: 'Ensure you set the SENTRY_AUTH_TOKEN as an environment variable to authenticate with Sentry. Do not add it to the .env file. Instead, add it as an EAS secret or as an environment variable in your CI/CD pipeline for security.',
        // If you are using a self-hosted instance, update the value of the url property
        // to point towards your self-hosted instance. For example, https://self-hosted.example.com/.
      },
    ],
  ],
});
```

--------------------------------

### Access Environment Variables in TypeScript Client

Source: https://github.com/obytes/react-native-template-obytes/blob/master/docs/src/content/docs/getting-started/environment-vars-config.mdx

Demonstrates how to import and utilize environment variables within a TypeScript file, specifically for configuring an Axios client. Variables are accessed via the `Env` object imported from `@env`, ensuring type-safe access to client-side environment configurations like `API_URL`.

```ts
import { Env } from '@env';
import axios from 'axios';
export const client = axios.create({
  baseURL: Env.API_URL,
});
```