### New command example

Source: https://docs.infinite.red/ignite-cli/cli/Ignite-CLI

Starts the interactive prompt for generating a new Ignite project.

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

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

### Experimental flags examples

Source: https://docs.infinite.red/ignite-cli/cli/Ignite-CLI

Examples of using the --experimental flag with the new command.

```bash
--experimental=expo-router
```

```bash
--experimental=expo-router,expo-beta
```

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

### Install Google Font package

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/theme/typography.ts

Install the desired Google Font package using Expo's CLI.

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

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

### EmptyState full configuration

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/EmptyState

Example showing the usage of multiple props including presets, image configuration, and text styling.

```jsx
<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}  
/>
```

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

### Install EAS CLI globally

Source: https://docs.infinite.red/ignite-cli/QuickStart

Install the EAS CLI globally using npm. Required for building and publishing your Ignite app.

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

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

### Basic ListItem usage

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/ListItem

A simple example of rendering a ListItem with a custom height.

```jsx
<ListItem height={50} />
```

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

### Card preset prop example

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Card

Sets the preset container style of the card (border/background). Preconfigured values: default and reversed. Example uses reversed.

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

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

### Run the app on Android, iOS, or web

Source: https://docs.infinite.red/ignite-cli/QuickStart

Change to the project directory and start the app using pnpm. Choose one of the three commands depending on your target platform.

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

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

### Front matter destinationDir example

Source: https://docs.infinite.red/ignite-cli/concept/Generator-Templates

Shows how to set destinationDir in front matter to customize the output directory for a template.

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

```

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

### Troubleshooting commands for Ignite CLI

Source: https://docs.infinite.red/ignite-cli

A collection of commands to resolve environment, dependency, and Xcode configuration issues during project setup.

```bash
npm uninstall -g ignite-cli
node --version
nvm install --lts
sudo xcode-select --install
sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
open ./ios/<yourapp>.xcworkspace
npx ignite-cli@latest new PizzaApp --debug
```

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

### Create a new Ignite project with npx

Source: https://docs.infinite.red/ignite-cli/Guide

Run this command to start a new Ignite project. It will prompt for configuration options, or use --yes to accept defaults.

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

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

### Example template using props

Source: https://docs.infinite.red/ignite-cli/concept/Generator-Templates

Example EJS template that uses props.pascalCaseName to define a component type and function.

```ejs
type <%= props.pascalCaseName %>Props = { some: string }  
export function <%= props.pascalCaseName %>(props: <%= props.pascalCaseName %>Props) {  
  return <Text>{props.some} in a <%= props.pascalCaseName %> component!</Text>  
}  

```

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

### Basic TextField Usage

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/TextField

A comprehensive example showing the TextField component with various props including labels, helper text, accessories, and custom styles.

```jsx
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" />}  
/>
```

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

### Initialize a new React Native app with Ignite CLI

Source: https://docs.infinite.red/ignite-cli

Use these commands to start a new project. The first command provides interactive prompts for configuration, while the second uses recommended defaults.

```bash
# Get walked through the prompts for the different options to start your new app  
npx ignite-cli@latest new PizzaApp  
  
# Accept all the recommended defaults and get straight to coding!  
npx ignite-cli@latest new PizzaApp --yes
```

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

### Check global Ignite installation

Source: https://docs.infinite.red/ignite-cli/cli/Troubleshooting

Check if Ignite is installed globally and identify its installation location. The first command outputs CLI information, and the second shows where it is installed.

```bash
ignite --info          # Should output cli information  
where ignite           # identify where it's installed  

```

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

### Basic usage of useHeader

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/utils/useHeader.tsx

Example of using useHeader within a screen component to set header properties.

```typescript
function AccountScreen() {  
  useHeader({  
    rightTx: "common.logOut",  
    onRightPress: logout,  
  })  
  
  return <Screen />  
}  
```

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

### Programmatic Tab Navigation

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/navigators/Navigation

Example of navigating between tabs using the navigation API.

```javascript
// currently on the DemoShowroom tab, navigate to the DemoDebug tab  
navigation.navigate("DemoDebug")
```

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

### Card headingStyle prop example

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Card

Sets the style for the heading text.

```jsx
<Card  
  heading="Card Heading"  
  headingStyle={{ color: "red" }}  
  content="Card Content"  
  footer="Card Footer"  
