Obytes Starter

https://starter.obytes.com/
Admin
Obytes Starter is a production-ready React Native/Expo template with pre-configured tooling,...
Tokens:49,842
Snippets:416
Trust Score:8
Update:3 months ago
Show doc for...
Tokens:
Raw
### Clean Install and Verify Project

Source: https://starter.obytes.com/guides/upgrading-deps

Performs a clean installation of dependencies, runs linting and type checks, rebuilds project artifacts, and starts the development server. This sequence ensures the project is functional after dependency upgrades.

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

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

### Setup Node, PNPM, and Install Dependencies Action

Source: https://starter.obytes.com/ci-cd/workflows-references

This composite action sets up the Node.js environment with PNPM and installs project dependencies. It's used in most workflows to ensure a consistent development environment. Update Node.js or PNPM versions here to affect all workflows.

```yaml
# 🔗 Links:
# Source file: https://github.com/obytes/react-native-template-obytes/blob/master/.github/actions/setup-node-pnpm-install/action.yml
# Composite actions docs: https://docs.github.com/en/actions/creating-actions/creating-a-composite-action


# ✍️ Description:
# This is a composite action, which means it can be used in other actions.
# It is used in almost all workflows to set up the environment and install dependencies.
# Updating  the package manager or Node version here will be reflected in all workflows.


# 👀 Example usage:
#       - name : 📦 Setup Node + PNPM + install deps
#         uses: ./.github/actions/setup-node-pnpm-install


name: 'Setup  Node + PNPM + Install Dependencies'
description: 'Setup  Node + PNPM + Install Dependencies'
runs:
  using: composite
  steps:
    - uses: pnpm/action-setup@v4
      with:
        run_install: false
    - uses: actions/setup-node@v4
      with:
        node-version: 20
        cache: pnpm


    - name: 📦 Install Project Dependencies
      run: pnpm install --frozen-lockfile
      shell: bash

```

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

### Install Maestro

Source: https://starter.obytes.com/testing/end-to-end-testing

Installs Maestro using a simple npm script that downloads and executes the installation command.

```bash
pnpm install-maestro
```

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

### Install pnpm

Source: https://starter.obytes.com/getting-started/create-new-app

Install pnpm globally if it is not already present on your machine. This package manager is required for the project setup.

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

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

### Switching Environments with pnpm

Source: https://starter.obytes.com/getting-started/environment-vars-config

Use these pnpm commands to start your application in different environments. The default environment is development.

```bash
# Development (default)
pnpm start


# Preview environment
pnpm start:preview


# Production environment
pnpm start:production
```

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

### Install Sentry SDK

Source: https://starter.obytes.com/recipes/sentry-setup

Install the Sentry React Native SDK using the Expo package manager.

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

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

### Input Component Usage Example

Source: https://starter.obytes.com/ui-and-theme/components

Demonstrates how to use the Input component with a label and an error message. This example shows a basic integration within a View component.

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

```

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

### Conventional Commit Message Examples

Source: https://starter.obytes.com/getting-started/rules-and-conventions

Provides practical examples of commit messages adhering to the conventional commit format.

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

```

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

### Create New Obytes App

Source: https://starter.obytes.com/getting-started/create-new-app

Initialize a new Expo app named 'MyApp' using the `create-obytes-app` command. This command also installs all necessary dependencies provided by the starter.

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

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

### React Select Component Usage Example

Source: https://starter.obytes.com/ui-and-theme/components

Example demonstrating how to use the Select component in a React application. It shows how to manage the selected value using useState and pass options and callbacks.

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

