diff --git a/.changeset/kind-impalas-carry.md b/.changeset/kind-impalas-carry.md new file mode 100644 index 00000000..8c53bf06 --- /dev/null +++ b/.changeset/kind-impalas-carry.md @@ -0,0 +1,11 @@ +--- +'@react-native-ama/lists': minor +'@react-native-ama/animations': minor +'@react-native-ama/core': minor +'@react-native-ama/extras': minor +'@react-native-ama/forms': minor +'@react-native-ama/internal': minor +'@react-native-ama/react-native': minor +--- + +Removed ListWrapper and corresponding native module allowing `lists` package to be used in expo apps diff --git a/packages/lists/docs/DynamicFlatList.mdx b/packages/lists/docs/DynamicFlatList.mdx index 5168d070..f9e9cdce 100644 --- a/packages/lists/docs/DynamicFlatList.mdx +++ b/packages/lists/docs/DynamicFlatList.mdx @@ -19,18 +19,6 @@ import { DynamicFlatList } from '@react-native-ama/lists'; /> ``` -## 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 - - - -To provide this accessibility feature AMA wraps the list in the custom native -component: [ListWrapper](./ListWrapper.mdx). ### Dynamic list diff --git a/packages/lists/docs/FlatList.mdx b/packages/lists/docs/FlatList.mdx index ce8ad985..a1f58536 100644 --- a/packages/lists/docs/FlatList.mdx +++ b/packages/lists/docs/FlatList.mdx @@ -19,16 +19,6 @@ import { FlatList } from '@react-native-ama/lists'; /> ``` -## 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 - - - -To provide this accessibility feature AMA wraps the list in the custom native component: [ListWrapper](./ListWrapper.mdx). ### Dynamic list diff --git a/packages/lists/docs/ListWrapper.mdx b/packages/lists/docs/ListWrapper.mdx deleted file mode 100644 index 2cfefe86..00000000 --- a/packages/lists/docs/ListWrapper.mdx +++ /dev/null @@ -1,42 +0,0 @@ -import { TalkBackList } from '@site/src/components'; - -# 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. - - - -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 - -```jsx -import { ListWrapper } from "@react-native-ama/lists"; - - - - - -``` - -:::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 - -## Related guidelines - -- [Lists & Grids](/guidelines/lists-grids) - -[^1]: The component is internally used by [FlatList](./FlatList.mdx), [DynamicFlatList](./DynamicFlatList.mdx) and [StaticFlatList](./StaticFlatList.mdx) diff --git a/packages/lists/docs/StaticFlatList.mdx b/packages/lists/docs/StaticFlatList.mdx index 58dc5efc..bd1180e7 100644 --- a/packages/lists/docs/StaticFlatList.mdx +++ b/packages/lists/docs/StaticFlatList.mdx @@ -16,17 +16,6 @@ import { StaticFlatList } from '@react-native-ama/lists'; /> ``` -## Accessibility Improvements - -- On `Android` allows TalkBack to announce **in list**/**out list** or **in grid**/**out of grid** - -### TalkBack - - - -To provide this accessibility feature, AMA wraps the list in the custom native -component: [ListWrapper](./ListWrapper.mdx). - ## Additional props diff --git a/packages/lists/src/components/DynamicFlatList.tsx b/packages/lists/src/components/DynamicFlatList.tsx index 1f4159d7..2d527940 100644 --- a/packages/lists/src/components/DynamicFlatList.tsx +++ b/packages/lists/src/components/DynamicFlatList.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { FlatList, FlatListProps } from 'react-native'; import { useDynamicList } from '../hooks/useDynamicList'; -import { ListWrapper } from './ListWrapper'; type DynamicFlatListProps = FlatListProps & { singularMessage: string; @@ -27,22 +26,14 @@ export const DynamicFlatList = React.forwardRef< }); return __DEV__ ? ( - - - + ) : ( - - - + ); }, ); diff --git a/packages/lists/src/components/ListWrapper.android.test.tsx b/packages/lists/src/components/ListWrapper.android.test.tsx deleted file mode 100644 index 452586aa..00000000 --- a/packages/lists/src/components/ListWrapper.android.test.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { render } from '@testing-library/react-native'; -import * as React from 'react'; -import { Platform } from 'react-native'; - -describe('ListWrapper', () => { - it('renders the AMAFlatListWrapper is the Platform is Android', () => { - Platform.OS = 'android'; - - const { ListWrapper } = require('./ListWrapper'); - - const result = render(); - - expect(result.toJSON()).toMatchInlineSnapshot(` - - `); - }); -}); diff --git a/packages/lists/src/components/ListWrapper.ios.test.tsx b/packages/lists/src/components/ListWrapper.ios.test.tsx deleted file mode 100644 index dda4f0b5..00000000 --- a/packages/lists/src/components/ListWrapper.ios.test.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { render } from '@testing-library/react-native'; -import * as React from 'react'; -import { Platform } from 'react-native'; - -describe('ListWrapper', () => { - it('renders an empty wrapper is the Platform is iOS', () => { - Platform.OS = 'ios'; - - const { ListWrapper } = require('./ListWrapper'); - - const result = render(); - - expect(result.toJSON()).toMatchInlineSnapshot('null'); - }); -}); diff --git a/packages/lists/src/components/ListWrapper.tsx b/packages/lists/src/components/ListWrapper.tsx deleted file mode 100644 index 6c951434..00000000 --- a/packages/lists/src/components/ListWrapper.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import * as React from 'react'; -import { Platform, requireNativeComponent } from 'react-native'; - -type FlatListWrapperProps = React.PropsWithChildren<{ - rowsCount: number; - columnsCount?: number; -}>; - -const isAndroid = Platform.OS === 'android'; - -export const ListWrapper = ({ - children, - rowsCount, - columnsCount = 1, -}: FlatListWrapperProps) => { - return ( - - {children} - - ); -}; - -/* - * Used instead of React.Fragment to avoid the warning: - * ...React.Fragment can only have `key` and `children` props. - */ -const EmptyComponent: React.FC = ({ - children, -}: React.PropsWithChildren<{}>) => { - return <>{children}; -}; - -const AMAFlatListWrapper = isAndroid - ? requireNativeComponent('AmaFlatListWrapper') - : EmptyComponent; diff --git a/packages/lists/src/components/StaticFlatList.tsx b/packages/lists/src/components/StaticFlatList.tsx index 19bb7b70..459c5982 100644 --- a/packages/lists/src/components/StaticFlatList.tsx +++ b/packages/lists/src/components/StaticFlatList.tsx @@ -1,8 +1,6 @@ import React from 'react'; import { FlatList, FlatListProps } from 'react-native'; -import { ListWrapper } from './ListWrapper'; - export type StaticFlatListProps = { rowsCount?: number; numColumns?: number; @@ -24,9 +22,5 @@ export const StaticFlatList = React.forwardRef< return Math.ceil(columns > 1 && length > 0 ? length / columns : length); }, [columns, data?.length, rowsCount]); - return ( - - - - ); + return ; }); diff --git a/packages/lists/src/index.ts b/packages/lists/src/index.ts index 0839c49a..56635e96 100644 --- a/packages/lists/src/index.ts +++ b/packages/lists/src/index.ts @@ -1,7 +1,6 @@ // Components export { DynamicFlatList } from './components/DynamicFlatList'; export { FlatList } from './components/FlatList'; -export { ListWrapper } from './components/ListWrapper'; export { StaticFlatList } from './components/StaticFlatList'; // Hooks