### Start the development server

Source: https://github.com/infinitered/ignite/blob/master/boilerplate/README.md

Commands to initialize and start the development environment.

```bash
pnpm run
pnpm run start
```

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

### Create a new project

Source: https://github.com/infinitered/ignite/blob/master/docs/cli/Ignite-CLI.md

Starts the interactive prompt for generating a new Ignite project.

```bash
npx ignite-cli new PizzaApp
```

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

### Generate screen with case formatting

Source: https://github.com/infinitered/ignite/blob/master/docs/concept/Generators.md

Examples of generating screens using different filename casing conventions.

```bash
npx ignite-cli@latest g screen Episodes
```

```bash
npx ignite-cli@latest g screen log-in
```

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

### EmptyState Component Usage

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/EmptyState.md

Full example demonstrating various props including presets, image configuration, and text styling.

```tsx
<EmptyState
  preset="generic"
  style={{ padding: 10 }}
  imageSource={require("@assets/images/sad-face.png")}
  imageStyle={{ height: 400, width: 400 }}
  ImageProps={{ resizeMode: "contain" }}
  heading="EmptyState Heading"
  headingStyle={{ color: "#a511dc" }}
  HeadingTextProps={{ weight: "bold" }}
  content="EmptyState Content"
  contentStyle={{ color: "#a511dc" }}
  ContentTextProps={{ weight: "light" }}
  button="Press here"
  buttonOnPress={handleButtonPress}
/>
```

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

### Run the boilerplate application

Source: https://github.com/infinitered/ignite/blob/master/docs/contributing/Tour-of-Ignite.md

Commands to install dependencies and launch the boilerplate React Native app from the repository root.

```bash
cd boilerplate
pnpm install
npx pod-install
npx react-native run-ios
npx react-native run-android
```

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

### Install EAS CLI

Source: https://github.com/infinitered/ignite/blob/master/docs/QuickStart.md

Install the EAS CLI globally using npm. This is required for building and publishing applications.

```bash
npm install -g eas-cli
```

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

### Troubleshooting Ignite CLI Installation

Source: https://github.com/infinitered/ignite/blob/master/docs/README.md

Commands to help resolve common issues during Ignite CLI project initialization, such as uninstalling global versions or installing Xcode command line tools.

```bash
npm uninstall -g ignite-cli
```

```bash
node --version
```

```bash
nvm install --lts
```

```bash
sudo xcode-select --install
```

```bash
sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
```

```bash
open ./ios/<yourapp>.xcworkspace
```

```bash
npx ignite-cli@latest new <yourapp> --debug
```

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

### Create New React Native App with Ignite CLI

Source: https://github.com/infinitered/ignite/blob/master/docs/README.md

Use the Ignite CLI to generate a new React Native project. The `--yes` flag accepts all recommended defaults for a quick setup.

```bash
npx ignite-cli@latest new PizzaApp
```

```bash
npx ignite-cli@latest new PizzaApp --yes
```

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

### Header Component Usage

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/Header.md

Example of how to use the Header component with common props.

```APIDOC
## Header Component Usage

### Description
This example demonstrates the basic usage of the Header component, including setting a title, navigation icons, and press handlers.

### Props
- **titleTx** (string) - Optional - Translation key for the header title.
- **title** (string) - Optional - Direct string for the header title. Overrides `titleTx` if both are present.
- **leftIcon** (string) - Optional - Specifies the icon for the left navigation button (e.g., 'back', 'bullet', 'bug').
- **rightIcon** (string) - Optional - Specifies the icon for the right navigation button.
- **onLeftPress** (function) - Optional - Callback function for when the left icon is pressed.
- **onRightPress** (function) - Optional - Callback function for when the right icon is pressed.
- **style** (StyleProp<ViewStyle>) - Optional - Style for the inner container of the header, useful for adjusting height.
- **backgroundColor** (string) - Optional - Sets the background color of the header's outer container.
- **titleStyle** (StyleProp<TextStyle>) - Optional - Style for the header title text.
- **titleContainerStyle** (StyleProp<ViewStyle>) - Optional - Style for the outer container of the header title.
- **containerStyle** (StyleProp<ViewStyle>) - Optional - Style for the outer container of the header, useful for overriding insets on notched devices.

### Request Example
```tsx
<Header
  titleTx="header:title"
  title="Header Title"
  leftIcon="back"
  rightIcon="bullet"
  onLeftPress={() => navigation.goBack()}
  onRightPress={() => Alert.alert("pressed")}
  style={{ height: 60 }}
  backgroundColor="purple"
  titleStyle={{ color: "white" }}
/>
```
```

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

### Check Ignite CLI Installation

Source: https://github.com/infinitered/ignite/blob/master/docs/cli/Troubleshooting.md

Verify if Ignite CLI is installed globally on your system and retrieve its information. Use this to confirm installation or diagnose version conflicts.

```bash
ignite --info
```

```bash
where ignite
```

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

### Setup ThemeProvider in App.tsx

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/theme/context.ts.md

Wrap your application with ThemeProvider at the root to provide theme access to all child components.

```tsx
import { ThemeProvider } from "@/theme/context"

const App = () => {
  return <ThemeProvider>{/* Your app components go here */}</ThemeProvider>
}
```

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

### Basic Header Usage

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/Header.md

This example shows a basic Header with a title, left back icon, and right bullet icon. It demonstrates setting navigation actions and basic styling.