/>  
```

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

### Card headingTxOptions prop example

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Card

Sets options for the translation key used by headingTx.

```jsx
<Card  
  headingTx="card:heading"  
  headingTxOptions={{ count: 2 }}  
  content="Card Content"  
  footer="Card Footer"  
/>  
```

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

### Card with all props

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Card

Example showing the Card component with all props used together: preset, verticalAlignment, LeftComponent, RightComponent, heading, headingStyle, HeadingTextProps, content, contentStyle, ContentTextProps, footer, footerStyle, FooterTextProps.

```jsx
<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" }}  
/>  
```

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

### Card contentTxOptions prop example

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Card

Sets options for the translation key used by contentTx.

```jsx
<Card  
  heading="Card Heading"  
  contentTx="card:content"  
  contentTxOptions={{ count: 2 }}  
  footer="Card Footer"  
/>  
```

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

### Front matter patch example

Source: https://docs.infinite.red/ignite-cli/concept/Generator-Templates

Shows how to use the patch front matter option to append an export line to an index file.

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

```

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

### Update version in package.json

Source: https://docs.infinite.red/ignite-cli/contributing/Releasing-Ignite

Example of updating the version in the root package.json for a beta release. Do not commit this change; reset it after publishing.

```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"  
  }  
  // ...  
}  
```

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

### Card headingTx prop example

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Card

Sets the heading text using a translation key.

```jsx
<Card headingTx="card:heading" content="Card Content" footer="Card Footer" />  
```

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

### Using spacing scale for margins

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/theme/spacing.ts

Example of using the spacing scale for margins. Imports the spacing object and applies spacing.small to the margin property.

```typescript
import { spacing } from "@/theme/spacing"  
  
$containerStyle = {  
  margin: spacing.small,  
}  

```

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

### Card heading prop example

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Card

Sets the heading text of the card.

```jsx
<Card heading="Card Heading" content="Card Content" footer="Card Footer" />  
```

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

### Card contentStyle prop example

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Card

Sets the style of the content text, shown with colors.error and colors.palette.neutral100.

```jsx
<Card  
  heading="Card Heading"  
  content="Card Content"  
  contentStyle={{ backgroundColor: colors.error, color: colors.palette.neutral100 }}  
  footer="Card Footer"  
/>  
```

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

### Card contentTx prop example

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Card

Sets the content text using a translation key.

```jsx
<Card heading="Card Heading" contentTx="card:content" footer="Card Footer" />  
```

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

### useAppTheme hook example with ThemedStyle and ThemeProvider

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/theme/Theming

Shows how to use the useAppTheme hook to create dynamically-themed styles. Defines a ThemedStyle for a container and a normal style, then uses them in a component wrapped by ThemeProvider. The themed() function applies the theme to the style.

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

```

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

### Unit Test with Jest

Source: https://docs.infinite.red/ignite-cli/concept/Testing

An example of a unit test using the Jest 'it' block and 'expect' matcher to verify the output of a utility function.

```javascript
it("given a date in the past, colorForDueDate() returns red", () => {  
  const input = colorForDueDate("2000-10-20")  
  expect(input).toBe("red")  
})  
```

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

### Props object properties

Source: https://docs.infinite.red/ignite-cli/concept/Generator-Templates

Lists the properties available on the props object in generator templates, with example values.

```javascript
props.filename       // string, the name of the file being generated (e.g. "UserModel.tsx")  
props.pascalCaseName // string, PascalCase version of the name that is passed in (e.g. "UserModel")  
props.camelCaseName  // string, camelCase version of the name (e.g. "userModel")  
props.kebabCaseName  // string, kebab-case version of the name (e.g. "user-model")  
props.subdirectory   // string, the subdirectory path to the file being generated (e.g. "my/sub/path/")  

```

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

### AutoImage with headers prop

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/AutoImage

Shows how to pass additional headers to the image request using the headers prop. Note: the example uses a colon instead of an equals sign for the headers prop, which is likely a typo.

```jsx
<AutoImage  
  source={{ uri: "https://pbs.twimg.com/profile_images/845384502067159040/pqF2RQ2q_400x400.jpg" }}  
  headers: {  
    Authorization: `Bearer abc123`,  
  }  
/>  
```

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

### Card verticalAlignment prop example

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Card

Sets vertical alignment of the card's content: top, center, space-between, or force-footer-bottom. force-footer-bottom behaves like top but forces footer to bottom.

```jsx
<Card  
  verticalAlignment="space-between"  
  heading="Card Heading"  
  content="Card Content"  
  footer="Card Footer"  
