ignite Documentation

File: README.md Copy Chapter

Ignite - the battle-tested React Native boilerplate

Proven React Native boilerplate Copy Chapter

Developed and maintained consistently since 2016, Ignite is the oldest active and most popular third-party React Native / Expo app boilerplate.

This is the React Native starting point that the Infinite Red team uses on a day-to-day basis to build client apps. Developers who use Ignite report that it saves them two to four weeks of time on average off the beginning of their React Native project!

Intro Videos Copy Chapter

Here are a few videos / talks that introduce Ignite and show off some of its features. Check them out!

[Full Documentation](https://github.com/infinitered/ignite/blob/master/docs/README.md) Copy Chapter

We've put great effort into the documentation as a team, please read through it here. If you're unsure why a certain decision was made related to this boilerplate or how to proceed with a particular feature, it's likely documented. If it still isn't clear, go through the proper help channels and we always welcome PRs to improve the docs!

Tech Stack Copy Chapter

Nothing makes it into Ignite unless it's been proven on projects that Infinite Red works on. Ignite apps include the following rock-solid technical decisions out of the box:

Ignite also comes with a component library that is tuned for custom designs, theming support, testing, custom fonts, generators, and much, much more.

Quick Start Copy Chapter

Prerequisites:

• You'll need at least a recent version of Node to run the CLI
• For compiling/running in a simulator, make sure you're set up for React Native by following the official documentation.

The Ignite CLI will walk you through the steps to ignite a new React Native app:

# 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

Once you're up and running, check out our Getting Started Guide.

If you'd like to follow a tutorial, check out this one from Robin Heinze.

Troubleshooting Copy Section

The above commands may fail with various errors, depending on your operating system and dependency versions. Some troubleshooting steps to follow:

• Uninstall global versions of the Ignite CLI via npm uninstall -g ignite-cli and use the CLI via npx ignite-cli
• Make sure you are using a reasonably recent version of Node. This can be checked via the node --version command. If you require multiple Node versions on your system, install nvm, and then run nvm install --lts. At the time of writing, Node LTS is v20.x.x.
• If the installation fails because of an Xcode error (missing Xcode command line tools), the easiest way to install them is to run sudo xcode-select --install in your terminal.
• If Xcode and command line tools are already installed, but the installation complains about missing patch dependencies, you may need to switch the Xcode location to something else: sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
• Opening the project in Xcode can give you other insights into what's happening: open ./ios/<yourapp>.xcworkspace
• Add the --debug switch to the Ignite CLI new command to provide additional output during project initialization

Reporting Bugs / Getting Help Copy Chapter

If you run into problems, first search the issues and discussions in this repository. If you don't find anything, you can come talk to our friendly and active developers in the Infinite Red Community Slack (community.infinite.red).

If you still need help after reaching out to the proper channels, feel free to open a new GitHub issue via npx ignite-cli issue "Unable to Ignite new app" (as an example). This will help start writing your issue with the correct diagnostic information included.

Contributing to Ignite Copy Chapter

Want to contribute to Ignite? Check out the contributing guide for more info on how to work with the codebase.

Need Inspiration? Copy Chapter

If you need battle-tested solutions from Infinite Red experts on everything from Accessibility, to CI/CD configuration, head to Ignite Cookbook for code snippets from our team and the community!

No time to learn React Native? Hire Infinite Red for your next project Copy Chapter

We get it – sometimes there just isn’t enough time on a project to learn the ins and outs of a new framework. Infinite Red’s here to help! Our experienced team of React Native engineers have worked with companies like Microsoft, GasBuddy, Zoom, and Mercari to bring some of the most complex React Native projects to life.

Whether it’s running a full project or training a team on React Native, we can help you solve your company’s toughest engineering challenges – and make it a great experience at the same time.

Ready to see how we can work together? Send us a message

Further Reading Copy Chapter

• Watch Jamon Holmgren's talk at React Live Amsterdam 2019 where he uses Ignite to build an app in less than 30 minutes: https://www.youtube.com/watch?v=OgiFKMd_TeY
• Prior art includes Ignite Andross and Ignite Bowser (which is very similar to the current version of Ignite).
• Who are We? - Learn More About Infinite Red, the top React Native app development company

License and Trademark Notice Copy Chapter

This project's source code is licensed under the MIT License. The Ignite name, its logo, and any other brand assets associated with Ignite and Infinite Red are the exclusive property of Infinite Red, Inc. These marks are not covered by the MIT License provided herein and may not be used without explicit written permission from Infinite Red, Inc.

Note on Generated Code Copy Section

The MIT License applies solely to the source code of the Ignite CLI and the source code of the included boilerplate project. Any source code generated by using the Ignite CLI, not including trademark assets described above, is owned entirely by the individual or entity that generated it.

However, some files may be added or installed automatically as part of the generation process (e.g. through npm packages). These files are subject to their own licenses, which may include more restrictive terms. It is your responsibility to review and comply with the licenses of any third-party dependencies included in the generated project.

File: boilerplate/README.md Copy Chapter

Welcome to your new ignited app!

The latest and greatest boilerplate for Infinite Red opinions

This is the boilerplate that Infinite Red uses as a way to test bleeding-edge changes to our React Native stack.

• Quick start documentation
• Full documentation

Getting Started Copy Chapter

pnpm run
pnpm run start

To make things work on your local simulator, or on your phone, you need first to run eas build. We have many shortcuts on package.json to make it easier:

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

`./assets` Copy Section

This directory is designed to organize and store various assets, making it easy for you to manage and use them in your application. The assets are further categorized into subdirectories, including icons and images:

assets
├── icons
└── images

icons
This is where your icon assets will live. These icons can be used for buttons, navigation elements, or any other UI components. The recommended format for icons is PNG, but other formats can be used as well.

Ignite comes with a built-in Icon component. You can find detailed usage instructions in the docs.

images
This is where your images will live, such as background images, logos, or any other graphics. You can use various formats such as PNG, JPEG, or GIF for your images.

Another valuable built-in component within Ignite is the AutoImage component. You can find detailed usage instructions in the docs.

How to use your icon or image assets:

import { Image } from 'react-native';

const MyComponent = () => {
  return (
    
  );
};

Running Maestro end-to-end tests Copy Chapter

Follow our Maestro Setup recipe.

Next Steps Copy Chapter

Ignite Cookbook Copy Section

Ignite Cookbook is an easy way for developers to browse and share code snippets (or “recipes”) that actually work.

Upgrade Ignite boilerplate Copy Section

Read our Upgrade Guide to learn how to upgrade your Ignite project.

Community Copy Chapter

⭐️ Help us out by starring on GitHub, filing bug reports in issues or ask questions.

💬 Join us on Slack to discuss.

📰 Make our Editor-in-chief happy by reading the React Native Newsletter.

File: docs/boilerplate/app/components/_toggle_props.mdx Copy Chapter

import CodeBlock from "@theme/CodeBlock"

Toggle Props Copy Chapter

{\<${props.componentName} value={value} onValueChange={setValue} />}

`status` Copy Section

The status prop is used to determine the interactability or style of the toggle. It can be set to disabled or error. It is null by default.

When set to error, elements of the toggle will have their colors set to colors.errorBackground or colors.error.

{\<${props.componentName} value={value} onValueChange={setValue} status="disabled" />}

`editable` Copy Section

The editable prop determines whether the toggle is interactable. It is true by default. Setting the status prop to disabled also will set editable to false.

{\<${props.componentName} value={value} onValueChange={setValue} editable={false} />}

`value` Copy Section

The value prop determines whether the toggle is on or off. It is false by default.

{\<${props.componentName} value={value} onValueChange={setValue} value={true} />}

`onValueChange` Copy Section

The onValueChange prop is a callback that is called when the toggle is toggled. It is undefined by default. Since the toggle is controlled, you must set the value prop in this callback to update the toggle.

{\<${props.componentName} value={value} onValueChange={setValue} onValueChange={setValue} />}

`containerStyle` Copy Section

The containerStyle prop is a style object that is applied to the container of the toggle.

{\<${props.componentName} value={value} onValueChange={setValue} containerStyle={{ backgroundColor: "#fff" }} />}

`inputOuterStyle` Copy Section

The inputOuterStyle prop is a style object that is applied to the outer container of the toggle input. This gives the inputs their size, shape, "off" background-color, and outer border.

{\<${props.componentName} value={value} onValueChange={setValue} inputOuterStyle={{ backgroundColor: "#fff" }} />}

`inputInnerStyle` Copy Section

The inputInnerStyle prop is a style object that is applied to the inner container of the toggle input. This gives the inputs their "on" background-color and inner border.

{\<${props.componentName} value={value} onValueChange={setValue} inputInnerStyle={{ backgroundColor: "#000" }} />}

`inputDetailStyle` Copy Section

The inputDetailStyle prop is a style object that is applied to the detail container of the toggle input. For checkbox, this affects the Image component. For radio, this affects the dot View. For switch, this affects the knob View.

{\<${props.componentName} value={value} onValueChange={setValue} inputDetailStyle={{ backgroundColor: "#000" }} />}

`labelPosition` Copy Section

The labelPosition prop determines the position of the label relative to the action component. It can be left or right. It is right by default.

{\<${props.componentName} value={value} onValueChange={setValue} labelPosition="left" />}

`label` Copy Section

The label prop is a string that is used as the label for the toggle.

{\<${props.componentName} value={value} onValueChange={setValue} label="Remember Me" />}

`labelTx` Copy Section

The labelTx prop is a key to a string in the i18n translation file. It is used as the label for the toggle.

{\<${props.componentName} value={value} onValueChange={setValue} labelTx="login:rememberUsername" />}

`labelTxOptions` Copy Section

The labelTxOptions prop is an object that is passed to the i18n translation function. It is used to pass in values to the translation string.

`labelStyle` Copy Section

The labelStyle prop is a StyleProp<TextStyle> object that is applied to the label.

{\<${props.componentName} value={value} onValueChange={setValue} labelStyle={{ color: "#000" }} />}

`LabelTextProps` Copy Section

The LabelTextProps prop is a TextProps object (from the Text) component that is applied to the label.

{\<${props.componentName} value={value} onValueChange={setValue} LabelTextProps={{ size: "lg" }} />}

`helper` Copy Section

The helper prop is a string that is used as the helper for the toggle.

{\<${props.componentName} value={value} onValueChange={setValue} helper="Remember Me" />}

`helperTx` Copy Section

The helperTx prop is a key to a string in the i18n translation file. It is used as the helper for the toggle.

{\<${props.componentName} value={value} onValueChange={setValue} helperTx="login:rememberUsername" />}

`helperTxOptions` Copy Section

The helperTxOptions prop is an object that is passed to the i18n translation function. It is used to pass in values to the translation string.

`HelperTextProps` Copy Section

The HelperTextProps prop is a TextProps object (from the Text) component that is applied to the helper.

{\<${props.componentName} value={value} onValueChange={setValue} HelperTextProps={{ size: "lg" }} />}

File: docs/boilerplate/app/components/AutoImage.md Copy Chapter

sidebar_position: 30 Copy Chapter

AutoImage

Ignite's AutoImage Component is an enhanced version of the built-in React Native Image component. It automatically resizes the image view to fit a max width or height constraint

<AutoImage
  source={{ uri: "https://pbs.twimg.com/profile_images/845384502067159040/pqF2RQ2q_400x400.jpg" }}
  maxWidth={200}
/>

AutoImage uses a useAutoImage hook to calculate the image's dimensions when you have a specific values you need to constrain the image within. This hook is also available for use in your own components.

const { width, height } = useAutoImage(uri, maxWidth, maxHeight)

Props Copy Chapter

Ignite's AutoImage component has these props of its own:

`maxWidth` and `maxHeight` Copy Section

These props are used to constrain the image to a specific size. Use maxWidth or maxHeight to set the maximum width or height of the image, and it will resize to whichever dimension you specify without skewing the aspect ratio. e.g. If the image is 300w x 200h, and you set maxWidth={200}, the image will be resized to 200w x 133h.

<AutoImage
  source={{ uri: "https://pbs.twimg.com/profile_images/845384502067159040/pqF2RQ2q_400x400.jpg" }}
  maxWidth={200}
  maxHeight={200}
/>

`headers` Copy Section

This props let you use the image with additional headers

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

Default Image props Copy Chapter

As AutoImage is a wrapper around React Native's Image component, it also accepts all of the props that Image accepts. See the React Native Image documentation for more information.

`source` Copy Section

As with React Native's built in Image component, the source prop is always required. This can be almost anything that conforms to ReactNative's ImageSource type. (See Notes below for caveats.)

<AutoImage source={logoIgnite} />

`style` Copy Section

Setting the style prop will override the default styles. With AutoImage, you generally only need to specify width or height with dynamically loaded images. Setting both will override the resizing of AutoImage altogether, and if that is needed it's best to just use the default React Native Image component.

<AutoImage source={logoIgnite} style={{ width: 200 }} />

<AutoImage source={logoIgnite} style={{ height: 200 }} />

Notes Copy Chapter

As noted above, the source prop can be almost anything, the one exception being an array of objects, which AutoImage doesn't support. See the React Native Image#source documentation for more information.

File: docs/boilerplate/app/components/Button.md Copy Chapter

sidebar_position: 31 Copy Chapter

Button

The Button component is a wrapper around the Pressable component. Any prop that can be passed to Pressable can be passed to Button and it will be forwarded. Button renders a button with given text in a Text component or children. It allows you to specify the preset style of the button, you can override both the Pressable and Text styles.

Alert.alert("pressed")}
  style={[{ paddingVertical: 100 }, { borderRadius: 0 }]}
  pressedStyle={[{ backgroundColor: "red" }, { borderRadius: 0 }]}
  textStyle={[{ fontSize: 20 }, { color: "#a511dc" }]}
  pressedTextStyle={[{ fontSize: 20 }, { color: "#a51111" }]}
  RightAccessory={(props) => }
  LeftAccessory={(props) => }
