diff --git a/docs/ignite-cli/_category_.json b/docs/ignite-cli/_category_.json
index d5208722..38fcbc41 100644
--- a/docs/ignite-cli/_category_.json
+++ b/docs/ignite-cli/_category_.json
@@ -1,8 +1,8 @@
{
- "label": "Ignite",
+ "label": "ignite-cli",
"link": null,
"customProps": {
- "description": "Infinite Red's hottest boilerplate for React Native.",
+ "description": "",
"projectName": "ignite-cli",
"sidebar": {
"type": "autogenerated",
diff --git a/docs/ignite-cli/boilerplate/app/components/AutoImage.md b/docs/ignite-cli/boilerplate/app/components/AutoImage.md
index b53d6aa5..14975e34 100644
--- a/docs/ignite-cli/boilerplate/app/components/AutoImage.md
+++ b/docs/ignite-cli/boilerplate/app/components/AutoImage.md
@@ -6,9 +6,15 @@ sidebar_position: 30
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
+
+
+# Usage
+
```tsx
,
-}
+ danger: [
+ $baseViewStyle,
+ { backgroundColor: colors.palette.angry500 },
+ ] as StyleProp,
+};
const $textPresets: Record> = {
// ...
- danger: [$baseTextStyle, { color: colors.palette.angry500 }] as StyleProp,
-}
+ danger: [
+ $baseTextStyle,
+ { color: colors.palette.angry500 },
+ ] as StyleProp,
+};
const $pressedViewPresets: Record> = {
// ...
danger: { backgroundColor: colors.palette.angry500 },
-}
+};
const $pressedTextPresets: Record> = {
angry: { opacity: 0.7 },
-}
+};
```
```tsx
@@ -139,7 +149,11 @@ The `LeftAccessory` and `RightAccessory` props are optional. They can be used to
```tsx
(
- (
- Alert.alert("pressed")} />
+ Alert.alert("pressed")}
+ />
}
heading="Card Heading"
content="Card Content"
@@ -133,7 +154,9 @@ The `HeadingComponent` prop is used to set the component that will be used for t
```tsx
`](https://reactnative.dev/docs/view-style-props) object.
```tsx
-
+
```
### `containerStyle`
@@ -66,7 +73,11 @@ The `style` prop is an optional prop that is used to set the style of the header
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" />
+ navigation.goBack()}
+ backgroundColor="purple"
+/>
```
### `title`
@@ -74,7 +85,11 @@ The `backgroundColor` prop is an optional prop that is used to set the backgroun
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()} />
+ navigation.goBack()}
+/>
```
### `titleTx`
@@ -82,7 +97,11 @@ The `title` is an optional prop that is used to set the header title. If this is
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()} />
+ navigation.goBack()}
+/>
```
### `titleTxOptions`
@@ -103,7 +122,11 @@ The `titleTxOptions` is an optional prop that is used to pass props to the trans
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()} />
+ navigation.goBack()}
+/>
```
### `leftIconColor`
@@ -124,7 +147,11 @@ The `leftIconColor` is an optional prop that is used to set the tint color of th
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()} />
+ navigation.goBack()}
+/>
```
### `leftTx`
@@ -132,7 +159,11 @@ The `leftText` is an optional prop that is used to set the text for the left nav
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()} />
+ navigation.goBack()}
+/>
```
### `leftTxOptions`
@@ -161,7 +192,11 @@ The `LeftActionComponent` is an optional `ReactElement` prop that is used to set
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()} />
+ navigation.goBack()}
+/>
```
### `rightIcon`
@@ -169,7 +204,11 @@ The `onLeftPress` is an optional prop that is used to set the function to be cal
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()} />
+ navigation.goBack()}
+/>
```
### `rightIconColor`
@@ -190,7 +229,11 @@ The `rightIconColor` is an optional prop that is used to set the tint color of t
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()} />
+ navigation.goBack()}
+/>
```
### `rightTx`
@@ -198,7 +241,11 @@ The `rightText` is an optional prop that is used to set the text for the right n
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()} />
+ navigation.goBack()}
+/>
```
### `rightTxOptions`
@@ -227,7 +274,11 @@ The `RightActionComponent` is an optional `ReactElement` prop that is used to se
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()} />
+ navigation.goBack()}
+/>
```
### `safeAreaEdges`
@@ -248,16 +299,16 @@ This method gives you the most control over your Header and co-locates the logic
```tsx
function AccountScreen(props) {
- const { navigation } = props
+ const { navigation } = props;
useLayoutEffect(() => {
navigation.setOptions({
headerShown: true,
header: () => ,
- })
- }, [])
+ });
+ }, []);
- return
- )
+ );
}
```
@@ -296,7 +347,9 @@ If your Header shares a lot of the same logic within a navigator, it might be a
```tsx
,
+ header: (props) => (
+
+ ),
}}
/>
```
diff --git a/docs/ignite-cli/boilerplate/app/components/Icon.md b/docs/ignite-cli/boilerplate/app/components/Icon.md
index 51b73387..46a787c6 100644
--- a/docs/ignite-cli/boilerplate/app/components/Icon.md
+++ b/docs/ignite-cli/boilerplate/app/components/Icon.md
@@ -6,6 +6,10 @@ sidebar_position: 35
Ignite's `Icon` Component renders an icon using predefined icon images. You can use those, override them, or customize this component to create any number of image based icons. If `onPress` is passed, it will wrap the icon in a [`TouchableOpacity`](https://reactnative.dev/docs/touchableopacity) component, otherwise it will use a [`View`](https://reactnative.dev/docs/view) component.
+
+
+### Usage
+
```tsx
Alert.alert("Hello")} />
```
@@ -98,7 +102,7 @@ To create your own custom icon, add your icon image(s) to the `assets/icons/` di
export const iconRegistry = {
// ...
custom: require("./myCustomIcon.png"),
-}
+};
```
You can then use your custom icon by passing its name through the `icon` prop.
diff --git a/docs/ignite-cli/boilerplate/app/components/ListItem.md b/docs/ignite-cli/boilerplate/app/components/ListItem.md
index be2c87a2..c739fee2 100644
--- a/docs/ignite-cli/boilerplate/app/components/ListItem.md
+++ b/docs/ignite-cli/boilerplate/app/components/ListItem.md
@@ -6,6 +6,10 @@ sidebar_position: 36
The `ListItem` component is a component that is used to display a single item in a list. It provides a lot of flexibility in terms of what you can do with it. It can be used to display a simple piece text, or a complex component with multiple actionable and custom styled elements inside.
+
+
+### Usage
+
```tsx
,
-}
+ label: [
+ $baseStyle,
+ $sizeStyles.md,
+ $fontWeightStyles.medium,
+ ] as StyleProp,
+};
```
```tsx
diff --git a/docs/ignite-cli/boilerplate/app/components/TextField.md b/docs/ignite-cli/boilerplate/app/components/TextField.md
index fc4df40e..24998c3b 100644
--- a/docs/ignite-cli/boilerplate/app/components/TextField.md
+++ b/docs/ignite-cli/boilerplate/app/components/TextField.md
@@ -8,6 +8,10 @@ Ignite's `TextField` Component is an enhanced version of the built-in React Nati
With this component you will be able to standardise TextInput component across your app.
+
+
+### Usage
+
```tsx
import { TextField } from '../components';
@@ -45,7 +49,11 @@ The `TextField` component accepts all the props of the built-in React Native [`T
The `status` prop is used to set an `'error'` or `'disabled'` state on the component. The default value is `null`. You can use it to show an error style for validations or to disable the component. By default the `'error'` status will set the `borderColor` on the input wrapper to whatever `colors.error` is set to. Setting the status to `'disabled'` will disable editing on the `TextInput` component.
```tsx
- setInput(value)} status="error" />
+ setInput(value)}
+ status="error"
+/>
```
### `label`
@@ -53,7 +61,11 @@ The `status` prop is used to set an `'error'` or `'disabled'` state on the compo
The `label` optional prop is a string that is used to set the label. If this is not set, the `labelTx` prop must be present to set the label. If both are set, the `label` value will be used.
```tsx
- setInput(value)} label="Name" />
+ setInput(value)}
+ label="Name"
+/>
```
### `labelTx`
@@ -61,7 +73,11 @@ The `label` optional prop is a string that is used to set the label. If this is
The `labelTx` optional prop is the string key used to look up the translated text for the user's locale. Ignite uses [`i18n-js`](http://i18njs.com/) for internationalization. If this is not set, the `label` prop must be present to set the label. If both are set, the `label` value will be used.
```tsx
- setInput(value)} labelTx="signup.name" />
+ setInput(value)}
+ labelTx="signup.name"
+/>
```
### `labelTxOptions`
@@ -95,7 +111,11 @@ The `LabelTextProps` is an optional prop that is used to pass props to the [`Tex
The `helper` optional prop is a string that is used to set the helper text. If this is not set, the `helperTx` prop must be present to set the helper text. If both are set, the `helper` value will be used. The helper text is rendered with a [`Text`](./Text.md) component.
```tsx
- setInput(value)} helper="This is a helper text" />
+ setInput(value)}
+ helper="This is a helper text"
+/>
```
### `helperTx`
@@ -103,7 +123,11 @@ The `helper` optional prop is a string that is used to set the helper text. If t
The `helperTx` optional prop is the string key used to look up the translated text for the user's locale. Ignite uses [`i18n-js`](http://i18njs.com/) for internationalization. If this is not set, the `helper` prop must be present to set the helper text. If both are set, the `helper` value will be used.
```tsx
- setInput(value)} helperTx="signup.name" />
+ setInput(value)}
+ helperTx="signup.name"
+/>
```
### `helperTxOptions`
@@ -137,7 +161,11 @@ The `HelperTextProps` is an optional prop that is used to pass props to the [`Te
The `placeholder` optional prop is a string that is used to set the placeholder. If this is not set, the `placeholderTx` prop must be present to set the placeholder. If both are set, the `placeholder` value will be used.
```tsx
- setInput(value)} placeholder="Name" />
+ setInput(value)}
+ placeholder="Name"
+/>
```
### `placeholderTx`
@@ -145,7 +173,11 @@ The `placeholder` optional prop is a string that is used to set the placeholder.
The `placeholderTx` optional prop is the string key used to look up the translated text for the user's locale. Ignite uses [`i18n-js`](http://i18njs.com/) for internationalization. If this is not set, the `placeholder` prop must be present to set the placeholder. If both are set, the `placeholder` value will be used.
```tsx
- setInput(value)} placeholderTx="signup.name" />
+ setInput(value)}
+ placeholderTx="signup.name"
+/>
```
### `placeholderTxOptions`
@@ -225,10 +257,10 @@ const PasswordRightAccessory = useMemo(
containerStyle={props.style}
onPress={() => setIsAuthPasswordHidden(!isAuthPasswordHidden)}
/>
- )
+ );
},
- [isAuthPasswordHidden],
-)
+ [isAuthPasswordHidden]
+);
```
This could then be passed to the `TextField` component directly.
diff --git a/docs/ignite-cli/boilerplate/app/components/Toggle.md b/docs/ignite-cli/boilerplate/app/components/Toggle.md
index 2b0ff12d..23f8f4f1 100644
--- a/docs/ignite-cli/boilerplate/app/components/Toggle.md
+++ b/docs/ignite-cli/boilerplate/app/components/Toggle.md
@@ -6,6 +6,8 @@ sidebar_position: 41
This component is a flexible component that can be used to toggle a boolean value. It can be used to render a switch, checkbox, or radio button, and exposes style props for every element.
+
+
## Props
### `variant`
@@ -55,7 +57,11 @@ The `onValueChange` prop is a callback that is called when the toggle is toggled
The `containerStyle` prop is a style object that is applied to the container of the toggle.
```tsx
-` object that is applied to the
The `LabelTextProps` prop is a `TextProps` object (from the [`Text`](./Text.md)) component that is applied to the label.
```tsx
-