Skip to main content

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"
/>

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 one1 item 2. The string %count%* will be replaced with the actual number of items rendered at the moment.

TypeDefault
stringundefined

Required pluralMessage​

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

TypeDefault
stringundefined

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.

TypeDefault
() => booleanundefined

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.

TypeDefault
numberundefined
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.

TypeDefault
numberundefined

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

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