/>  
```

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

### Basic themed style with $ prefix

Source: https://docs.infinite.red/ignite-cli/concept/Styling

Shows the core styling pattern: a component uses useAppTheme() to get the themed function, applies it to a $container style that takes a theme parameter, and also uses a plain object style. The $ prefix indicates a style variable.

```typescript
import { View, type ViewStyle } from "react-native"  
import { useAppTheme } from "@/theme/context"  
  
const MyComponent = () => {  
  const { themed } = useAppTheme()  
  return (  
    <View style={themed($container)}>  
      <View style={$plainObjectStyle} />  
    </View>  
  )  
}  
  
const $container: ThemedStyle<ViewStyle> = (theme) => ({  
  flex: 1,  
  backgroundColor: theme.colors.background,  
  paddingHorizontal: theme.spacing.small,  
})  
  
const $plainObjectStyle: ViewStyle = {  
  marginBottom: 20,  
}  

```

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

### Define getUsers function using axios

Source: https://docs.infinite.red/ignite-cli/concept/Testing

Defines a function that fetches users from an API using axios. This is the code under test that will be mocked in the next example.

```javascript
import { View, Text } from "react-native"  
import axios from "axios"  
  
export const getUsers = () => axios.get("/users").then((res) => res.data)  
```

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

### Use useAppTheme hook in a component

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/theme/context.ts

Example of using useAppTheme to access themed, theme, and themeContext. Themed styles must be wrapped with themed() before passing to style. Direct theme color usage is shown, and themeContext outputs 'light' or 'dark'.

```tsx
import { View, type ViewStyle } from "react-native"  
import { useAppTheme } from "@/theme/context"  
  
const MyComponent = () => {  
  const {  
    // Any styles you create with the type ThemedStyle<T>  
    // must be wrapped with themed($styleName) before passing  
    // it along to the component's style property.  
    themed,  
    // This is the current theme object.  
    theme,  
    // themeContext is what theme you are actually using:  
    // "light" | "dark"  
    themeContext,  
  } = useAppTheme()  
  
  return (  
    <View style={themed($container)}>  
      <View style={$plainObjectStyle}>  
        {/* An Example of direct theme color usage in a component: */}  
        <View  
          style={{  
            backgroundColor: theme.colors.error,  
          }}  
        >  
          {/* This will output "light" or "dark" */}  
          <Text>{themeContext}</Text>  
        </View>  
      </View>  
    </View>  
  )  
}  
  
// This is an ignite ThemedStyle. It's just like a ViewStyle but  
// is wrapped with a function that will be called with a theme parameter.  
const $container: ThemedStyle<ViewStyle> = (theme) => ({  
  // You can access theme named colors:  
  backgroundColor: theme.colors.background,  
  // Accessing the color palette is not generally recommended.  
  color: theme.colors.palette.angry500,  
  // Spacing can be changed on a per-theme basis as well.  
  paddingHorizontal: theme.spacing.small,  
})  
  
// We haven't abandoned plain style objects as the preferred way  
// to style your components, but it can't use dynamic themes.  
const $plainObjectStyle: ViewStyle = {  
  marginBottom: 20,  
}  

```

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

### Create a new Ignite app

Source: https://docs.infinite.red/ignite-cli/QuickStart

Use the Ignite CLI to generate a new application named MyFirstApp with the --yes flag to accept defaults.

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

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

### Publish beta release

Source: https://docs.infinite.red/ignite-cli/contributing/Releasing-Ignite

Publishes the package with the @next tag. Using --tag=latest is equivalent to not providing a tag and publishes as the main version.

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

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

### AppNavigator Initialization

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/navigators/Navigation

Basic implementation of the AppNavigator component with state management props.

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

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

### List available generators

Source: https://docs.infinite.red/ignite-cli/concept/Generators

Run this command to see information about what generators are present.

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

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

### Using the api singleton to fetch episodes

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/services/api.ts

Import the api instance from '@/services/api' and call getEpisodes(). Check the response.kind for 'ok' to handle success, otherwise log the error with JSON.stringify(response).

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

```

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

### Generate a navigator

Source: https://docs.infinite.red/ignite-cli/concept/Generators

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

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

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

### Clean and build the CLI