```tsx
<Header
  titleTx="header:title"
  title="Header Title"
  leftIcon="back"
  rightIcon="bullet"
  onLeftPress={() => navigation.goBack()}
  onRightPress={() => Alert.alert("pressed")}
  style={{ height: 60 }}
  backgroundColor="purple"
  titleStyle={{ color: "white" }}
/>
```

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

### Setting Destination Directory with Front Matter

Source: https://github.com/infinitered/ignite/blob/master/docs/concept/Generator-Templates.md

This front matter example specifies a custom `destinationDir` for the template. Files generated from this template will be placed in `app/navigation` instead of the default directory.

```ejs
---
destinationDir: app/navigation
---
import { StackNavigator } from "react-navigation"

// ...
```

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

### Create a New React Native App with Ignite CLI (Defaults)

Source: https://github.com/infinitered/ignite/blob/master/README.md

This command creates a new React Native project using Ignite CLI and accepts all recommended default settings, allowing you to start coding immediately.

```bash
npx ignite-cli@latest new PizzaApp --yes
```

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

### Add Custom Reactotron Command

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/devtools/Devtools.md

Use `reactotron.onCustomCommand` to add custom debugging tools to Reactotron. This example shows how to reset navigation state.

```typescript
reactotron.onCustomCommand({
  title: "Reset Navigation State",
  description: "Resets the navigation state",
  command: "resetNavigation",
  handler: () => {
    Reactotron.log("resetting navigation state")
    resetRoot({ index: 0, routes: [] })
  },
})
```

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

### Card Component with Reversed Preset

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/Card.md

A basic Card component example using the 'reversed' preset for distinct styling. Requires heading, content, and footer.

```tsx
<Card preset="reversed" heading="Card Heading" content="Card Content" footer="Card Footer" />
```

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

### Define Tab Stack Navigator

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/navigators/Navigation.md

Example of nesting a stack navigator within a tab to manage multiple screens per tab.

```tsx
const InboxStack = createNativeStackNavigator()

function InboxStackScreen() {
  return (
    <InboxStack.Navigator>
      <InboxStack.Screen name="List" component={ListScreen} />
      <InboxStack.Screen name="MessageDetails" component={MessageDetailsScreen} />
    </InboxStack.Navigator>
  )
}
```

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

### Clone Ignite Repository

Source: https://github.com/infinitered/ignite/wiki/Intro-to-Contributing-to-Ignite

Clone the Ignite repository to your local development environment. Ensure you have Node version 5.1 or later installed.

```shell
git clone git@github.com:<your_github>/ignite.git
```

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

### Patching a File with Front Matter

Source: https://github.com/infinitered/ignite/blob/master/docs/concept/Generator-Templates.md

This front matter example demonstrates how to use the `patch` option to append content to an existing file. It appends an export statement to `app/screens/index.ts`.

```ejs
---
patch:
  path: "app/screens/index.ts"
  append: "export * from \"./<%= props.kebabCaseName %>/<%= props.kebabCaseName %>-screen\"\n"
---
```

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

### Rebuild Native Code

Source: https://github.com/infinitered/ignite/blob/master/docs/concept/Upgrades.md

If you've added native dependencies outside of the Expo ecosystem, run this command to rebuild your native code. '--clean' removes old builds, and '--no-install' skips automatic dependency installation.

```bash
npx expo prebuild --clean --no-install
```

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

### Run the App

Source: https://github.com/infinitered/ignite/blob/master/docs/QuickStart.md

Navigate to the project directory and run the application on Android, iOS, or web.

```bash
# first
cd MyFirstApp
# then one of the following
pnpm run android
pnpm run ios
pnpm run web
```

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

### Display help information

Source: https://github.com/infinitered/ignite/blob/master/docs/cli/Ignite-CLI.md

List available commands and their descriptions.

```bash
npx ignite-cli help
```

```bash
npx ignite-cli h
```

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

### Build the CLI

Source: https://github.com/infinitered/ignite/blob/master/docs/contributing/Releasing-Ignite.md

Clean and build the project from the root directory.

```bash
pnpm run clean
pnpm run build
```

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

### Initialize AppNavigator

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/navigators/Navigation.md

Basic implementation of the primary application navigator with state management props.

```tsx
<AppNavigator initialState={initialNavigationState} onStateChange={onNavigationStateChange} />
```

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

### Fetch data using the API service

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/services/api.ts.md

Demonstrates how to import the singleton API instance and handle the response object.

```typescript
import { api } from "@/services/api"

// ...
const response = await api.getEpisodes()

if (response.kind === "ok") {
  // do something with response.episodes
} else {
  console.error(`Error fetching episodes: ${JSON.stringify(response)}`)
}
```

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

### Run Maestro Test

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/maestro.md

Execute a specific Maestro test file from the command line. Ensure Maestro is set up in your environment.

```bash
maestro test .maestro/MyTestFile.yaml
```

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

### Build Production Binaries Locally

Source: https://github.com/infinitered/ignite/blob/master/docs/QuickStart.md

Build production-ready binaries for Android (AAB) or iOS (IPA) locally using pnpm.

```bash
# Running a local Android build
pnpm run build:android:prod
# or a local iOS build
pnpm build:ios:prod
```

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

### Generate a component

Source: https://github.com/infinitered/ignite/blob/master/docs/concept/Generators.md

Creates a new component file structure.

```bash
npx ignite-cli generate component MyAwesomeButton
```

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