```

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

### Install Google Font Package

Source: https://starter.obytes.com/ui-and-theme/fonts

Use pnpm to install the desired font package from the @expo-google-fonts collection.

```bash
pnpm add @expo-google-fonts/roboto
```

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

### Real-World Form with API Integration

Source: https://starter.obytes.com/ui-and-theme/forms

A complete example of a form with API integration, including submission with TanStack Query, loading states, and notifications.

```jsx
export default function AddPost() {
  const { mutate: addPost, isPending } = useAddPost();


  const form = useForm({
    defaultValues: {
      title: '',
      body: '',
    },
    validators: {
      onChange: schema as any,
    },
    onSubmit: ({ value }) => {
      addPost(
        { ...value, userId: 1 },
        {
          onSuccess: () => {
            showMessage({
              message: 'Post added successfully',
              type: 'success',
            });
          },
          onError: () => {
            showErrorMessage('Error adding post');
          },
        },
      );
    },
  });


  return (
    <View className="flex-1 p-4">
      <form.Field
        name="title"
        children={(field) => (
          <Input
            label="Title"
            value={field.state.value}
            onBlur={field.handleBlur}
            onChangeText={field.handleChange}
            error={getFieldError(field)}
          />
        )}
      />


      <form.Field
        name="body"
        children={(field) => (
          <Input
            label="Content"
            multiline
            value={field.state.value}
            onBlur={field.handleBlur}
            onChangeText={field.handleChange}
            error={getFieldError(field)}
          />
        )}
      />


      <form.Subscribe
        selector={(state) => [state.isSubmitting]}
        children={([isSubmitting]) => (
          <Button
            label="Add Post"
            loading={isPending || isSubmitting}
            onPress={form.handleSubmit}
          />
        )}
      />
    </View>
  );
}
```

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

### Setup JDK, Gradle, and Generate APK Action

Source: https://starter.obytes.com/ci-cd/workflows-references

This composite action configures the Java Development Kit (JDK) and Gradle, then generates an Android APK. It accepts an APP_ENV input to specify the build environment (development, staging, production), defaulting to staging. The generated APK is located at ./android/app/build/outputs/apk/release/app-release.apk.

```yaml
# 🔗 Links:
# Source file: https://github.com/obytes/react-native-template-obytes/blob/master/.github/actions/setup-jdk-generate-apk/action.yml
# Composite actions docs: https://docs.github.com/en/actions/creating-actions/creating-a-composite-action


# ✍️ Description:
# This is a composite action, which means it can be used in other actions.
# This action is used to set up the JDK environment and generate an Android APK for testing.
# This action accepts one input: `APP_ENV`, which is used to generate an APK for a specific environment (development, staging, production). We use staging by default.
# Before generating the APK, we run a pre-build script to generate the necessary native folders based on the APP_ENV.
# On success, the APK is generated at `./android/app/build/outputs/apk/release/app-release.apk`.


# 👀 Example usage:
#       - name : 📦 Set Up JDK + Generate Test APK
#         uses: ./.github/actions/setup-jdk-generate-apk
#         with:
#           APP_ENV: 'staging'


name: 'Setup  JDK + GRADLE + Generate APK'
description: 'Setup  JDK + GRADLE + Generate APK'
inputs:
  APP_ENV:
    description: 'APP_ENV (one of): development, staging, production'
    required: true
    default: staging


runs:
  using: composite
  steps:
    - name: Set Up JDK
      uses: actions/setup-java@v3
      with:
        distribution: zulu # See 'Supported distributions' for available options
        java-version: '17'
    - name: Setup Gradle
      uses: gradle/gradle-build-action@v2


    - name: Generate Test APK
      run: |
        pnpm prebuild:${{ inputs.APP_ENV }}
        cd  android
        chmod +x ./gradlew
        ./gradlew assembleRelease --no-daemon
        cd ..
      shell: bash
      env:
        EXPO_NO_DOTENV: '1'
        APP_ENV: ${{ inputs.APP_ENV }}
        CI: 'true'