Source: https://docs.infinite.red/ignite-cli/contributing/Releasing-Ignite

Cleans and builds the Ignite CLI from the root directory before a manual beta release.

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

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

### Configure property parameter

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/utils/useSafeAreaInsetsStyle.ts

Demonstrates using the second parameter to toggle between padding and margin prefixes.

```tsx
const $insetsPaddingStyle = useSafeAreaInsetsStyle(["bottom"], "padding")  
const $insetsMarginStyle = useSafeAreaInsetsStyle(["bottom"], "margin")  
  
console.log($insetsPaddingStyle) // { paddingBottom: 28 }  
console.log($insetsMarginStyle) // { marginBottom: 28 }
```

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

### Usage of semantic colors in TextField

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/theme/colors.ts

Example of applying a semantic color definition to a component's style property.

```tsx
<TextField style={{ borderColor: colors.border }} />  
```

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

### Card HeadingComponent prop example

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Card

Sets a custom component for the heading, here a Button with preset reversed and icon ladybug.

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

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

### Create a new Ignite app with Expo

Source: https://docs.infinite.red/ignite-cli/expo/Expo-and-Ignite

Commands to spin up a new Ignite app named PizzaApp, then run it on iOS and Android. Use this to quickly scaffold and launch a project.

```bash
# Spin up a new app  
npx ignite-cli new PizzaApp --yes  
cd PizzaApp  
pnpm run ios  
pnpm run android  
```

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

### Using a preset property on a component

Source: https://docs.infinite.red/ignite-cli/concept/Styling

Shows how to apply a preset to a component, here a View with preset="heading" and text prop.

```jsx
<View preset="heading" text="My Header" />  

```

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

### Card HeadingTextProps prop example

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Card

Passes additional props to the heading Text component, accepting any prop that Text accepts.

```jsx
<Card  
  heading="Card Heading"  
  HeadingTextProps={{ size: "lg" }}  
  content="Card Content"  
  footer="Card Footer"  
/>  
```

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

### Custom Icons

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Icon

How to create and use custom icons by adding images to assets/icons and registering them in the iconRegistry.

```APIDOC
## Custom Icons

### Description
To create a custom icon, add your icon image(s) to the `assets/icons/` directory and register them in the `iconRegistry` object in `app/components/Icon.tsx`.

### Steps
1. Add your icon image to `assets/icons/` (e.g., `my-custom-icon.png`).
2. In `app/components/Icon.tsx`, add an entry to `iconRegistry`:
```ts
export const iconRegistry = {
  // ...
  custom: require("./myCustomIcon.png"),
}
```
3. Use the custom icon by passing its name to the `icon` prop:
```jsx
<Icon icon="custom" />
```
```jsx
<PressableIcon icon="custom" onPress={() => Alert.alert("I'm a custom PressableIcon!")} />
```
```

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

### Custom icon directory structure

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Icon

Shows the directory structure for adding custom icon images.

```text
-- icon/  
  -- icons/  
    -- index.ts  
    -- my-custom-icon.png  
```

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

### Help command and alias

Source: https://docs.infinite.red/ignite-cli/cli/Ignite-CLI

The help command and its alias 'h' to list commands and descriptions.

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

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

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

### Basic Header usage with title, icons, and callbacks

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Header

Shows a full-featured Header with title, left/right icons, press handlers, and styling props.

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

```

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

### Switch with HelperTextProps size lg

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Switch

Applies a TextProps object to the helper text of a Switch component. The example sets the helper text size to 'lg'.

```jsx
<Switch value={value} onValueChange={setValue} HelperTextProps={{ size: "lg" }} />  

```

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

### Composing styles with spread

Source: https://docs.infinite.red/ignite-cli/concept/Styling

Demonstrates how to compose styles by spreading other style objects into a new one, allowing reuse of style definitions.

```typescript
const $bold: TextStyle = {  
  fontWeight: "bold",  
}  
const $larger: TextStyle = {  
  fontSize: 22,  
}  
const $title: TextStyle = {  
  ...$bold,  
  ...$larger,  
}  