### TextField with Translation Key Label

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/TextField.md

Uses a translation key (`labelTx`) to set the label text, enabling internationalization. Requires `i18next` setup.

```tsx
<TextField value={input} onChangeText={(value) => setInput(value)} labelTx="signup.name" />
```

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

### Build for iOS targets

Source: https://github.com/infinitered/ignite/blob/master/boilerplate/README.md

Shortcuts for building the application for different iOS environments.

```bash
pnpm run build:ios:sim # build for ios simulator
pnpm run build:ios:device # build for ios device
pnpm run build:ios:prod # build for ios device
```

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

### Add Google Font to Typography

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/theme/typography.ts.md

Integrate Google Fonts by installing the package, importing the font styles, and adding them to `customFontsToLoad` and the `fonts` object in `app/theme/typography.ts`.

```bash
npx expo install @expo-google-fonts/inter
```

```typescript
import {
  Inter_400Regular as interRegular,
  Inter_700Bold as interBold,
} from "@expo-google-fonts/inter"

export const customFontsToLoad = {
  spaceGroteskLight,
  spaceGroteskRegular,
  spaceGroteskMedium,
  spaceGroteskSemiBold,
  spaceGroteskBold,
  interRegular,
  interBold,
}

const fonts = {
  // ...
  inter: {
    normal: "interRegular",
    bold: "interBold",
  },
}
```

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

### EmptyState with Generic Preset

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/EmptyState.md

Shows how to use the `generic` preset for a predefined EmptyState appearance.

```APIDOC
## EmptyState with Generic Preset

### Description
This example demonstrates using the `preset="generic"` prop to apply a default configuration to the `EmptyState` component.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```tsx
<EmptyState preset="generic" heading="EmptyState Heading" content="EmptyState Content" />
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### TextField with Translation Key Helper Text

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/TextField.md

Uses a translation key (`helperTx`) to set the helper text, enabling internationalization. Requires `i18next` setup.

```tsx
<TextField value={input} onChangeText={(value) => setInput(value)} helperTx="signup.name" />
```

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

### Create New Ignite Project

Source: https://github.com/infinitered/ignite/blob/master/docs/Guide.md

Use the Ignite CLI to create a new React Native project. It prompts for configuration or accepts defaults with the --yes flag.

```bash
npx ignite-cli@latest new PizzaApp
```

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

### Publish beta release

Source: https://github.com/infinitered/ignite/blob/master/docs/contributing/Releasing-Ignite.md

Publish the package to npm with the next tag.

```bash
npm publish --tag=next
```

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

### Uninstall Global Ignite CLI

Source: https://github.com/infinitered/ignite/blob/master/docs/cli/Troubleshooting.md

Remove previous global installations of the Ignite CLI to avoid version conflicts. Choose the command corresponding to your package manager.

```bash
npm uninstall --global ignite-cli
```

```bash
yarn global remove ignite-cli
```

```bash
pnpm remove ignite-cli -g
```

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

### Generate a navigator

Source: https://github.com/infinitered/ignite/blob/master/docs/concept/Generators.md

Creates a React Navigation navigator in the app/navigators folder.

```bash
npx ignite-cli generate navigator OrderPizza
```

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

### Hook up Navigation Theme

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/theme/Theming.md

Pass the `navigationTheme` object obtained from `useAppTheme()` to the `NavigationContainer`'s `theme` prop to apply Ignite's theming to your react-navigation setup.

```tsx
const { navigationTheme } = useAppTheme()
return <NavigationContainer theme={navigationTheme} {...props} />
```

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

### Spin up a new Expo-ready app

Source: https://github.com/infinitered/ignite/blob/master/docs/expo/Expo-and-Ignite.md

Use this command to create a new Ignite app. The `--yes` flag accepts all defaults. Navigate into the app directory and run the app on iOS or Android.

```bash
npx ignite-cli new PizzaApp --yes
cd PizzaApp
pnpm run ios
pnpm run android
```

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

### Card Component with Custom Heading Component

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/Card.md

Replaces the default heading element with a custom component using the `HeadingComponent` prop. This example uses a `Button` component as the heading.

```tsx
<Card
  HeadingComponent={<Button preset="reversed" text="HeadingComponent" icon="ladybug" />}
  content="Card Content"
  footer="Card Footer"
/>
```

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

### List available generators

Source: https://github.com/infinitered/ignite/blob/master/docs/concept/Generators.md

Displays all generators currently available in the project.

```bash
npx ignite-cli generate --list
```

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

### TextField Component Example

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/Components.md

The TextField component provides a React Native TextInput with an integrated label. It supports internationalized labels and placeholders, custom input styling, and ref forwarding.

```tsx
const [input, setInput] = useState("")
const inputRef = useRef()
<TextField
  value={input}
  onChangeText={setInput}
  labelTx="signup:name"
  placeholderTx="signup:nameplaceholder"
  style={$header}
  inputStyle={$inputStyle}
  preset="default"
  forwardedRef={inputRef}
/>
```

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

### Create a New Ignite App

Source: https://github.com/infinitered/ignite/blob/master/docs/QuickStart.md

Generate a new application using the Ignite CLI. The --yes flag accepts all defaults.

```bash
npx ignite-cli new MyFirstApp --yes
```

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

### Generate a screen

Source: https://github.com/infinitered/ignite/blob/master/docs/concept/Generators.md

Creates a new screen with hooks enabled.