/>

Props Copy Chapter

`text` Copy Section

The text prop is required if tx or children are not provided. This is the text to be rendered in the button.

`tx` Copy Section

The tx prop is required if text or children are not provided. This is the translation key to be used to translate the text.

`children` Copy Section

The children prop is required if no tx or text prop is passed. This is the content to be rendered in the button in place of the default Text component.

<Text>Click me</Text>

`preset` Copy Section

The preset prop is optional. This is the preset style of the button. It can be one of the following built-in options: default, filled, reversed

To make a custom preset, add a key to the $viewPresets, $textPresets, $pressedViewPresets and $pressedTextPresets objects in app/components/Button.tsx and then pass the name of the preset to the preset prop.

const $viewPresets = {
  // ...
  danger: [$baseViewStyle, { backgroundColor: colors.palette.angry500 }] as StyleProp<ViewStyle>,
}

const $textPresets: Record> = {
  // ...
  danger: [$baseTextStyle, { color: colors.palette.angry500 }] as StyleProp<TextStyle>,
}

const $pressedViewPresets: Record> = {
  // ...
  danger: { backgroundColor: colors.palette.angry500 },
}

const $pressedTextPresets: Record> = {
  angry: { opacity: 0.7 },
}

`textStyle` Copy Section

The textStyle prop is optional. This can be used to style text in the button. Values passed here will override anything set in the preset.