```

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

### Card LeftComponent and RightComponent props example

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Card

Sets components aligned to left and right of the card body. This shows an AutoImage on the left and a Button on the right.

```jsx
<Card  
  LeftComponent={  
    <AutoImage  
      maxWidth={80}  
      maxHeight={60}  
      style={{ alignSelf: "center" }}  
      source={{  
        uri: "https://user-images.githubusercontent.com/1775841/184508739-f90d0ce5-7219-42fd-a91f-3382d016eae0.png",  
      }}  
    />  
  }  
  RightComponent={  
    <Button preset="default" text="Click It" onPress={() => Alert.alert("pressed")} />  
  }  
  heading="Card Heading"  
  content="Card Content"  
  footer="Card Footer"  
/>  
```

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

### Toggle theme with useAppTheme

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/theme/Theming

Demonstrates how to use setThemeContextOverride to toggle between light and dark modes or reset to the system default.

```typescript
// In your component:  
const {  
  setThemeContextOverride, // Function to set the theme  
  themeContext, // The current theme context ("light" | "darK")  
} = useAppTheme()  
  
// Then hook it up to a user interaction:  
const onThemeButtonPress = () => {  
  // This will toggle between light and dark mode.  
  setThemeContextOverride(themeContext === "dark" ? "light" : "dark")  
}  
  
// Or you can let them use their deice's system setting: light/dark  
const resetThemeContextOverride = () => {  
  setThemeContextOverride(undefined)  
}
```

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

### Uninstall global ignite-cli

Source: https://docs.infinite.red/ignite-cli/cli/Troubleshooting

Uninstall a previous global install of Ignite CLI using npm, yarn, or pnpm. Choose the command that matches your package manager.

```bash
npm uninstall --global ignite-cli  
# or  
yarn global remove ignite-cli  
#or  
pnpm remove ignite-cli -g  

```

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

### Remove block with // @demo remove-block-start and // @demo remove-block-end

Source: https://docs.infinite.red/ignite-cli/cli/Remove-Demo-Code

Use these markers to remove the entire block of code contained between the start and end comments.

```typescript
// @demo remove-block-start  
export function DemoDivider(props: DemoDividerProps) {  
  const { type = "horizontal", size = 10, style: $styleOverride } = props  
  
  return (  
    <View  
      style={[  
        $divider,  
        type === "horizontal" && { height: size },  
        type === "vertical" && { width: size },  
        $styleOverride,  
      ]}  
    />  
  )  
}  
// @demo remove-block-end  
```

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

### Custom preset definitions in Button.tsx

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Button

Shows how to define custom presets by adding keys to the $viewPresets, $textPresets, $pressedViewPresets, and $pressedTextPresets objects in app/components/Button.tsx.

```tsx
const $viewPresets = {  
  // ...  
  danger: [$baseViewStyle, { backgroundColor: colors.palette.angry500 }] as StyleProp<ViewStyle>,  
}  
  
const $textPresets: Record<Presets, StyleProp<TextStyle>> = {  
  // ...  
  danger: [$baseTextStyle, { color: colors.palette.angry500 }] as StyleProp<TextStyle>,  
}  
  
const $pressedViewPresets: Record<Presets, StyleProp<ViewStyle>> = {  
  // ...  
  danger: { backgroundColor: colors.palette.angry500 },  
}  
  
const $pressedTextPresets: Record<Presets, StyleProp<TextStyle>> = {  
  angry: { opacity: 0.7 },  
}  

```

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

### Set placeholder prop

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/TextField

Sets the placeholder text directly using the placeholder string prop.

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

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

### Using footerTx

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Card

Sets the footer text using a translation key.

```jsx
<Card heading="Card Heading" content="Card Content" footerTx="card:footer" />  
```

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

### Generate a screen

Source: https://docs.infinite.red/ignite-cli/concept/Generators

Generates a 'hooks enabled' screen.

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

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

### Ignite boilerplate folder structure

Source: https://docs.infinite.red/ignite-cli/boilerplate

Shows the directory tree of a new Ignite project, including the app, android, ios, test, and ignite folders, as well as key files like app.tsx, app.config.ts, and index.tsx.

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

```

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

### Radio onValueChange prop

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Radio

Sets the onValueChange callback. Default is undefined. Since the toggle is controlled, you must set the value prop in this callback to update the toggle. Note the example has a duplicate onValueChange prop.

```jsx
<Radio value={value} onValueChange={setValue} onValueChange={setValue} />  
```

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

### Wrap app with ThemeProvider

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/theme/context.ts

Use ThemeProvider at the root of your application, typically in App.tsx, to provide theme context to all children. Any component needing useAppTheme must be a child of this provider.

