Skip to content

Commit 7482e86

Browse files
authored
docs: added <AutofocusContainer /> comp docs (#310)
* Add AutofocusContainer doc * add components category * update hooks category * move AMAProvider into components * removed props from usage * updated warning
1 parent 7489433 commit 7482e86

File tree

5 files changed

+68
-2
lines changed

5 files changed

+68
-2
lines changed
File renamed without changes.
Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# AutofocusContainer
2+
3+
It is a utility component that automatically calls the [useFocus](../hooks/useFocus) hook when it is mounted.
4+
5+
## Usage
6+
7+
```jsx
8+
import { AutofocusContainer } from 'react-native-ama';
9+
10+
<AutofocusContainer>{children}</AutofocusContainer>;
11+
```
12+
13+
## Example
14+
15+
This component can be used to move the focus on dynamically shown components, for example:
16+
17+
```jsx title="UseTimedAction.screen.tsx"
18+
<View style={styles.centeredView}>
19+
<CTAPressable title="Show timed content" onPress={handleOnPress} />
20+
{showContent ? (
21+
<AutofocusContainer>
22+
<Text>Great! You did it :)</Text>
23+
<Spacer height="big" />
24+
<CTAPressable title="Show home screen" />
25+
</AutofocusContainer>
26+
) : null}
27+
</View>
28+
```
29+
30+
In this example, we want to move the focus to the view rendered once the user taps on "Show timed content".
31+
32+
## Accessibility
33+
34+
- Once the focus is moved makes, the screen reader announces all the text present in that container
35+
36+
## Props
37+
38+
### `accessibilityLabel`
39+
40+
The label to assign to the wrapping View container.
41+
42+
### `wrapChildrenInAccessibleView`
43+
44+
Weather or not the child should be wrapped in an accessible View. By default, this is the case.
45+
46+
:::warning
47+
**Autofocus may not work as expected when this prop is false!**
48+
49+
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.
50+
51+
:::
52+
53+
| Type | Default |
54+
| ------- | ------- |
55+
| boolean | true |
56+
57+
## Related guidelines
58+
59+
- [Focus](/guidelines/focus)
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"label": "Components",
3+
"collapsible": true,
4+
"collapsed": false
5+
}

packages/core/docs/core.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ For more detailed information about the config file, please refer to [this docum
3939

4040
## Usage
4141

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

4444
```jsx {2-4,6,8-9}
4545
import { AMAProvider } from '@react-native-ama/core';
Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
{
2-
"label": "Hooks"
2+
"label": "Hooks",
3+
"collapsible": true,
4+
"collapsed": false
35
}

0 commit comments

Comments
 (0)