`pressedTextStyle` Copy Section

The pressedTextStyle prop is optional. This can be used to style text in the button when it is pressed. Values passed here will override anything set in the preset.

`disabledTextStyle` Copy Section

The disabledTextStyle prop is optional. It can be used to style text in the button when the disabled prop is set. Values here will override anything set in the preset.

`style` Copy Section

The style prop is optional. This can be used to style the Pressable component of the Button. Values passed here will override anything set in the preset.

`pressedStyle` Copy Section

The pressedStyle prop is optional. This can be used to style the Pressable component of the Button when it is pressed. Values passed here will override anything set in the preset.

`disabledStyle` Copy Section

The disabledStyle prop is optional. This can be used to style the Pressable component of the Button when the disabled prop is truthy. Values passed here will override anything set in the preset.

`LeftAccessory` and `RightAccessory` Copy Section

The LeftAccessory and RightAccessory props are optional. They can be used to render an accessory on the left or right side of the button. It can be a React component or a function that returns a React component. The accessory component will receive the pressed state of the Pressable via the pressableState prop, so you can make a custom accessory component render differently when pressed. Additionally, you can utilize the default accessory styles via the style prop.

(
    
  )}
/>

(
    
  )}
/>

If the accessories flicker when some prop or state changes, you can memoize the accessory with useMemo.