```

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

### Install tsx for TypeScript Configuration

Source: https://starter.obytes.com/getting-started/environment-vars-config

Install the tsx package as a dev dependency to enable importing TypeScript files in app.config.ts.

```bash
pnpm add -D tsx
```

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

### Conventional Commit Message Format Example

Source: https://starter.obytes.com/getting-started/rules-and-conventions

Illustrates the standard format for commit messages, including type, optional scope, and subject.

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

```

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

### Setup GitHub Action for EAS Build

Source: https://starter.obytes.com/ci-cd/app-releasing-process

This GitHub Actions workflow snippet demonstrates how to create an .env file with specified environment variables and then trigger an EAS build for production. Ensure required secrets like PRODUCTION_SECRET_KEY and EXPO_TOKEN are configured in your GitHub repository.

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


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

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

### Update Dependencies and Run Checks

Source: https://starter.obytes.com/guides/upgrading-deps

Execute these commands after updating dependencies in `package.json` to clean, install, and verify your project. Includes commands for linting, type checking, testing, building, and running the development server.

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

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

### Image Component Usage Example

Source: https://starter.obytes.com/ui-and-theme/components

Demonstrates how to use the Image component with Tailwind CSS class names for styling.

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

```

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

### Usage Example of Custom Text Component

Source: https://starter.obytes.com/ui-and-theme/components

Demonstrates how to use the custom Text component with translation keys and direct text content. Supports various styling through className props.

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


```

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

### Run App on Android Simulator

Source: https://starter.obytes.com/getting-started/create-new-app

Launch the React Native application on an Android simulator using the pnpm package manager. This command is used after the project has been successfully created and dependencies installed.

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

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

### Run App on iOS Simulator

Source: https://starter.obytes.com/getting-started/create-new-app

Launch the React Native application on an iOS simulator using the pnpm package manager. This command is used after the project has been successfully created and dependencies installed.

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

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

### Basic Login Form with TanStack Form and Zod

Source: https://starter.obytes.com/ui-and-theme/forms

Implement a basic login form using TanStack Form for state management and Zod for schema validation. This example demonstrates field creation, input handling, and submission logic.

```typescript
import { useForm } from '@tanstack/react-form';
import * as z from 'zod';
import { Button, Input, View } from '@/components/ui';
import { getFieldError } from '@/components/ui/form-utils';


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


export function LoginForm({ onSubmit }) {
  const form = useForm({
    defaultValues: {
      email: '',
      password: '',
    },
    validators: {
      onChange: schema as any,
    },
    onSubmit: async ({ value }) => {
      onSubmit(value);
    },
  });


  return (
    <View className="p-4">
      <form.Field
        name="email"
        children={(field) => (
          <Input
            label="Email"
            value={field.state.value}
            onBlur={field.handleBlur}
            onChangeText={field.handleChange}
            error={getFieldError(field)}
          />
        )}
      />


      <form.Field
        name="password"
        children={(field) => (
          <Input
            label="Password"
            secureTextEntry
            value={field.state.value}
            onBlur={field.handleBlur}
            onChangeText={field.handleChange}
            error={getFieldError(field)}
          />
        )}
      />


      <form.Subscribe
        selector={(state) => [state.isSubmitting]}
        children={([isSubmitting]) => (
          <Button
            label="Login"
            loading={isSubmitting}
            onPress={form.handleSubmit}
          />
        )}
      />
    </View>
  );
}
```

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

### Initialize Sentry in App

Source: https://starter.obytes.com/recipes/sentry-setup

Initialize the Sentry SDK in your application, typically in a dedicated file like `src/lib/sentry.ts`. This setup includes Sentry's React Navigation integration and is conditionally enabled for production builds.

```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({
      dsn: Env.SENTRY_DSN,
      integrations: [navigationIntegration],
    });
  }
};


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


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


```

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

### Root Layout Setup with Expo Router

Source: https://starter.obytes.com/guides/navigation

This snippet demonstrates the root layout component for an Expo Router application. It includes essential providers, splash screen management, and basic screen definitions for '(app)', 'onboarding', and 'login'. Ensure all necessary providers and configurations are correctly imported.