```tsx
import { ThemeProvider } from "@/theme/context"  
  
const App = () => {  
  return <ThemeProvider>{/* Your app components go here */}</ThemeProvider>  
}  

```

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

### Using footerTxOptions

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Card

Sets options for the translation key used by footerTx.

```jsx
<Card  
  heading="Card Heading"  
  content="Card Content"  
  footerTx="card:footer"  
  footerTxOptions={{ count: 2 }}  
/>  
```

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

### Implement theme switch component

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/theme/Theming

Shows how to integrate the theme override functionality with a Toggle component.

```typescript
// In your component:  
const {  
  setThemeContextOverride, // Function to set the theme  
  themeContext, // The current theme context ("light" | "darK")  
} = useAppTheme()  
  
// Then implement the switching button:  
<Toggle  
  label="Dark Mode"  
  variant="switch"  
  value={themeContext === "dark"}  
  onValueChange={(value: boolean) =>  
    setThemeContextOverride(value ? "dark" : "light")}  
/>
```

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

### Optimize accessory with useMemo

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/TextField

Uses useMemo to prevent flickering of accessories during input value changes.

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

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

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

### Cache subcommands

Source: https://docs.infinite.red/ignite-cli/cli/Ignite-CLI

Subcommands for the cache command: help, path, and clear.

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

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

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

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

### Generate splash screen with custom sizes

Source: https://docs.infinite.red/ignite-cli/concept/Generators

Use the --ios-size and --android-size flags to override the default logo transformation sizes.

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

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

### EmptyState heading prop

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/EmptyState

Sets the heading text.

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

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

### Defining presets with ThemedStyleArray

Source: https://docs.infinite.red/ignite-cli/concept/Styling

Shows how presets are defined in a component file, using a Record of preset names to arrays of themed styles.

```typescript
type Presets = "default" | "bold" | "heading" | "subheading"  
const $presets: Record<Presets, ThemedStyleArray<TextStyle>> = {  
  default: [$baseStyle],  
  bold: [$baseStyle, $fontWeightStyles.bold],  
  heading: [$baseStyle, $sizeStyles.xxl, $fontWeightStyles.bold],  
  subheading: [$baseStyle, $sizeStyles.lg, $fontWeightStyles.medium],  
}  

```

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

### Clean prebuild for native dependencies

Source: https://docs.infinite.red/ignite-cli/concept/Upgrades

Use this command to regenerate native code if you have added dependencies outside the Expo ecosystem.

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

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

### Check npm package access

Source: https://docs.infinite.red/ignite-cli/contributing/Releasing-Ignite

Lists npm users with access to the ignite-cli package. If your name is not listed, you need to be added to the Infinite Red team.

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

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

### Generate a component

Source: https://docs.infinite.red/ignite-cli/concept/Generators

Creates a component/function. This is the generator you will be using most often.

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

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

### Using the destructive preset on a Button

Source: https://docs.infinite.red/ignite-cli/concept/Styling

Shows how to apply the destructive preset to a Button component with a text and onPress handler.

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

```

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

### Build local Android and iOS binaries

Source: https://docs.infinite.red/ignite-cli/QuickStart

Run local EAS builds to generate AAB (Android) or IPA (iOS) binaries for store submission. Follow terminal instructions after running.

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

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

### Configuring headerProps

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/utils/useHeader.tsx

Demonstrates passing headerProps directly to the Header component.

```typescript
useHeader({  
  rightTx: "common.logOut",  
  leftTx: "common.back",  
  onRightPress: logout,  
  onLeftPress: goBack,  
})  
```

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

### Use the `preset` prop to apply a preset style

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Text

Applies a preset style from the available presets, and can be overridden with the `style` prop.

```tsx
<Text preset="bold" text="This is bold" />  
```

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

### Generate Custom Component via CLI

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components

Command to generate a new custom component using the Ignite CLI, which creates the necessary files in the components directory.

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

```text
-- app  
  -- components  
    -- MyCustomButton.tsx
```

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

### Test local Ignite CLI changes

Source: https://docs.infinite.red/ignite-cli/contributing/Contributing-To-Ignite

Use the bin/ignite script from a local clone to generate new apps or run generators without publishing to NPM.

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

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

### Check npm username

Source: https://docs.infinite.red/ignite-cli/contributing/Releasing-Ignite

Checks your npm username to verify access to the ignite-cli package for manual beta releases.

```bash
npm whoami  
```

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

### Run Maestro test flow

Source: https://docs.infinite.red/ignite-cli/boilerplate/maestro

Command to run a Maestro test file. Replace MyTestFile.yaml with the actual test file name.

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

```

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