```bash
npx ignite-cli generate screen Settings
```

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

### Define Header in Screen Config

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/Header.md

Configure a specific header for a single screen within a navigator, overriding navigator-level settings. This example hides the default header and provides a custom one.

```tsx
<Stack.Navigator screenOptions={{ headerShown: false }}>
  <Stack.Screen
    name="Welcome"
    component={WelcomeScreen}
    options={{ headerShown: true, header: () => <Header title="Hello" /> }}
  />
</Stack.Navigator>
```

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

### Custom Filename with Front Matter

Source: https://github.com/infinitered/ignite/blob/master/docs/concept/Generator-Templates.md

Use front matter to specify a custom filename for the generated file. This example uses `props.camelCaseName` to set the filename to a camelCase version of the provided name.

```ejs
---
filename: <%= props.camelCaseName %>.tsx
---
```

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

### Navigate to Ignite Directory

Source: https://github.com/infinitered/ignite/wiki/Intro-to-Contributing-to-Ignite

Change the current directory to the cloned Ignite repository.

```shell
cd ignite
```

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

### Get Safe Area Insets Style Object

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/utils/useSafeAreaInsetsStyle.ts.md

Obtain a style object for top and left safe area insets. The output will reflect the device's specific safe area values.

```tsx
const $insetsStyle = useSafeAreaInsetsStyle(["top", "left"])

console.log($insetsStyle) // { paddingTop: 47, paddingStart: 0 }
```

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

### EmptyState Component Usage

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/EmptyState.md

Demonstrates the basic usage of the EmptyState component with essential props.

```APIDOC
## EmptyState Component Usage

### Description
This example shows how to use the `EmptyState` component with its core props for displaying a message when no data is available.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```tsx
<EmptyState
  preset="generic"
  style={{ padding: 10 }}
  imageSource={require("@assets/images/sad-face.png")}
  imageStyle={{ height: 400, width: 400 }}
  ImageProps={{ resizeMode: "contain" }}
  heading="EmptyState Heading"
  headingStyle={{ color: "#a511dc" }}
  HeadingTextProps={{ weight: "bold" }}
  content="EmptyState Content"
  contentStyle={{ color: "#a511dc" }}
  ContentTextProps={{ weight: "light" }}
  button="Press here"
  buttonOnPress={handleButtonPress}
/>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Define and Use Custom Presets

Source: https://github.com/infinitered/ignite/blob/master/docs/concept/Styling.md

Create custom presets by combining base styles with specific theme-aware style functions, then apply them to components.

```tsx
const $warning: ThemedStyle<ViewStyle> = (theme) => ({
  backgroundColor: theme.colors.alert,
  color: "white",
  padding: theme.spacing.lg,
})

const $viewPresets: Record<Presets, ThemedStyle<ViewStyle>> = {
  destructive: [$baseViewStyle, $warning],
}
```

```tsx
<Button
  text="Delete"
  // set the preset here
  preset="destructive"
  onPress={() => thisItem.destroy()}
/>
```

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

### Run environment diagnostics

Source: https://github.com/infinitered/ignite/blob/master/docs/cli/Ignite-CLI.md

Checks the development environment for dependencies and version information.

```bash
npx ignite-cli doctor
```

```text
System
  platform           darwin
  arch               arm64
  cpu                10 cores     Apple M1 Pro
  directory          ExpoPlist    /Users/irignite/code/ExpoPlist

JavaScript (and globally-installed packages)
  node                16.14.2      /Users/irignite/.nvm/versions/node/v16.14.2/bin/node
  npm                 8.5.0        /Users/irignite/.nvm/versions/node/v16.14.2/bin/npm
    corepack          0.10.0
    eas-cli           2.5.1
    expo-cli          6.0.6
    gatsby-cli        4.21.0
    ignite-cli        8.3.0
    npm               8.5.0
    vercel            28.4.12
    yarn              1.22.19
  yarn                1.22.19      /Users/irignite/.nvm/versions/node/v16.14.2/bin/yarn
    create-expo-app   1.1.2
  pnpm                -            not installed
  expo                46.0.16      managed

Ignite
  ignite-cli         8.3.0        /Users/irignite/.nvm/versions/node/v16.14.2/bin/ignite
  ignite src         src          /Users/irignite/code/ignite/src

Android
  java               11.0.14.1    /Users/irignite/.asdf/shims/java
  android home       -            /Users/irignite/Library/Android/sdk

iOS
  xcode              14.0.1
  cocoapods          1.11.3       /opt/homebrew/bin/pod

Tools
  git                git version 2.37.0 (Apple Git-136)   /usr/bin/git
```

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

### View Ignite project directory structure

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/Boilerplate.md

Visual representation of the standard file and folder hierarchy generated by the Ignite CLI.

```text
your-project
├── .maestro
├── android
├── app
│   ├── components
│   ├── config
│   ├── devtools
│   ├── i18n
│   ├── context
│   ├── navigators
│   ├── screens
│   ├── services
│   ├── theme
│   ├── utils
│   ├── app.tsx
├── assets
├── ignite
│   └── templates
├── ios
├── test
│   ├── i18n.test.ts
│   ├── mockFile.ts
│   ├── setup.ts
│   ├── test-tsconfig.json
├── app.config.ts
├── app.json
├── index.tsx
├── eas.json
├── package.json
└── README.md
```

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

### Manage dependency cache

Source: https://github.com/infinitered/ignite/blob/master/docs/cli/Ignite-CLI.md