```typescript
import type { ViewProps } from 'react-native';
import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';


import { ThemeProvider } from '@react-navigation/native';
import { Stack } from 'expo-router';
import * as SplashScreen from 'expo-splash-screen';
import * as React from 'react';
import { StyleSheet } from 'react-native';
import FlashMessage from 'react-native-flash-message';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { KeyboardProvider } from 'react-native-keyboard-controller';
import { useThemeConfig } from '@/components/ui/use-theme-config';
import { hydrateAuth } from '@/features/auth/use-auth-store';


import { APIProvider } from '@/lib/api';
import { loadSelectedTheme } from '@/lib/hooks/use-selected-theme';
// Import  global CSS file
import '../global.css';


export { ErrorBoundary } from 'expo-router';


// eslint-disable-next-line react-refresh/only-export-components
export const unstable_settings = {
  initialRouteName: '(app)',
};


hydrateAuth();
loadSelectedTheme();
// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();
// Set the animation options. This is optional.
SplashScreen.setOptions({
  duration: 500,
  fade: true,
});


export default function RootLayout() {
  const hasHiddenSplash = React.useRef(false);


  const onLayoutRootView = React.useCallback(() => {
    if (hasHiddenSplash.current) {
      return;
    }


    hasHiddenSplash.current = true;
    SplashScreen.hide();
  }, []);


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


function Providers({
  children,
  onLayout,
}: {
  children: React.ReactNode;
  onLayout: ViewProps['onLayout'];
}) {
  const theme = useThemeConfig();
  return (
    <GestureHandlerRootView
      onLayout={onLayout}
      style={styles.container}
      // eslint-disable-next-line better-tailwindcss/no-unknown-classes
      className={theme.dark ? `dark` : undefined}
    >
      <KeyboardProvider>
        <ThemeProvider value={theme}>
          <APIProvider>
            <BottomSheetModalProvider>
              {children}
              <FlashMessage position="top" />
            </BottomSheetModalProvider>
          </APIProvider>
        </ThemeProvider>
      </KeyboardProvider>
    </GestureHandlerRootView>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

```

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

### Setup EAS Build + Trigger Build Action

Source: https://starter.obytes.com/ci-cd/workflows-references

This composite action sets up the Expo environment and triggers EAS builds for Android and/or iOS. It requires an Expo token and allows configuration of the app environment, version, and auto-submission settings. Ensure your Expo token is securely stored as a repository secret.

```yaml
name: 'Setup EAS Build + Trigger Build'
description: 'Setup EAS Build + Trigger Build'
inputs:
  APP_ENV:
    description: 'APP_ENV (one of): development, preview, production'
    required: true
    default: staging
  AUTO_SUBMIT: # # TODO: we need to handle this too
    description: 'AUTO_SUBMIT (one of): true, false'
    required: true
    default: 'false'
  ANDROID:
    description: 'run for ANDROID (one of): true, false'
    required: true
    default: 'true'
  VERSION:
    description: VERSION
    required: true
    default: 0.0.0
  IOS:
    description: 'run for IOS (one of): true, false'
    required: true
    default: 'false'
  EXPO_TOKEN:
    description: EXPO_TOKEN
    required: true
    default: 'false'

runs:
  using: composite
  steps:
    - name: 💯 Check for EXPO_TOKEN
      run: |
        if [ -z "${{ inputs.EXPO_TOKEN }}" ]; then
          echo "You must provide an EXPO_TOKEN secret linked to this project's Expo account in this repo's secrets. Learn more: https://docs.expo.dev/eas-update/github-actions"
          exit 1
        fi
      shell: bash


    - name: 📦 Setup Expo and EAS
      uses: expo/expo-github-action@v8
      with:
        eas-version: latest
        token: ${{ inputs.EXPO_TOKEN }}

    - name: 📱 Run Android Build
      if: ${{ inputs.ANDROID == 'true' }}
      run: pnpm build:${{ inputs.APP_ENV }}:android --non-interactive  --no-wait --message "Build  ${{ inputs.APP_ENV }} ${{ inputs.VERSION }}"
      shell: bash

    - name: 📱 Run IOS Build
      if: ${{ inputs.IOS == 'true' }}
      run: pnpm build:${{ inputs.APP_ENV }}:ios --non-interactive  --no-wait --message "Build ${{ inputs.APP_ENV }} ${{ inputs.VERSION }}"
      shell: bash

```

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