### Upgrade Expo dependencies

Source: https://docs.infinite.red/ignite-cli/concept/Upgrades

Run these commands to update Expo to the latest version and fix dependency issues.

```bash
npx expo install expo@latest  
npx expo install --fix  
```

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

### Use `txOptions` for interpolation with an i18n JSON file

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Text

Passes options to i18n for interpolating `{{variableName}}` placeholders defined in `app/i18n/*.json` files into the translated text.

```json
// in en.json
profile: {
  details: "{{name}} who is {{age}} years old"
}
```

```tsx
// in your component
<Text
  tx="profile:details"
  txOptions={{
    name: "Jamon",
    age: 40,
  }}
/>
```

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

### Add custom Reactotron command

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/devtools

Use reactotron.onCustomCommand to register custom debugging tools within ReactotronConfig.ts.

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

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

### Run remove-demo command

Source: https://docs.infinite.red/ignite-cli/cli/Remove-Demo-Code

Execute the command to strip demo code from the project. Use the --dry-run flag to preview changes without modifying files.

```bash
npx ignite-cli remove-demo
```

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

### Memoize LeftAccessory with useMemo

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Button

Memoize the LeftAccessory with useMemo to prevent flickering when props or state change. The accessory function receives ButtonAccessoryProps and uses pressableState.pressed to toggle the icon.

```tsx
<Button  
  LeftAccessory={useMemo(  
    () =>  
      function LeftIcon(props: ButtonAccessoryProps) {  
        return <Icon icon={props.pressableState.pressed ? "view" : "hidden"} />  
      },  
    [],  
  )}  
/>  

```

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

### Run Maestro tests via npm script

Source: https://docs.infinite.red/ignite-cli/boilerplate/maestro

Command to run Maestro tests using the npm script defined in package.json.

```bash
pnpm run test:maestro  

```

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

### Generate command and alias

Source: https://docs.infinite.red/ignite-cli/cli/Ignite-CLI

The generate command and its alias 'g' for scaffolding components and screens.

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

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

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

### Use button prop

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/EmptyState

Set the button text of the EmptyState using the button prop.

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

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

### EmptyState preset prop

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/EmptyState

Sets the container style preset. Currently, only 'generic' is available.

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

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

### EmptyState headingTxOptions prop

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/EmptyState

Sets options for the translation key used in headingTx.

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

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

### Using deps for dynamic headers

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/utils/useHeader.tsx

Shows how to use the deps parameter to trigger header updates based on state changes.

```typescript
const [count, setCount] = useState(1)  
  
useEffect(() => {  
  setTimeout(() => setCount(count + 1), 1000)  
}, [count])  
  
useHeader(  
  {  
    title: `Count: ${count}`,  
  },  
  [count],  
)  
```

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

### Use buttonTx prop

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/EmptyState

Set the button text of the EmptyState using a translation key.

```jsx
<EmptyState  
  heading="EmptyState Heading"  
  content="EmptyState Content"  
  buttonTx="EmptyState:button"  
/>  
```

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

### Integrating react-native-elements with ThemedRNEUIProvider

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/theme/Theming

Create a custom provider that uses useAppTheme to toggle between light and dark color palettes for react-native-elements components.

```javascript
import { colorsDark, colorsLight } from "@/theme/colors"  
import { customFontsToLoad } from "@/theme/typography"  
import { createTheme as createRNEUITheme, ThemeProvider as RNEUIThemeProvider } from "@rneui/themed"  
  
export const ThemedRNEUIProvider = ({ children }) => {  
  const { themeContext } = useAppTheme()  
  const themeColors = themeContext === "light" ? colorsLight : colorsDark  
  const RNEUITheme = createRNEUITheme({  
    mode: themeContext,  
    lightColors: {  
      primary: colorsLight.palette.secondary500,  
    },  
    darkColors: {  
      primary: colorsDark.palette.secondary500,  
    },  
    components: {  
      Text: {  
        style: {  
          color: themeColors.text,  
        },  
      },  
      // ...etc  
    },  
  })  
  
  return <RNEUIThemeProvider theme={RNEUITheme}>{children}</RNEUIThemeProvider>  
}
```

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

### Create a mock callback function with jest.fn