function LeftIcon(props: ButtonAccessoryProps) {
        return 
      },
    [],
  )}
/>

`disabled` Copy Section

The disabled prop is optional. It gets passed to the underlying Pressable component. When truthy, it will disable the press behavior on the pressable. It will also update the accessibilityState of the Pressable when set.

This prop will be passed down to the LeftAccessory and RightAccessory components, if they exist, and will cause the disabledStyle and disabledTextStyle props to be used, if they have been set.

File: docs/boilerplate/app/components/Card.md Copy Chapter

sidebar_position: 32 Copy Chapter

Card

The Card component is intended to be used for vertically aligned related content. It is a container that can hold a heading, content, and footer. It can also hold a left and right component that will be aligned to the left and right of the card body.

Props Copy Chapter

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

`preset` Copy Section

The preset prop is used to set the preset container style of the card. This affects the border and background color of the container. There are two preconfigured presets: default and reversed.

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

`verticalAlignment` Copy Section

The verticalAlignment prop is used to set the vertical alignment of the card's content. This affects the alignment of the heading, content, and footer. There are four preconfigured alignments: top, center, space-between, and force-footer-bottom. force-footer-bottom behaves like top, but will force the footer to the bottom of the card.

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

`LeftComponent` & `RightComponent` Copy Section