Commands to interact with the dependency cache folder used during project creation.

```bash
npx ignite-cli cache
```

```bash
npx ignite-cli c
```

```bash
npx ignite-cli cache help
```

```bash
npx ignite-cli cache path
```

```bash
npx ignite-cli cache clear
```

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

### Switch Component Usage

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/Switch.md

Demonstrates how to use the Switch component with its accessibilityMode prop.

```APIDOC
## Switch Component

### Description
The `Switch` component provides a simple way to collect user input for a boolean value.

### Props

#### `accessibilityMode`

The `accessibilityMode` is a special prop for the switch variant that adds a text/icon label for on/off states. Options are `text` and `icon`.

### Request Example
```tsx
<Switch value={value} onValueChange={setValue} accessibilityMode="icon" />
```

### Response
This component does not have a direct request/response structure as it is a UI component. Its state is managed via the `value` and `onValueChange` props.
```

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

### TextField Component Usage

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/TextField.md

Demonstrates the basic usage and various props of the TextField component.

```APIDOC
## TextField Component

Ignite's `TextField` Component is an enhanced version of the built-in React Native [`TextInput`](https://reactnative.dev/docs/textinput) component. It consists of TextInput and a Text label.

### Props

The `TextField` component accepts all the props of the built-in React Native [`TextInput`](https://reactnative.dev/docs/textinput) component, as well as the following custom props:

#### `status`

- **Type**: `'error'` | `'disabled'` | `null`
- **Default**: `null`
- **Description**: Sets the component's state to 'error' or 'disabled'. The 'error' status applies an error border color, and 'disabled' prevents editing.

```tsx
<TextField value={input} onChangeText={(value) => setInput(value)} status="error" />
```

#### `label`

- **Type**: `string`
- **Description**: An optional string to set the visible label for the text field. If not provided, `labelTx` must be used.

```tsx
<TextField value={input} onChangeText={(value) => setInput(value)} label="Name" />
```

#### `labelTx`

- **Type**: `string`
- **Description**: The translation key for the label text. Used for internationalization. If not provided, `label` must be used.

```tsx
<TextField value={input} onChangeText={(value) => setInput(value)} labelTx="signup.name" />
```

#### `labelTxOptions`

- **Type**: `object`
- **Description**: Options to pass to the translation lookup for the label text, useful for dynamic values.

```tsx
<TextField
  value={input}
  labelTx="signup.name"
  labelTxOptions={{ name: "John" }}
  onChangeText={(value) => setInput(value)}
/>
```

#### `LabelTextProps`

- **Type**: `object`
- **Description**: Props to pass to the `Text` component rendering the label.

```tsx
<TextField
  value={input}
  labelTx="signup.name"
  onChangeText={(value) => setInput(value)}
  LabelTextProps={{ style: { color: "red" } }}
/>
```

#### `helper`

- **Type**: `string`
- **Description**: An optional string for helper text. If not provided, `helperTx` must be used. Renders with a `Text` component.

```tsx
<TextField value={input} onChangeText={(value) => setInput(value)} helper="This is a helper text" />
```

#### `helperTx`

- **Type**: `string`
- **Description**: The translation key for the helper text. Used for internationalization. If not provided, `helper` must be used.

```tsx
<TextField value={input} onChangeText={(value) => setInput(value)} helperTx="signup.name" />
```

#### `helperTxOptions`

- **Type**: `object`
- **Description**: Options to pass to the translation lookup for the helper text, useful for dynamic values.

```tsx
<TextField
  value={input}
  helperTx="login.name"
  helperTxOptions={{ name: "John" }}
  onChangeText={(value) => setInput(value)}
/>
```

#### `HelperTextProps`

- **Type**: `object`
- **Description**: Props to pass to the `Text` component rendering the helper text.

```tsx
<TextField
  value={input}
  helper="Name"
  onChangeText={(value) => setInput(value)}
  HelperTextProps={{ style: { color: "red" } }}
/>
```

### Full Example

```tsx
import { TextField } from '../components';

const [input, setInput] = useState("")
<TextField
  value={input}
  onChangeText={(value) => setInput(value)}
  status="error"
  label="Name"
  labelTx="login.nameLabel"
  labelTxOptions={{ name: "John" }}
  LabelTextProps={{ style: { color: "#FFFFFF" } }}
  placeholder="John Doe"
  placeholderTx="login.namePlaceholder"
  placeholderTxOptions={{ name: "John" }}
  helper="Enter your name"
  helperTx="login.nameHelper"
  helperTxOptions={{ name: "John" }}
  HelperTextProps={{ style: { color: "#FFFFFF" } }}
  style={{ backgroundColor: "#BFBFBF" }}
  containerStyle={{ backgroundColor: "#BFBFBF" }}
  inputWrapperStyle={{ backgroundColor: "#BFBFBF" }}
  RightAccessory={() => <Icon icon="check" />}
  LeftAccessory={() => <Icon icon="bell" />}
/>
```
```

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

### Generate code components

Source: https://github.com/infinitered/ignite/blob/master/docs/cli/Ignite-CLI.md

Scaffold new components and screens using automated generators.

```bash
npx ignite-cli generate
```

```bash
npx ignite-cli g
```

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

### Execute test release script

Source: https://github.com/infinitered/ignite/wiki/Ignite-Release-Process

Run the test release script from the root directory to verify the current master branch.

```bash
./testRelease.sh <new_version_number>
```

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