Source: https://docs.infinite.red/ignite-cli/concept/Testing

Creates a mock function that adds 42 to its input. The mock function can be called like a normal function and has a .mock property for assertions.

```javascript
// take the input value, and add 42  
const mockCallback = jest.fn((x) => 42 + x)  
```

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

### Configure Header in Stack.Screen

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Header

Define the Header specifically for an individual screen within the Stack.Navigator.

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

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

### Doctor sample output

Source: https://docs.infinite.red/ignite-cli/cli/Ignite-CLI

Sample output from the doctor command showing system, JavaScript, Ignite, Android, iOS, and tools information.

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


```

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

### EmptyState headingStyle prop

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/EmptyState

Sets the style of the heading text.

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

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

### themed() usage with plain styles, ThemedStyle, and arrays

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/theme/context.ts

Shows how to use themed() with a plain style object, a ThemedStyle function, and arrays of styles. The last style in an array overrides previous properties, so the final View is yellow. Passing Animated styles to themed() is not supported.

```tsx
const $plainStyle: ViewStyle = {  
  padding: 10,  
  backgroundColor: "black",  
  width: 25,  
  height: 25,  
}  
  
const $themedStyle: ThemedStyle<ViewStyle> = (theme) => ({  
  backgroundColor: theme.colors.errorBackground,  
  height: theme.spacing.xl,  
  width: theme.spacing.xl  
})  
  
<View style={$plainStyle} />  
// <View style={$themedStyle} /> // This won't work  
<View style={themed($themedStyle)} />  
// <View style={themed($plainStyle)} /> // You can, but why would you?  
<View style={themed([$themedStyle, $plainStyle])} />  
<View style={themed([  
  $themedStyle,  
  $plainStyle,  
  // A plain style object  
  { width: 7, backgroundColor: 'yellow'}  
])} />  

```

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

### Cache command and alias

Source: https://docs.infinite.red/ignite-cli/cli/Ignite-CLI

The cache command and its alias 'c' for interacting with the dependency cache.

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

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

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

### Use buttonTxOptions prop

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/EmptyState

Set options for the translation key used by the buttonTx prop.

```jsx
<EmptyState  
  heading="EmptyState Heading"  
  content="EmptyState Content"  
  buttonTx="EmptyState:button"  
  buttonTxOptions={{ count: 2 }}  
/>  
```

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

### Use the `text` prop to display static text

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Text

Sets the text of the component directly as a string. The source encourages using `tx` instead for internationalization.

```tsx
<Text text="My Text" />  
```

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

### Basic Screen usage with scroll preset

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Screen

Wrap your screen content with the Screen component. The preset prop defaults to 'scroll' if not set.

```tsx
<Screen preset="scroll">{/* ... content here ... */}</Screen>  
```

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

### EmptyState contentTxOptions prop

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/EmptyState

Sets options for the translation key used in contentTx.

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

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

### Using footerStyle

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Card

Sets the style of the footer text.

```jsx
<Card  
  heading="Card Heading"  
  content="Card Content"  
  footer="Card Footer"  
  footerStyle={{ color: "red" }}  
/>  
```

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

### EmptyState contentStyle prop

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/EmptyState

Sets the style of the content text.

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

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

### Configure Header in Stack.Navigator

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Header

Define the Header globally within the Stack.Navigator screenOptions for consistent behavior across screens.

```javascript
<Stack.Navigator  
  screenOptions={{  
    header: (props) => <Header title={props.options.headerTitle ?? props.route.name} />,  
  }}  
/>  
```

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

### Configure safeAreaEdges parameter

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/utils/useSafeAreaInsetsStyle.ts

Shows how to specify which edges should be safe-area-aware using the first parameter.

```tsx
const $insetsStyle = useSafeAreaInsetsStyle(["top", "left"])  
  
console.log($insetsStyle) // { paddingTop: 47, paddingStart: 0 }
```

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

### Use the `size` prop to set font size

Source: https://docs.infinite.red/ignite-cli/boilerplate/app/components/Text

Sets the font size using options defined as `$sizeStyles` in `app/components/Text.tsx`.

```tsx
<Text tx="welcome:title" size="lg" />  
```

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

### Generate splash screen with background color

Source: https://docs.infinite.red/ignite-cli/concept/Generators

Run the generator with a hex color code to create splash screens. The color can be provided with or without quotes and the hash symbol.

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