### Run Prebuild and Build for QA Release

Source: https://starter.obytes.com/ci-cd/app-releasing-process

Use these commands to regenerate iOS and Android folders for the preview configuration and then build the app using EAS for QA releases. Ensure you are logged into EAS.

```bash
pnpm run prebuild:preview
```

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

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

### Add Latest Expo Package

Source: https://starter.obytes.com/guides/upgrading-deps

Installs the latest version of the Expo package from npm. Use this to get the newest features and bug fixes.

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

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

### Create Basic Feature Structure

Source: https://starter.obytes.com/getting-started/project-structure

Use these commands to set up the basic directory and file structure for a new feature. This includes creating component directories, a screen file, and a route re-export.

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

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

### Run Prebuild Command

Source: https://starter.obytes.com/getting-started/environment-vars-config

Run 'pnpm prebuild' to load the new environment variable values into the project.

```bash
pnpm prebuild
```

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

### Run Prebuild Command

Source: https://starter.obytes.com/ui-and-theme/fonts

After updating the configuration, run the `prebuild` command to apply font changes. This is necessary for font updates to take effect.

```bash
pnpm run prebuild

```

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

### Write a Login Test with Maestro

Source: https://starter.obytes.com/testing/end-to-end-testing

A sample Maestro test case for the login screen, including launching the app, navigating through onboarding, asserting visibility of elements, inputting credentials, and verifying successful login.

```yaml
appId: ${APP_ID}
env:
  Name: User
  EMAIL: user@test.com
  PASSWORD: password
---
- launchApp
- runFlow:
    when:
      visible: Obytes Starter
    file: ../utils/onboarding.yaml
- assertVisible: Sign In
- assertVisible:
    id: login-button
- tapOn:
    id: login-button
- assertVisible: Email is required
- assertVisible: Password is required
- tapOn:
    id: name
- inputText: ${Name}
- runFlow: ../utils/hide-keyboard.yaml
- tapOn:
    id: email-input
- inputText: email
- assertVisible: Invalid email format
- inputText: ${EMAIL}
- runFlow: ../utils/hide-keyboard.yaml
- tapOn:
    id: password-input
- inputText: ${PASSWORD}
- runFlow: ../utils/hide-keyboard.yaml
- tapOn:
    id: login-button
- assertVisible: Feed

```

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

### Prebuild and Rebuild App

Source: https://starter.obytes.com/ui-and-theme/fonts

Run `pnpm run prebuild` to apply font configuration changes, then rebuild your app for iOS or Android.

```bash
pnpm run prebuild
```

```bash
pnpm run ios  # or pnpm run android
```

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

### ESLint Configuration for Starter Project

Source: https://starter.obytes.com/getting-started/rules-and-conventions

This is the main ESLint configuration file for the starter project. It imports and configures multiple ESLint plugins including @antfu/eslint-config, better-tailwindcss, i18n-json, react-compiler, and testing-library. It sets up rules for React, TypeScript, and general code style, with specific overrides for React Native and internationalization files.