### EmptyState with Custom Styling

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/EmptyState.md

Illustrates how to apply custom styles to the EmptyState container.

```APIDOC
## EmptyState with Custom Styling

### Description
This example shows how to override the default container styles of the `EmptyState` component using the `style` prop.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```tsx
<EmptyState
  style={{ padding: 10, marginTop: 20 }}
  heading="EmptyState Heading"
  content="EmptyState Content"
/>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### EmptyState with Content Translation Key

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/EmptyState.md

Illustrates using a translation key for the content text.

```APIDOC
## EmptyState with Content Translation Key

### Description
This example demonstrates using a translation key for the content text of the `EmptyState` component via the `contentTx` prop.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```tsx
<EmptyState
  heading="EmptyState Heading"
  contentTx="EmptyState:content"
  button="EmptyState Button"
/>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Header Usage Patterns

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/Header.md

Recommended methods for integrating the Header component into your application.

```APIDOC
## Header Usage

### Method 1: Navigation Options
Use `navigation.setOptions()` or the `useHeader()` hook to co-locate header logic with screen navigation.

### Method 2: Direct Rendering
Render the `<Header />` component directly within the screen's JSX body.
```

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

### EmptyState with Custom Image Source

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/EmptyState.md

Demonstrates setting a custom image for the EmptyState.

```APIDOC
## EmptyState with Custom Image Source

### Description
This example shows how to provide a custom image source for the `EmptyState` component using the `imageSource` prop.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```tsx
<EmptyState
  imageSource={require("@assets/images/empty-state.png")}
  heading="EmptyState Heading"
  content="EmptyState Content"
/>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### EmptyState Content Configuration

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/EmptyState.md

Setting content text, translation keys, options, and styles.

```tsx
<EmptyState heading="EmptyState Heading" content="EmptyState Content" button="EmptyState Button" />
```

```tsx
<EmptyState
  heading="EmptyState Heading"
  contentTx="EmptyState:content"
  button="EmptyState Button"
/>
```

```tsx
<EmptyState
  heading="EmptyState Heading"
  contentTx="EmptyState:content"
  contentTxOptions={{ count: 2 }}
  button="EmptyState Button"
/>
```

```tsx
<EmptyState
  heading="EmptyState Heading"
  content="EmptyState Content"
  contentStyle={{ backgroundColor: colors.error, color: colors.palette.neutral100 }}
  button="EmptyState Button"
/>
```

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

### Basic TextField Usage

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/TextField.md

Demonstrates the basic usage of the TextField component with state management, status, label, placeholder, and helper text. Includes accessory components and custom styling.

```tsx
import { TextField } from '../components';

const [input, setInput] = useState("")
<TextField
  value={input}
  onChangeText={(value) => setInput(value)}
  status="error"
  label="Name"
  labelTx="login.nameLabel"
  labelTxOptions={{ name: "John" }}
  LabelTextProps={{ style: { color: "#FFFFFF" } }}
  placeholder="John Doe"
  placeholderTx="login.namePlaceholder"
  placeholderTxOptions={{ name: "John" }}
  helper="Enter your name"
  helperTx="login.nameHelper"
  helperTxOptions={{ name: "John" }}
  HelperTextProps={{ style: { color: "#FFFFFF" } }}
  style={{ backgroundColor: "#BFBFBF" }}
  containerStyle={{ backgroundColor: "#BFBFBF" }}
  inputWrapperStyle={{ backgroundColor: "#BFBFBF" }}
  RightAccessory={() => <Icon icon="check" />}
  LeftAccessory={() => <Icon icon="bell" />}
/>

```

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

### EmptyState with Content Translation Options

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/EmptyState.md

Shows how to provide options for content text translation.

```APIDOC
## EmptyState with Content Translation Options

### Description
This example demonstrates providing translation options for the content text when using the `contentTx` prop in the `EmptyState` component.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```tsx
<EmptyState
  heading="EmptyState Heading"
  contentTx="EmptyState:content"
  contentTxOptions={{ count: 2 }}
  button="EmptyState Button"
/>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### EmptyState Image Configuration

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/EmptyState.md

Setting the image source, styles, and additional image properties.

```tsx
<EmptyState
  imageSource={require("@assets/images/empty-state.png")}
  heading="EmptyState Heading"
  content="EmptyState Content"
/>
```

```tsx
<EmptyState
  imageSource={require("@assets/images/empty-state.png")}
  imageStyle={{ borderRadius: 5 }}
  heading="EmptyState Heading"
  content="EmptyState Content"
/>
```

```tsx
<EmptyState
  imageSource={require("@assets/images/empty-state.png")}
  ImageProps={{ onLoad: handleImageLoaded }}
  heading="EmptyState Heading"
  content="EmptyState Content"
/>
```

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

### EmptyState with Custom Heading

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/EmptyState.md

Demonstrates setting custom text for the heading.

```APIDOC
## EmptyState with Custom Heading

### Description
This example shows how to set the heading text for the `EmptyState` component using the `heading` prop.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```tsx
<EmptyState heading="EmptyState Heading" content="EmptyState Content" button="EmptyState Button" />
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Integrate Header with useHeader hook

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/Header.md

Use the convenience hook to abstract header configuration logic.

```tsx
function AccountScreen(props) {
  useHeader({
    title: "Hello",
  })

  return <Screen />
}
```

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

### Generate app icons

