Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
}
Loading