```javascript
import path from 'node:path';
import { fileURLToPath } from 'node:url';


import antfu from '@antfu/eslint-config';
import betterTailwindcss from 'eslint-plugin-better-tailwindcss';
import i18nJsonPlugin from 'eslint-plugin-i18n-json';
import reactCompiler from 'eslint-plugin-react-compiler';
import testingLibrary from 'eslint-plugin-testing-library';


const __dirname = path.dirname(fileURLToPath(import.meta.url));


export default antfu(
  {
    // Enable React and TypeScript support
    react: true,
    typescript: true,


    // Disable JSON processing for translation files (handled by i18n-json plugin)
    jsonc: false,


    // Use ESLint Stylistic for formatting
    stylistic: {
      indent: 2,
      quotes: 'single',
      semi: true,
    },


    // Global ignores
    ignores: [
      'dist/*',
      'node_modules',
      '__tests__/',
      'coverage',
      '.expo',
      '.expo-shared',
      'android',
      'ios',
      '.vscode',
      'docs/',
      'cli/',
      'expo-env.d.ts',
      'migration/*',
    ],
  },

  // Custom rules
  {
    rules: {
      'max-params': ['error', 3],
      'max-lines-per-function': ['error', 110],
      'react/display-name': 'off',
      'react/no-inline-styles': 'off',
      'react/destructuring-assignment': 'off',
      'react/require-default-props': 'off',
      'react-refresh/only-export-components': 'warn', // Too strict for React Native
      'unicorn/filename-case': [
        'error',
        {
          case: 'kebabCase',
          ignore: [
            '/android',
            '/ios',
            'README.md',
            'README-project.md',
            'ISSUE_TEMPLATE.md',
            'PULL_REQUEST_TEMPLATE.md',
          ],
        },
      ],
      'node/prefer-global/process': 'off', // process is commonly used in React Native configs
      'ts/no-require-imports': 'off', // Sometimes needed for mocks
      'ts/no-use-before-define': 'off', // Allow forward references in React components
      'no-console': 'off', // Console is useful for debugging
      'no-cond-assign': 'off', // Allow assignment in conditions when intentional
      'regexp/no-super-linear-backtracking': 'off', // Relax regex performance rules
      'regexp/no-unused-capturing-group': 'off', // Allow unused capturing groups
    },
  },

  // TypeScript-specific rules
  {
    files: ['**/*.ts', '**/*.tsx'],
    rules: {
      'ts/consistent-type-definitions': ['error', 'type'], // Prefer type over interface
      'react-hooks/refs': 'off', // Allow useRef without exhaustive-deps
      'ts/consistent-type-imports': [
        'warn',
        {
          prefer: 'type-imports',
          fixStyle: 'inline-type-imports',
          disallowTypeAnnotations: true,
        },
      ],
    },
  },

  // Better TailwindCSS plugin
  {
    files: ['**/*.{js,jsx,ts,tsx}'],
    ...betterTailwindcss.configs.recommended,
    settings: {
      'better-tailwindcss': {
        entryPoint: path.resolve(__dirname, './src/global.css'),
      },
    },
    rules: {
      ...betterTailwindcss.configs.recommended.rules,
      'better-tailwindcss/no-unnecessary-whitespace': 'warn',
      'better-tailwindcss/no-unknown-classes': 'warn',
      'better-tailwindcss/enforce-consistent-line-wrapping': 'off', // Can be too strict for some cases
    },
  },

  // React Compiler plugin
  {
    plugins: {
      'react-compiler': reactCompiler,
    },
    rules: {
      'react-compiler/react-compiler': 'error',
    },
  },

  // i18n JSON validation
  {
    files: ['src/translations/*.json'],
    plugins: { 'i18n-json': i18nJsonPlugin },
    processor: {
      meta: { name: '.json' },
      ...i18nJsonPlugin.processors['.json'],
    },
    rules: {
      ...i18nJsonPlugin.configs.recommended.rules,
      'i18n-json/valid-message-syntax': [
        2,
        {
          syntax: path.resolve(
            __dirname,
            './scripts/i18next-syntax-validation.js',
          ),
        },
      ],
      'i18n-json/valid-json': 2,
      'i18n-json/sorted-keys': [2, { order: 'asc', indentSpaces: 2 }],
      'i18n-json/identical-keys': [
        2,
        {
          filePath: path.resolve(__dirname, './src/translations/en.json'),
        },
      ],
      // Disable conflicting rules for i18n JSON files
      'style/semi': 'off',
      'style/comma-dangle': 'off',
      'style/quotes': 'off',
      'unused-imports/no-unused-vars': 'off',
    },
  },

  // Testing Library rules
  {
    files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
    plugins: { 'testing-library': testingLibrary },
    rules: {
      ...testingLibrary.configs.react.rules,
    },
  },
);

```

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