Source: https://github.com/infinitered/ignite/blob/master/docs/concept/Generators.md

Updates native project folders with resized and transformed app icons based on templates.

```bash
npx ignite-cli generate app-icon ios
```

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

### EmptyState with Custom Content

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/EmptyState.md

Demonstrates setting custom text for the content area.

```APIDOC
## EmptyState with Custom Content

### Description
This example shows how to set the content text for the `EmptyState` component using the `content` prop.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```tsx
<EmptyState heading="EmptyState Heading" content="EmptyState Content" button="EmptyState Button" />
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### EmptyState Preset Configuration

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/EmptyState.md

Configuring the component using the generic preset.

```tsx
<EmptyState preset="generic" heading="EmptyState Heading" content="EmptyState Content" />
```

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

### Generate Custom Component

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/Components.md

Use the Ignite CLI to generate a new custom component. This command creates a component file in the `components` directory, allowing for custom UI elements.

```bash
npx ignite-cli generate component MyCustomButton
```

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

### Ignite CLI New Command

Source: https://github.com/infinitered/ignite/blob/master/docs/cli/Ignite-CLI.md

Command to scaffold a new Ignite project.

```APIDOC
## CLI Command: ignite-cli new [ProjectName]

### Description
Starts the interactive prompt for generating a new Ignite project.

### Options
- **--bundle** (string) - Custom bundle identifier
- **--debug** (flag) - Enable verbose logging
- **--git** (flag) - Initialize a new git repository
- **--installDeps** (flag) - Run package install script
- **--overwrite** (flag) - Overwrite target directory
- **--targetPath** (string) - Specify target directory
- **--removeDemo** (flag) - Remove boilerplate demo code
- **--useCache** (flag) - Use dependency cache
- **--no-timeout** (flag) - Disable timeout protection
- **--yes** (flag) - Accept all defaults
- **--workflow** (string) - 'cng' or 'manual'
- **--experimental** (string) - Comma separated experimental features (e.g., expo-router, expo-canary, expo-beta)
```

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

### EmptyState with Heading Translation Key

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/EmptyState.md

Illustrates using a translation key for the heading text.

```APIDOC
## EmptyState with Heading Translation Key

### Description
This example demonstrates using a translation key for the heading text of the `EmptyState` component via the `headingTx` prop.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```tsx
<EmptyState
  headingTx="EmptyState:heading"
  content="EmptyState Content"
  button="EmptyState Button"
/>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Generate splash screen

Source: https://github.com/infinitered/ignite/blob/master/docs/concept/Generators.md

Generates a splash screen with a specified background color. Requires a logo.png file in the templates folder.

```bash
npx ignite-cli generate splash-screen FF0000
// or
npx ignite-cli generate splash-screen "#FF0000"
// or
npx ignite-cli generate splash-screen fff
```

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

### EmptyState with Heading Translation Options

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/EmptyState.md

Shows how to provide options for heading text translation.

```APIDOC
## EmptyState with Heading Translation Options

### Description
This example demonstrates providing translation options for the heading text when using the `headingTx` prop in the `EmptyState` component.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```tsx
<EmptyState
  headingTx="EmptyState:heading"
  headingTxOptions={{ count: 2 }}
  content="EmptyState Content"
  button="EmptyState Button"
/>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Implement TextField accessories

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/TextField.md

Use RightAccessory or LeftAccessory to render custom components like icons. It is recommended to use useMemo to prevent unnecessary re-renders.

```tsx
<TextField
  value={input}
  onChangeText={(value) => setInput(value)}
  RightAccessory={(props) => (
    // props has `multiline`, `status`, `disabled`, and `style` attributes
    {disabled, status} = props

    if (!!disabled) return <Icon icon="lock" color="gray" />
    if (status === 'error') return <Icon icon="x" color="red" />

    return <Icon icon="check" color="green" />
  )}
/>
```

```tsx
const PasswordRightAccessory = useMemo(
  () =>
    function PasswordRightAccessory(props: TextFieldAccessoryProps) {
      return (
        <Icon
          icon={isAuthPasswordHidden ? "view" : "hidden"}
          color={colors.palette.neutral800}
          containerStyle={props.style}
          onPress={() => setIsAuthPasswordHidden(!isAuthPasswordHidden)}
        />
      )
    },
  [isAuthPasswordHidden],
)
```

```tsx
<TextField
  value={password}
  onChangeText={(value) => setPassword(password)}
  RightAccessory={PasswordRightAccessory}
/>
```

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

### Test local Ignite CLI changes

Source: https://github.com/infinitered/ignite/blob/master/docs/contributing/Contributing-To-Ignite.md

Use these commands to run the Ignite CLI from a local repository clone for testing purposes.

```sh
# Generate a new Ignite app from your local copy of the Ignite CLI
node your-ignite-repo-clone/bin/ignite new PizzaApp

# Use a built-in generator from your local copy
node your-ignite-repo-clone/bin/ignite generate component OrderButton
```

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

### Card Component with All Props

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/Card.md

Demonstrates the usage of the Card component with various props including preset, alignment, side components, and styling for heading, content, and footer.

```tsx
<Card
  preset="reversed"
  verticalAlignment="space-between"
  LeftComponent={<Text>Left</Text>}
  RightComponent={<Text>Right</Text>}
  heading="Card Heading"
  headingStyle={{ color: "#a511dc" }}
  HeadingTextProps={{ weight: "bold" }}
  content="Card Content"
  contentStyle={{ color: "#a511dc" }}
  ContentTextProps={{ weight: "light" }}
  footer="Card Footer"
  footerStyle={{ color: "#a511dc" }}
  FooterTextProps={{ weight: "medium" }}
/>
```

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

