## File: README.md # Ignite - the battle-tested React Native boilerplate [](https://badge.fury.io/js/ignite-cli) [](https://dl.circleci.com/status-badge/redirect/gh/infinitered/ignite/tree/master) ## Proven React Native boilerplate 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](https://infinite.red/react-native-app-development-company) 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 Here are a few videos / talks that introduce Ignite and show off some of its features. Check them out! | **Getting Started with Ignite** | **Ignite talk at Chain React 2024 - Robin Heinze** | | --- | --- | ## [Full Documentation](https://github.com/infinitered/ignite/blob/master/docs/README.md) We've put great effort into the documentation as a team, please [read through it here](https://github.com/infinitered/ignite/blob/master/docs). 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](#reporting-bugs--getting-help) and we always welcome PRs to improve the docs! ## Tech Stack 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: | Library | Category | Version | Description | | -------------------------------- | -------------------- | ------- | ---------------------------------------------- | | React Native | Mobile Framework | v0.81 | The best cross-platform mobile framework | | React | UI Framework | v19 | The most popular UI framework in the world | | TypeScript | Language | v5 | Static typechecking | | React Navigation | Navigation | v7 | Performant and consistent navigation framework | | Expo | SDK | v55 | Allows (optional) Expo modules | | Expo Font | Custom Fonts | v14 | Import custom fonts | | Expo Localization | Internationalization | v17 | i18n support (including RTL!) | | RN Reanimated | Animations | v4 | Beautiful and performant animations | | MMKV | Persistence | v3 | State persistence | | apisauce | REST client | v3 | Communicate with back-end | | Jest | Test Runner | v29 | Standard test runner for JS apps | | date-fns | Date library | v4 | Excellent date library | | react-native-keyboard-controller | Keyboard library | v1 | Great keyboard manager library | | react-native-edge-to-edge | UI library | v1 | Enables edge-to-edge in Android | | Reactotron RN | Inspector/Debugger | v5 | JS debugging | | Maestro | Testing Framework | | Automate end-to-end UI testing | | Hermes | JS engine | | Fine-tuned JS engine for RN | Ignite also comes with a [component library](./docs/boilerplate/app/components/Components.md) that is tuned for custom designs, theming support, testing, custom fonts, generators, and much, much more. ## Quick Start Prerequisites: - You'll need at least a recent version of [Node](https://nodejs.org/en) to run the CLI - For compiling/running in a simulator, make sure you're set up for React Native by following [the official documentation](https://reactnative.dev/docs/environment-setup). The Ignite CLI will walk you through the steps to ignite a new React Native app: ```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 ``` Once you're up and running, check out our [Getting Started Guide](https://docs.infinite.red/ignite-cli/Guide/). If you'd like to follow a tutorial, check out [this one from Robin Heinze](https://shift.infinite.red/creating-a-trivia-app-with-ignite-bowser-part-1-1987cc6e93a1). ### Troubleshooting 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/.xcworkspace` - Add the `--debug` switch to the Ignite CLI new command to provide additional output during project initialization ## Reporting Bugs / Getting Help 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](https://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 Want to contribute to Ignite? Check out [the contributing guide](./docs/contributing/Contributing-To-Ignite.md) for more info on how to work with the codebase. ## Need Inspiration? If you need battle-tested solutions from Infinite Red experts on everything from Accessibility, to CI/CD configuration, head to [Ignite Cookbook](https://ignitecookbook.com) for code snippets from our team and the community! ## No time to learn React Native? Hire Infinite Red for your next project 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](https://infinite.red/contact) ## Further Reading - 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](https://www.youtube.com/watch?v=OgiFKMd_TeY) - Prior art includes [Ignite Andross](https://github.com/infinitered/ignite-andross) and [Ignite Bowser](https://github.com/infinitered/ignite-bowser) (which is very similar to the current version of Ignite). - [Who are We?](https://infinite.red/react-native-app-development-company) - Learn More About Infinite Red, the top React Native app development company ## License and Trademark Notice This project's source code is licensed under the [MIT License](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 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 # Welcome to your new ignited app! > The latest and greatest boilerplate for Infinite Red opinions This is the boilerplate that [Infinite Red](https://infinite.red) uses as a way to test bleeding-edge changes to our React Native stack. - [Quick start documentation](https://github.com/infinitered/ignite/blob/master/docs/boilerplate/Boilerplate.md) - [Full documentation](https://github.com/infinitered/ignite/blob/master/docs/README.md) ## Getting Started ```bash pnpm run pnpm run start ``` To make things work on your local simulator, or on your phone, you need first to [run `eas build`](https://github.com/infinitered/ignite/blob/master/docs/expo/EAS.md). We have many shortcuts on `package.json` to make it easier: ```bash pnpm run build:ios:sim # build for ios simulator pnpm run build:ios:device # build for ios device pnpm run build:ios:prod # build for ios device ``` ### `./assets` 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`: ```tree 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](https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/Icon.md). **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](https://github.com/infinitered/ignite/blob/master/docs/Components-AutoImage.md). How to use your `icon` or `image` assets: ```typescript import { Image } from 'react-native'; const MyComponent = () => { return ( ); }; ``` ## Running Maestro end-to-end tests Follow our [Maestro Setup](https://ignitecookbook.com/docs/recipes/MaestroSetup) recipe. ## Next Steps ### Ignite Cookbook [Ignite Cookbook](https://ignitecookbook.com/) is an easy way for developers to browse and share code snippets (or “recipes”) that actually work. ### Upgrade Ignite boilerplate Read our [Upgrade Guide](https://ignitecookbook.com/docs/recipes/UpdatingIgnite) to learn how to upgrade your Ignite project. ## Community ⭐️ Help us out by [starring on GitHub](https://github.com/infinitered/ignite), filing bug reports in [issues](https://github.com/infinitered/ignite/issues) or [ask questions](https://github.com/infinitered/ignite/discussions). 💬 Join us on [Slack](https://join.slack.com/t/infiniteredcommunity/shared_invite/zt-1f137np4h-zPTq_CbaRFUOR_glUFs2UA) to discuss. 📰 Make our Editor-in-chief happy by [reading the React Native Newsletter](https://reactnativenewsletter.com/). --- ## File: docs/boilerplate/app/components/_toggle_props.mdx import CodeBlock from "@theme/CodeBlock" ## Toggle Props {`\<${props.componentName} value={value} onValueChange={setValue} />`} ### `status` 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` 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` 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` 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` 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` 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` 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` 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` 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` 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` 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` 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. {`\<${props.componentName} value={value} onValueChange={setValue} labelTx="login:rememberUsername" labelTxOptions={{ username: "john" }} />`} ### `labelStyle` The `labelStyle` prop is a `StyleProp` object that is applied to the label. {`\<${props.componentName} value={value} onValueChange={setValue} labelStyle={{ color: "#000" }} />`} ### `LabelTextProps` The `LabelTextProps` prop is a `TextProps` object (from the [`Text`](./Text.md)) component that is applied to the label. {`\<${props.componentName} value={value} onValueChange={setValue} LabelTextProps={{ size: "lg" }} />`} ### `helper` 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` 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` 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. {`\<${props.componentName} value={value} onValueChange={setValue} helperTx="login:rememberUsername" helperTxOptions={{ username: "john" }} />`} ### `HelperTextProps` The `HelperTextProps` prop is a `TextProps` object (from the [`Text`](./Text.md)) component that is applied to the helper. {`\<${props.componentName} value={value} onValueChange={setValue} HelperTextProps={{ size: "lg" }} />`} --- ## File: docs/boilerplate/app/components/AutoImage.md --- sidebar_position: 30 --- # AutoImage Ignite's `AutoImage` Component is an enhanced version of the built-in React Native [Image](https://reactnative.dev/docs/image) component. It automatically resizes the image view to fit a max width or height constraint ```tsx ``` `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. ```tsx const { width, height } = useAutoImage(uri, maxWidth, maxHeight) ``` ## Props Ignite's `AutoImage` component has these props of its own: ### `maxWidth` and `maxHeight` 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. ```tsx ``` ### `headers` This props let you use the image with additional headers ```tsx ``` ## Default Image props 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](https://reactnative.dev/docs/image) for more information. ### `source` 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](https://reactnative.dev/docs/image#imagesource) type. (See [Notes](#Notes) below for caveats.) ```tsx ``` ### `style` 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. ```tsx ``` ```tsx ``` ## Notes 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](https://reactnative.dev/docs/image#source) documentation for more information. --- ## File: docs/boilerplate/app/components/Button.md --- sidebar_position: 31 --- # Button The `Button` component is a wrapper around the [`Pressable`](https://reactnative.dev/docs/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`](./Text.md) component or children. It allows you to specify the preset style of the button, you can override both the `Pressable` and `Text` styles. ```tsx 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 ### `text` The `text` prop is required if `tx` or `children` are not provided. This is the text to be rendered in the button. ```tsx ``` ### `tx` The `tx` prop is required if `text` or `children` are not provided. This is the translation key to be used to translate the text. ```tsx ``` ### `children` 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. ```tsx Click me ``` ### `preset` 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` ```tsx ``` 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. ```tsx const $viewPresets = { // ... danger: [$baseViewStyle, { backgroundColor: colors.palette.angry500 }] as StyleProp, } const $textPresets: Record> = { // ... danger: [$baseTextStyle, { color: colors.palette.angry500 }] as StyleProp, } const $pressedViewPresets: Record> = { // ... danger: { backgroundColor: colors.palette.angry500 }, } const $pressedTextPresets: Record> = { angry: { opacity: 0.7 }, } ``` ```tsx ``` ### `textStyle` 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. ```tsx ``` ### `pressedTextStyle` 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. ```tsx ``` ### `disabledTextStyle` 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. ```tsx ``` ### `style` 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. ```tsx ``` ### `pressedStyle` 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. ```tsx ``` ### `disabledStyle` 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. ```tsx ``` ### `LeftAccessory` and `RightAccessory` 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. ```tsx ( )} /> ``` ```tsx ( )} /> ``` If the accessories flicker when some prop or state changes, you can memoize the accessory with `useMemo`. ```tsx function LeftIcon(props: ButtonAccessoryProps) { return }, [], )} /> ``` ### `disabled` The `disabled` prop is optional. It gets passed to the underlying `Pressable` component. When truthy, it will [disable the press behavior on the pressable](https://reactnative.dev/docs/pressable#disabled). It will also update the [`accessibilityState`](https://reactnative.dev/docs/0.72/touchablewithoutfeedback#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 --- sidebar_position: 32 --- # 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 ```tsx Left} RightComponent={Right} 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` 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`. ```tsx ``` ### `verticalAlignment` 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. ```tsx ``` ### `LeftComponent` & `RightComponent` 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. ```tsx } RightComponent={ Alert.alert("pressed")} /> } heading="Card Heading" content="Card Content" footer="Card Footer" /> ``` ### `heading` The `heading` prop is used to set the heading text of the card. ```tsx ``` ### `headingTx` The `headingTx` prop is used to set the heading text of the card using a translation key. ```tsx ``` ### `headingTxOptions` The `headingTxOptions` prop is used to set the options for the translation key used by the `headingTx` prop. ```tsx ``` ### `headingStyle` The `headingStyle` prop is used to set the style of the heading text. ```tsx ``` ### `HeadingTextProps` The `HeadingTextProps` prop is used to pass any additional props to the heading `Text` component. It will accept any prop that the [`Text`](./Text.md) component accepts. ```tsx ``` ### `HeadingComponent` 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. ```tsx ``` ### `content` The `content` prop is used to set the content text of the card. ```tsx ``` ### `contentTx` The `contentTx` prop is used to set the content text of the card using a translation key. ```tsx ``` ### `contentTxOptions` The `contentTxOptions` prop is used to set the options for the translation key used by the `contentTx` prop. ```tsx ``` ### `contentStyle` The `contentStyle` prop is used to set the style of the content text. ```tsx ``` ### `ContentTextProps` The `ContentTextProps` prop is used to pass any additional props to the content `Text` component. It will accept any prop that the [`Text`](./Text.md) component accepts. ```tsx ``` ### `ContentComponent` 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. ```tsx ``` ### `footer` The `footer` prop is used to set the footer text of the card. ```tsx ``` ### `footerTx` The `footerTx` prop is used to set the footer text of the card using a translation key. ```tsx ``` ### `footerTxOptions` The `footerTxOptions` prop is used to set the options for the translation key used by the `footerTx` prop. ```tsx ``` ### `footerStyle` The `footerStyle` prop is used to set the style of the footer text. ```tsx ``` ### `FooterTextProps` The `FooterTextProps` prop is used to pass any additional props to the footer `Text` component. It will accept any prop that the [`Text`](./Text.md) component accepts. ```tsx ``` ### `FooterComponent` 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. ```tsx ``` --- ## File: docs/boilerplate/app/components/Checkbox.md --- sidebar_position: 32 --- import ToggleProps from './\_toggle_props.mdx'; # Checkbox The `Checkbox` component provides a simple way to collect user input for a boolean value. ## Checkbox Props ### `icon` The `icon` is a prop for the checkbox variant that allows you to customize the icon used for the "on" state. ```tsx ``` --- ## File: docs/boilerplate/app/components/Components.md --- sidebar_position: 3 --- # Ignite Built-in Components Ignite comes with a number of customizable built-in React Native components -- sort of a lightweight design system, in a way. It's the system we (at Infinite Red) tend to use the most often with our own custom mobile designs, and is designed to emphasize flexibility and customizability _over_ out-of-the-box power. There are a number of other options out there that work great with Ignite -- [UI Kitten](https://akveo.github.io/react-native-ui-kitten/), [RN Elements](https://reactnativeelements.com/), and more. But if you're building something with a totally custom design, Ignite's built-in components work great. ## Components Here's a summary of each component. Click through to view detailed documentation and code examples! ### AutoImage This is a wrapper around React Native's [Image](https://reactnative.dev/docs/image) component, which automatically resizes the image to fit the container. ```tsx ``` [Full AutoImage Component Documentation](./AutoImage.md) ### Button This is a component that renders a [`TouchableOpacity`](https://reactnative.dev/docs/touchableopacity) with given text or children. ```tsx Alert.alert("pressed")} style={[{ paddingVertical: 100 }, { borderRadius: 0 }]} textStyle={[{ fontSize: 20 }, { color: "#a511dc" }]} /> ``` ```tsx Alert.alert("pressed")}> Click It ``` [Full Button Component Documentation](./Button.md) ### Card The `Card` component is useful for displaying related information in a contained way. Where you'll use `ListItem` for horizontal information, `Card` can be used for vertical information. ```tsx Left} RightComponent={Right} 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" }} /> ``` [Full Card Component Documentation](./Card.md) ### Checkbox The `Checkbox` component is useful for displaying a user's choice for a boolean value. ```tsx ``` [Full Checkbox Component Documentation](./Checkbox.md) ### EmptyState The `EmptyState` component can be used when there is no data to display and direct the user on how to proceed. ```tsx ``` [Full EmptyState Component Documentation](./EmptyState.md) ### Header The `Header` component is a component that will appear at the top of your screen. It is used to hold navigation buttons and the screen title. ```tsx
navigation.goBack()} onRightPress={() => Alert.alert("pressed")} style={{ backgroundColor: "purple" }} titleStyle={{ color: "white" }} /> ``` [Full Header Component Documentation](./Header.md) ### Icon This is a component that renders an icon. ```tsx Alert.alert("pressed")} /> ``` [Full Icon Component Documentation](./Icon.md) ### Radio The `Radio` component is useful for displaying a user's choice for a boolean value. ```tsx ``` [Full Radio Component Documentation](./Radio.md) ### Screen This is a component that renders a screen. It is used to wrap your entire screen, and handles scrolling, [safe areas](https://reactnavigation.org/docs/handling-safe-area/), and keyboard avoiding behavior. ```tsx
// ... content here ... ``` [Full Screen Component Documentation](./Screen.md) ### Switch The `Switch` component is useful for displaying a user's choice for a boolean value. ```tsx ``` [Full Switch Component Documentation](./Switch.md) ### Text This is an enhanced version of the built-in React Native Text component. It adds internationalization and property presets. ```tsx ``` [Full Text Component Documentation](./Text.md) ### TextField This component renders a View with a [`TextInput`](https://reactnative.dev/docs/textinput) and a text label. ```tsx const [input, setInput] = useState("") const inputRef = useRef() ``` [Full Text Component Documentation](./TextField.md) ## Custom Components Ignite includes a generator for creating custom components. If the built in components don't fit your needs, you can create your own. `npx ignite-cli generate component MyCustomButton` Running the generator will create a new component in the `components` directory. ``` -- app -- components -- MyCustomButton.tsx ``` --- ## File: docs/boilerplate/app/components/EmptyState.md --- sidebar_position: 33 --- # EmptyState The `EmptyState` component is to be used when there is no data to display, usually after attempting to load some content from an external API. It is a container that can hold a heading and content. It can also display an image and provide a button to interact with. ## Props ```tsx ``` ### `preset` The `preset` prop is used to set the preset container style of the EmptyState. This affects the default image, heading, content and button. Currently, only one preconfigured preset exists: `generic`. ```tsx ``` ### `style` The `style` prop is used to set the style override for the container. ```tsx ``` ### `imageSource` The `imageSource` prop is used to set the Image source to be displayed above the heading. ```tsx ``` ### `imageStyle` The `imageStyle` prop is used to set any style overrides to be applied to the image about the heading. ```tsx ``` ### `ImageProps` The `ImageProps` prop is used to pass any additional props directly to the `Image` component. It will accept any prop that the `Image` component accepts. ```tsx ``` ### `heading` The `heading` prop is used to set the heading text of the EmptyState. ```tsx ``` ### `headingTx` The `headingTx` prop is used to set the heading text of the EmptyState using a translation key. ```tsx ``` ### `headingTxOptions` The `headingTxOptions` prop is used to set the options for the translation key used by the `headingTx` prop. ```tsx ``` ### `headingStyle` The `headingStyle` prop is used to set the style of the heading text. ```tsx ``` ### `HeadingTextProps` The `HeadingTextProps` prop is used to pass any additional props to the heading `Text` component. It will accept any prop that the [`Text`](./Text.md) component accepts. ```tsx ``` ### `content` The `content` prop is used to set the content text of the EmptyState. ```tsx ``` ### `contentTx` The `contentTx` prop is used to set the content text of the EmptyState using a translation key. ```tsx ``` ### `contentTxOptions` The `contentTxOptions` prop is used to set the options for the translation key used by the `contentTx` prop. ```tsx ``` ### `contentStyle` The `contentStyle` prop is used to set the style of the content text. ```tsx ``` ### `ContentTextProps` The `ContentTextProps` prop is used to pass any additional props to the content `Text` component. It will accept any prop that the [`Text`](./Text.md) component accepts. ```tsx ``` ### `button` The `button` prop is used to set the button text of the EmptyState. ```tsx ``` ### `buttonTx` The `buttonTx` prop is used to set the button text of the EmptyState using a translation key. ```tsx ``` ### `buttonTxOptions` The `buttonTxOptions` prop is used to set the options for the translation key used by the `buttonTx` prop. ```tsx ``` ### `buttonStyle` The `buttonStyle` prop is used to set the style overrides of the button. ```tsx ``` ### `buttonTextStyle` The `buttonTextStyle` prop is used to set the style of the button text. ```tsx ``` ### `ButtonProps` The `ButtonProps` prop is used to pass any additional props to the `Button` component. It will accept any prop that the [`Button`](./Button.md) component accepts. ```tsx ``` --- ## File: docs/boilerplate/app/components/Header.md --- sidebar_position: 34 --- # Header The `Header` component is a component that will appear at the top of your screen. It is used to hold navigation buttons and the screen title. ```tsx
navigation.goBack()} onRightPress={() => Alert.alert("pressed")} style={{ height: 60 }} backgroundColor="purple" titleStyle={{ color: "white" }} /> ``` ## Props ### `titleMode` The layout of the title relative to the action components. `center` will force the title to always be centered relative to the header. If the title or the action buttons are too long, the title will be cut off. `flex` will attempt to center the title relative to the action buttons. If the action buttons are different widths, the title will be off-center relative to the header. ### `titleStyle` The `titleStyle` prop is an optional prop that is used to set the style of the header title. This is a [`StyleProp`](https://reactnative.dev/docs/text-style-props) object. ```tsx
``` ### `titleContainerStyle` The `titleContainerStyle` prop is an optional prop that is used to set the style of the header title's outer container. This is a [`StyleProp`](https://reactnative.dev/docs/view-style-props) object. ```tsx
``` ### `containerStyle` The `containerStyle` prop is an optional prop that is used to set the style of the header's outer container. This is useful specifically on notched devices to override insets. This is a [`StyleProp`](https://reactnative.dev/docs/view-style-props) object. ```tsx
``` ### `style` The `style` prop is an optional prop that is used to set the style of the header's inner container. You can use this to override the header's height. This is a [`StyleProp`](https://reactnative.dev/docs/view-style-props) object. ```tsx
``` ### `backgroundColor` The `backgroundColor` prop is an optional prop that is used to set the background color of the header's outer container. ```tsx
navigation.goBack()} backgroundColor="purple" /> ``` ### `title` The `title` is an optional prop that is used to set the header title. If this is not set, the `titleTx` prop must be present to set the title. If both are set, the `title` value will be used. ```tsx
navigation.goBack()} /> ``` ### `titleTx` The `titleTx` is an optional prop that is used to lookup the translation for the header title. If this is not set, the `title` prop must be present to set the header title. If both are set, the `title` value will be used. ```tsx
navigation.goBack()} /> ``` ### `titleTxOptions` The `titleTxOptions` is an optional prop that is used to pass props to the translation lookup for the header title. This is useful if you need to pass in dynamic values to the translation. ```tsx
navigation.goBack()} /> ``` ### `leftIcon` The `leftIcon` is an optional prop that is used to set the icon for the left navigation button. Options are 'back', 'bullet', and 'bug'. Custom icons can be created by using the [`Icon` component](./Icon.md#custom-icons). Once you create a custom icon, just pass the string name of the icon to the `leftIcon` prop. ```tsx
navigation.goBack()} /> ``` ### `leftIconColor` The `leftIconColor` is an optional prop that is used to set the tint color of the left navigation icon. ```tsx
navigation.goBack()} /> ``` ### `leftText` The `leftText` is an optional prop that is used to set the text for the left navigation button. Overrides the `leftIcon` prop. ```tsx
navigation.goBack()} /> ``` ### `leftTx` The `leftTx` is an optional prop that is used to lookup the translation for the left navigation button. Overrides the `leftIcon` and `leftText` prop`. ```tsx
navigation.goBack()} /> ``` ### `leftTxOptions` The `leftTxOptions` is an optional prop that is used to pass props to the translation lookup for the left navigation button. This is useful if you need to pass in dynamic values to the translation. ```tsx
navigation.goBack()} /> ``` ### `LeftActionComponent` The `LeftActionComponent` is an optional `ReactElement` prop that is used to set a custom component for the left navigation button. Overrides the `leftIcon`, `leftText`, `leftTx`, and `onLeftText` props (since the passed component is completely customizable). ```tsx
Back} /> ``` ### `onLeftPress` The `onLeftPress` is an optional prop that is used to set the function to be called when the left navigation button is pressed. ```tsx
navigation.goBack()} /> ``` ### `rightIcon` The `rightIcon` is an optional prop that is used to set the icon for the right navigation button. Custom icons can be created by using the [`Icon` component](./Icon.md#custom-icons). Once you create a custom icon, just pass the string name of the icon to the `rightIcon` prop. ```tsx
navigation.goBack()} /> ``` ### `rightIconColor` The `rightIconColor` is an optional prop that is used to set the tint color of the right navigation icon. ```tsx
navigation.goBack()} rightIconColor="white" /> ``` ### `rightText` The `rightText` is an optional prop that is used to set the text for the right navigation button. Overrides the `rightIcon` prop. ```tsx
navigation.goBack()} /> ``` ### `rightTx` The `rightTx` is an optional prop that is used to lookup the translation for the right navigation button. Overrides the `rightIcon` and `rightText` prop`. ```tsx
navigation.goBack()} /> ``` ### `rightTxOptions` The `rightTxOptions` is an optional prop that is used to pass props to the translation lookup for the right navigation button. This is useful if you need to pass in dynamic values to the translation. ```tsx
navigation.goBack()} /> ``` ### `RightActionComponent` The `RightActionComponent` is an optional `ReactElement` prop that is used to set a custom component for the right navigation button. Overrides the `rightIcon`, `rightText`, `rightTx`, and `onRightPress` props (since the right action component can customize all that). ```tsx
Back} /> ``` ### `onRightPress` The `onRightPress` is an optional prop that is used to set the function to be called when the right navigation button is pressed. ```tsx
navigation.goBack()} /> ``` ### `safeAreaEdges` The `safeAreaEdges` optional prop can be used to override the default safe area edges. By default, the header will use the `top` safe area edge. If you want to not account for the safe area edges, you can pass in `[]` to the `safeAreaEdges` prop. ```tsx
``` ## Usage The Header is a flexible component that can be integrated within your application using a few different methods: ### Method 1 (recommended) - Using `navigation.setOptions()` method in your screen component or `useHeader()` hook. This method gives you the most control over your Header and co-locates the logic inside of your screen while preserving react-navigation's optimizations by keeping it outside of the screen component's render lifecycle. ```tsx function AccountScreen(props) { const { navigation } = props useLayoutEffect(() => { navigation.setOptions({ headerShown: true, header: () =>
, }) }, []) return } ``` A convenience [`useHeader`](../utils/useHeader.tsx.md) hook is provided that abstracts and cleans up some of this logic. ```tsx function AccountScreen(props) { useHeader({ title: "Hello", }) return } ``` ### Method 2 - Directly in the render of you screen component. The Header can be rendered directly in your screen's body. This gives you the most control over the Header component at the expense of performance as it is now a part of the screen's render lifecycle. ```tsx function AccountScreen(props) { return (
) } ``` If you prefer this method, it might be a good idea to memoize the component to prevent unnecessary re-renders. ### Method 3 - Defining the header in your navigator/screen config. If your Header shares a lot of the same logic within a navigator, it might be a better solution to set the Header inside the navigator config or navigator's screen config. For any customization between screens, you will still need to set the Header props using `navigation.setOptions()`. Additionally, the Header might need to be updated/refactored to use react-navigation's header properties as it isn't very compatible out-of-the-box. ```tsx
, }} /> ``` Or, you can define it on the screen config. ```tsx
}} /> ```