Skip to content

Commit

Permalink
Add FlatList doc to AMA
Browse files Browse the repository at this point in the history
  • Loading branch information
JDMathew committed Aug 5, 2024
1 parent 0d630e1 commit c8b9a39
Showing 1 changed file with 48 additions and 0 deletions.
48 changes: 48 additions & 0 deletions packages/lists/docs/FlatList.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { TalkBackList, Required } from '@site/src/components';

# FlatList

FlatList is an extension of the [React Native FlatList](https://reactnative.dev/docs/flatlist) component, [focused on accessibility](#accessibility-improvements).

## Usage

```jsx
import { FlatList } from '@react-native-ama/lists';

<FlatList
data={items}
renderItem={renderItem}
keyExtractor={item => item.id}
listType="dynamic"
singularMessage="%count% item found"
pluralMessage="%count% items found"
/>
```

## Accessibility Improvements

- On `Android` allows TalkBack to announce **in list**/**out list** or **in grid**/**out of grid**
- A [dynamic list](./DynamicFlatList.mdx) automatically announces the number of items found when it gets filtered

### TalkBack

<TalkBackList />

To provide this accessibility feature AMA wraps the list in the custom native component: [ListWrapper](./ListWrapper.mdx).

### Dynamic list

A dynamic list must announce the number of items displayed if they change due to filtering. Check [here](../../../website/guidelines/lists-grids.md#number-of-results) for more info.

## Props

### <Required /> `listType`

| Value | Description |
| ------- | ------------------------------ |
| dynamic | Renders a [DynamicFlatList](/) |
| static | Renders a [StaticFlatList](/) |

## Related guidelines

- [Lists & Grids](../../../website/guidelines/lists-grids.md)

0 comments on commit c8b9a39

Please sign in to comment.