The LeftComponent and RightComponent props are used to set the component that will be aligned to the left or right of the card body, respectively.

<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={
     Alert.alert("pressed")} />
  }
  heading="Card Heading"
  content="Card Content"
  footer="Card Footer"
/>

`heading` Copy Section

The heading prop is used to set the heading text of the card.

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

`headingTx` Copy Section

The headingTx prop is used to set the heading text of the card using a translation key.

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

`headingTxOptions` Copy Section

The headingTxOptions prop is used to set the options for the translation key used by the headingTx prop.

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

`headingStyle` Copy Section

The headingStyle prop is used to set the style of the heading text.

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

`HeadingTextProps` Copy Section

The HeadingTextProps prop is used to pass any additional props to the heading Text component. It will accept any prop that the Text component accepts.

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

`HeadingComponent` Copy Section

The HeadingComponent prop is used to set the component that will be used for the heading. This can be used to set a custom heading component.

<Card
  HeadingComponent={}
  content="Card Content"
  footer="Card Footer"
/>

`content` Copy Section

The content prop is used to set the content text of the card.

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

`contentTx` Copy Section

The contentTx prop is used to set the content text of the card using a translation key.

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

`contentTxOptions` Copy Section

The contentTxOptions prop is used to set the options for the translation key used by the contentTx prop.

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

`contentStyle` Copy Section

The contentStyle prop is used to set the style of the content text.

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

`ContentTextProps` Copy Section

The ContentTextProps prop is used to pass any additional props to the content Text component. It will accept any prop that the Text component accepts.

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

`ContentComponent` Copy Section

The ContentComponent prop is used to set the component that will be used for the content. This can be used to set a custom content component.

<Card
  heading="Card Heading"
  ContentComponent={}
  footer="Card Footer"
/>

`footer` Copy Section

The footer prop is used to set the footer text of the card.

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

`footerTx` Copy Section

The footerTx prop is used to set the footer text of the card using a translation key.

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

`footerTxOptions` Copy Section

The footerTxOptions prop is used to set the options for the translation key used by the footerTx prop.

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

`footerStyle` Copy Section

The footerStyle prop is used to set the style of the footer text.

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

`FooterTextProps` Copy Section

The FooterTextProps prop is used to pass any additional props to the footer Text component. It will accept any prop that the Text component accepts.

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

`FooterComponent` Copy Section

The FooterComponent prop is used to set the component that will be used for the footer. This can be used to set a custom footer component.

<Card
  heading="Card Heading"
  content="Card Content"
  FooterComponent={}
/>

File: docs/boilerplate/app/components/Checkbox.md Copy Chapter

sidebar_position: 32 Copy Chapter

import ToggleProps from './_toggle_props.mdx';

Checkbox

The Checkbox component provides a simple way to collect user input for a boolean value.

Checkbox Props Copy Chapter

`icon` Copy Section

The icon is a prop for the checkbox variant that allows you to customize the icon used for the "on" state.

<Checkbox icon="ladybug" />

