Skip to main content

ListWrapper

ListWrapper is a custom native component for Android that allows TalkBack to recognise that its children are part of a list/grid and behave accordingly.

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.

This component can be used to wrap custom a FlatList whenever they do not provide the same accessibility experienced with native Android apps. 1

Usage​

import  { ListWrapper } from "@react-native-ama/lists";


<ListWrapper rowsCount={10} columnsCount={1}>
    <MyCustomFlatList />
</ListWrapper>
note

On iOS, the component is rendered as Fragment as this behaviour is native to Android only.

Props​

rowsCount​

The number of rows to be announced by TalkBack.

columnsCount​

This optional parameter is used by TalkBack to know if the user landed on a List or a Grid. The default value of 1 makes TalkBack read: in list / out of list, while a bigger number: in grid / out of grid

Footnotes​

  1. The component is internally used by FlatList, DynamicFlatList and StaticFlatList ↩