### Zod Schema Validation Setup

Source: https://starter.obytes.com/ui-and-theme/forms

Define your Zod schema outside the component to prevent recreation on each render. Use 'onChange' validator for real-time validation.

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

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

### Run Prebuild and Build for Production Release

Source: https://starter.obytes.com/ci-cd/app-releasing-process

Execute these commands for the production release prebuild and subsequent iOS and Android builds. Refer to EAS documentation for submission to App Store and Google Play.

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

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

### Open Project in Cursor

Source: https://starter.obytes.com/getting-started/create-new-app

Open the newly created project directory in the Cursor editor. This command assumes you are in the root directory of your project.

```bash
cursor .
```

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

### Post-merge Hook: Dependency Update Check

Source: https://starter.obytes.com/getting-started/rules-and-conventions

This hook runs after each merge. It checks for changes in 'pnpm-lock.yaml' and runs 'pnpm install' if modifications are detected to ensure dependencies are up-to-date.

```bash
function changed {
    git diff --name-only HEAD@{1} HEAD | grep "^$1" >/dev/null 2>&1
}


echo 'Checking for changes in pnpm-lock.yml...'


if changed 'pnpm-lock.yml'; then
    echo "📦 pnpm-lock.yml changed. Run pnpm install to bring your dependencies up to date."
    pnpm install
fi


echo 'You are up to date :)

echo 'If necessary, you can run pnpm prebuild to generate native code.'

exit 0

```

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

### Perform Async Validation in Forms

Source: https://starter.obytes.com/ui-and-theme/forms

Implement asynchronous validation for form fields, such as checking for unique email addresses. This example uses `onSubmitAsync` with a custom validation function.

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

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

### Create Query Hook Snippet

Source: https://starter.obytes.com/guides/data-fetching

Use the `useq` VS Code snippet to quickly generate a new query hook.

```javascript
useq
```

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

### Implement Conditional Validation with Zod

Source: https://starter.obytes.com/ui-and-theme/forms

Use Zod's `.refine()` method to implement conditional validation logic. This example ensures that 'acceptTerms' must be true for the form to be valid.

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

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

### Correct vs. Incorrect Import Patterns

Source: https://starter.obytes.com/getting-started/project-structure

Use direct file path imports for components and features to ensure fast refresh works correctly. Avoid barrel exports which can lead to issues.

```javascript
// ✅ 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';
```

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

### Define Zod Schema for Optional Fields

Source: https://starter.obytes.com/ui-and-theme/forms

Define your Zod schema outside of the component to prevent re-creation on every render, improving performance. This example shows how to define optional fields.

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

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

### Example Error Messages for Validation

Source: https://starter.obytes.com/getting-started/environment-vars-config

These messages indicate invalid or missing environment variables during validation. Restarting with the -c flag can help clear the cache if you recently updated .env files.

```text
❌ 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.
```

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

### Create Query Hook with Variables Snippet

Source: https://starter.obytes.com/guides/data-fetching

Use the `useqv` VS Code snippet to generate a new query hook that accepts variables.

```javascript
useqv
```

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

### Running Unit Tests

Source: https://starter.obytes.com/testing/unit-testing

Commands to execute unit tests using pnpm. Use watch mode for continuous testing during development.

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

```
Tokens:
Raw