Ignite CLI

https://docs.infinite.red/ignite-cli/
Admin
Ignite CLI is a React Native and Expo boilerplate and developer tool by Infinite Red for building...
Tokens:56,407
Snippets:800
Trust Score:9.5
Update:1 month ago
Show doc for...
Tokens:
Raw
### 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 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"  
/>  
```

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

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

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

### 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`,  
  }  
/>  
```

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

### 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,  
}  

```

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

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

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

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

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

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

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

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

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

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

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

### 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/")  

```

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

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

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

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

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

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

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

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

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

### 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"} />  
      },  
    [],  
  )}  
/>  

```
Tokens:
Raw