<AutoImage
  source={{ uri: "https://pbs.twimg.com/profile_images/845384502067159040/pqF2RQ2q_400x400.jpg" }}
/>

Alert.alert("pressed")}
  style={[{ paddingVertical: 100 }, { borderRadius: 0 }]}
  textStyle={[{ fontSize: 20 }, { color: "#a511dc" }]}
/>

Alert.alert("pressed")}>
  <Text>Click It</Text>

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

<Checkbox
  value={value}
  icon="check"
  onValueChange={setValue}
  labelTx="signup:rememberMe"
  labelStyle={{ color: "#a511dc" }}
  containerStyle={{ backgroundColor: "#fff" }}
/>

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

Alert.alert("pressed")}
/>

<Radio
  value={value}
  onValueChange={setValue}
  labelTx="signup:rememberMe"
  labelStyle={{ color: "#a511dc" }}
  containerStyle={{ backgroundColor: "#fff" }}
/>

<Screen preset="scroll">
  <Header headerTitle="screen" />
  // ... content here ...
</Screen>

<Switch
  value={value}
  accessibilityMode="icon"
  onValueChange={setValue}
  labelTx="signup:rememberMe"
  labelStyle={{ color: "#a511dc" }}
  containerStyle={{ backgroundColor: "#fff" }}
/>

<Text
  preset="header"
  tx="welcome:header"
  txOptions={{
    name: currentUser.name,
  }}
  style={$header}
/>

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

-- app
  -- components
    -- MyCustomButton.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" }}
/>

<Header title="Header Title" titleStyle={{ color: "white" }} />

<Header title="Header Title" titleContainerStyle={{ backgroundColor: "purple" }} />

<Header title="Header Title" containerStyle={{ backgroundColor: "purple" }} />

<Header title="Header Title" style={{ height: 50 }} />

<Header title="Header Title" onLeftPress={() => navigation.goBack()} backgroundColor="purple" />

<Header title="Header Title" leftIcon="back" onLeftPress={() => navigation.goBack()} />

<Header titleTx="header:title" leftIcon="back" onLeftPress={() => navigation.goBack()} />

<Header
  titleTx="header:title"
  titleTxOptions={{ name: "John" }}
  leftIcon="back"
  onLeftPress={() => navigation.goBack()}
/>

<Header titleTx="header:title" leftIcon="back" onLeftPress={() => navigation.goBack()} />

<Header
  titleTx="header:title"
  leftIcon="back"
  leftIconColor="white"
  onLeftPress={() => navigation.goBack()}
/>

<Header titleTx="header:title" leftText="Back" onLeftPress={() => navigation.goBack()} />

<Header titleTx="header:title" leftTx="header:back" onLeftPress={() => navigation.goBack()} />

<Header
  titleTx="header:title"
  leftTx="header:back"
  leftTxOptions={{ name: "John" }}
  onLeftPress={() => navigation.goBack()}
/>

<Header titleTx="header:title" LeftActionComponent={<Text>Back</Text>} />

<Header titleTx="header:title" leftIcon="back" onLeftPress={() => navigation.goBack()} />

<Header titleTx="header:title" rightIcon="back" onRightPress={() => navigation.goBack()} />

<Header
  titleTx="header:title"
  rightIcon="back"
  onRightPress={() => navigation.goBack()}
  rightIconColor="white"
/>

<Header titleTx="header:title" rightText="Back" onRightPress={() => navigation.goBack()} />

<Header titleTx="header:title" rightTx="header:back" onRightPress={() => navigation.goBack()} />

<Header
  titleTx="header:title"
  rightTx="header:back"
  rightTxOptions={{ name: "John" }}
  onRightPress={() => navigation.goBack()}
/>

<Header titleTx="header:title" RightActionComponent={<Text>Back</Text>} />

<Header titleTx="header:title" rightIcon="back" onRightPress={() => navigation.goBack()} />

<Header titleTx="header:title" safeAreaEdges={[]} />

function AccountScreen(props) {
  const { navigation } = props

  useLayoutEffect(() => {
    navigation.setOptions({
      headerShown: true,
      header: () => <Header title="Hello" />,
    })
  }, [])

  return <Screen />
}

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

  return <Screen />
}

function AccountScreen(props) {
  return (
    <View>
      <Header title="Hello" />
    </View>
  )
}

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

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