DynamicFlatList

DynamicFlatList extends the React Native FlatList component [focused on accessibility].

Usage

import { DynamicFlatList } from '@react-native-ama/lists';

<DynamicFlatList
  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 automatically announces the number of items found when it gets filtered

TalkBack

With a native app, TalkBack, to announce when the user focuses or leaves a list for the first time. This info is additionally provided as in list (or in grid), and out of list (or out of the grid). This behaviour is missing in ReactNative as the FlatList uses a ScrollView instead of the native RecyclerView one.

To provide this accessibility feature AMA wraps the list in the custom native component: ListWrapper.

Dynamic list

A dynamic list must announce the number of items displayed if they change due to filtering. Check here for more info.

Additional props

Required singularMessage

Is the message to announce when the list renders one¹ item ². The string %count%* will be replaced with the actual number of items rendered at the moment.

Type	Default
string	undefined

Required pluralMessage

Is the message to announce when the list renders zero or multiple¹ items ² The string %count%* will be replaced with the actual number of items rendered at the moment.

Type	Default
string	undefined

isPlural

By default, the component considers the number 1 as singular and any other as plural. Although this works fine with English, it might not be the case for other languages. For this reason, allows specifying a custom function that should return true if the accessibilityPluralMessage should be used; otherwise, false.

Type	Default
() => boolean	undefined

Example:

import { DynamicFlatList } from 'react-native-ama';

<DynamicFlatList
  data={items}
  renderItem={renderItem}
  keyExtractor={item => item.id}
  listType="dynamic"
  singularMessage="%count% item found"
  pluralMessage="%count% items found"
  isPlural={customIsPlural}
/>;

const customIsPlural = () => {
  return Math.random() > 0.5;
};

rowsCount

The number of rows of the list/grid. If empty, the length of the data is used to calculate it and divided by numColumns.

Type	Default
number	undefined

note

When passing rowsCount, it is used as it is and is assumed that the number of columns has been taken into account.

numColumns

The number of columns of the list.

Type	Default
number	undefined

Related guidelines

• Lists & Grids

Footnotes

1. The announcement is made only when the list is filtered, and the number of items displayed is different from the original one ↩ ↩²

2. This is with the default behaviour that can be customised via the isPlural prop ↩ ↩²