### EmptyState with Custom Image Styling

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/EmptyState.md

Illustrates applying custom styles to the image within the EmptyState.

```APIDOC
## EmptyState with Custom Image Styling

### Description
This example demonstrates how to apply custom styles to the image displayed in the `EmptyState` component using the `imageStyle` prop.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```tsx
<EmptyState
  imageSource={require("@assets/images/empty-state.png")}
  imageStyle={{ borderRadius: 5 }}
  heading="EmptyState Heading"
  content="EmptyState Content"
/>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Asset directory structure

Source: https://github.com/infinitered/ignite/blob/master/boilerplate/README.md

Visual representation of the recommended asset organization.

```tree
assets
├── icons
└── images
```

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

### EmptyState Heading Configuration

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/EmptyState.md

Setting heading text, translation keys, options, and styles.

```tsx
<EmptyState heading="EmptyState Heading" content="EmptyState Content" button="EmptyState Button" />
```

```tsx
<EmptyState
  headingTx="EmptyState:heading"
  content="EmptyState Content"
  button="EmptyState Button"
/>
```

```tsx
<EmptyState
  headingTx="EmptyState:heading"
  headingTxOptions={{ count: 2 }}
  content="EmptyState Content"
  button="EmptyState Button"
/>
```

```tsx
<EmptyState
  heading="EmptyState Heading"
  headingStyle={{ color: "red" }}
  content="EmptyState Content"
  button="EmptyState Button"
/>
```

```tsx
<EmptyState
  heading="EmptyState Heading"
  HeadingTextProps={{ size: "lg" }}
  content="EmptyState Content"
  button="EmptyState Button"
/>
```

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

### Publish package to npm

Source: https://github.com/infinitered/ignite/wiki/Ignite-Release-Process

Publish the generator or CLI package to the npm registry.

```bash
npm publish
```

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

### Generate splash screen with custom sizes

Source: https://github.com/infinitered/ignite/blob/master/docs/concept/Generators.md

Configures the splash screen background color and specific logo dimensions for iOS and Android.

```bash
npx ignite-cli generate splash-screen FF0000 --ios-size=150 --android-size=180
```

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

### EmptyState with Custom Content Style

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/EmptyState.md

Illustrates applying custom styles to the content text.

```APIDOC
## EmptyState with Custom Content Style

### Description
This example shows how to apply custom styles to the content text of the `EmptyState` component using the `contentStyle` prop.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```tsx
<EmptyState
  heading="EmptyState Heading"
  content="EmptyState Content"
  contentStyle={{ backgroundColor: colors.error, color: colors.palette.neutral100 }}
  button="EmptyState Button"
/>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Verify npm access

Source: https://github.com/infinitered/ignite/blob/master/docs/contributing/Releasing-Ignite.md

Check current npm identity and package authorization.

```bash
npm whoami
```

```bash
npm author list ignite-cli
```

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

### Report an issue

Source: https://github.com/infinitered/ignite/blob/master/docs/cli/Ignite-CLI.md

Opens a new GitHub issue prefilled with diagnostic information.

```bash
npx ignite-cli issue "Mac M1 install trouble"
```

```bash
npx ignite-cli i
```

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

### Configure EAS build profiles with inheritance

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/eas.json.md

Use the extends property to share settings between build profiles and reduce configuration duplication.

```json
"development": {
    "extends": "production",
    "distribution": "internal",
    "android": {
        "gradleCommand": ":app:assembleDebug"
    },
    "ios": {
        "buildConfiguration": "Debug",
        "simulator": true
    }
},
"development:device": {
    "extends": "development",
    "distribution": "internal",
    "ios": {
        "buildConfiguration": "Debug",
        "simulator": false
    }
},
"production": {}
```

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

### Configure package version for beta

Source: https://github.com/infinitered/ignite/blob/master/docs/contributing/Releasing-Ignite.md

Update the version field in package.json before publishing a beta release.

```json
{
  "name": "ignite-cli",
  "version": "9.5.0-beta.1",
  "description": "Infinite Red's hottest boilerplate for React Native.",
  "bin": {
    "ignite": "bin/ignite",
    "ignite-cli": "bin/ignite"
  }
  // ...
}
```

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

### Implement Dynamic Theming with useAppTheme

Source: https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/theme/Theming.md

Utilize the useAppTheme hook and ThemedStyle type to create styles that react to theme changes. Ensure the component is wrapped in a ThemeProvider.

```tsx
import { type ViewStyle, View } from 'react-native'
import { type ThemedStyle } from '@/theme/types'
import { ThemeProvider, useAppTheme } from '@/theme/context'

const $container: ThemedStyle<ViewStyle> = (theme) => ({
  flex: 1,
  backgroundColor: theme.colors.background,
  justifyContent: "center",
  alignItems: "center",
})
const $normalStyle: ViewStyle = {
  width: 100,
  height: 100,
}

// Then use in a component like so:
const Component = () => {
  const { themed } = useAppTheme()
  return (
    <View style={themed($container)}>
      <View style={$normalStyle}>
    </View>
  )
}

const App = () => {
  return (
    <ThemeProvider>
      <Component />
    </ThemeProvider>
  )
}
```