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