Skip to content

Commit

Permalink
docs: added <AutofocusContainer /> comp docs (#310)
Browse files Browse the repository at this point in the history
* Add AutofocusContainer doc

* add components category

* update hooks category

* move AMAProvider into components

* removed props from usage

* updated warning
  • Loading branch information
JDMathew authored Jan 23, 2025
1 parent 7489433 commit 7482e86
Show file tree
Hide file tree
Showing 5 changed files with 68 additions and 2 deletions.
File renamed without changes.
59 changes: 59 additions & 0 deletions packages/core/docs/components/AutofocusContainer.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
# AutofocusContainer

It is a utility component that automatically calls the [useFocus](../hooks/useFocus) hook when it is mounted.

## Usage

```jsx
import { AutofocusContainer } from 'react-native-ama';

<AutofocusContainer>{children}</AutofocusContainer>;
```

## Example

This component can be used to move the focus on dynamically shown components, for example:

```jsx title="UseTimedAction.screen.tsx"
<View style={styles.centeredView}>
<CTAPressable title="Show timed content" onPress={handleOnPress} />
{showContent ? (
<AutofocusContainer>
<Text>Great! You did it :)</Text>
<Spacer height="big" />
<CTAPressable title="Show home screen" />
</AutofocusContainer>
) : null}
</View>
```

In this example, we want to move the focus to the view rendered once the user taps on "Show timed content".

## Accessibility

- Once the focus is moved makes, the screen reader announces all the text present in that container

## Props

### `accessibilityLabel`

The label to assign to the wrapping View container.

### `wrapChildrenInAccessibleView`

Weather or not the child should be wrapped in an accessible View. By default, this is the case.

:::warning
**Autofocus may not work as expected when this prop is false!**

If `wrapChildrenInAccessibleView` is set to `false` the children of the AutofocusContainer will not be wrapped in an accessible view and **autofocus** will only works if the container contains accessible elements, like Text, Buttons, etc.

:::

| Type | Default |
| ------- | ------- |
| boolean | true |

## Related guidelines

- [Focus](/guidelines/focus)
5 changes: 5 additions & 0 deletions packages/core/docs/components/_category_.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"label": "Components",
"collapsible": true,
"collapsed": false
}
2 changes: 1 addition & 1 deletion packages/core/docs/core.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ For more detailed information about the config file, please refer to [this docum

## Usage

You must include the [AMAProvider](./AMAProvider.md) in your app, as some components and hooks require it.
You must include the [AMAProvider](./components/AMAProvider.md) in your app, as some components and hooks require it.

```jsx {2-4,6,8-9}
import { AMAProvider } from '@react-native-ama/core';
Expand Down
4 changes: 3 additions & 1 deletion packages/core/docs/hooks/_category_.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
{
"label": "Hooks"
"label": "Hooks",
"collapsible": true,
"collapsed": false
}

0 comments on commit 7482e86

Please sign in to comment.