From 75b55b32beb86eeb6cf6dbb54461c1ac28ab2b77 Mon Sep 17 00:00:00 2001 From: JDMathew Date: Thu, 19 Sep 2024 15:02:11 -0700 Subject: [PATCH 1/9] update name --- .../{CarouselWrapper.tsx => Carousel.tsx} | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) rename packages/extras/src/components/{CarouselWrapper.tsx => Carousel.tsx} (53%) diff --git a/packages/extras/src/components/CarouselWrapper.tsx b/packages/extras/src/components/Carousel.tsx similarity index 53% rename from packages/extras/src/components/CarouselWrapper.tsx rename to packages/extras/src/components/Carousel.tsx index c8c173ad..7009b8bc 100644 --- a/packages/extras/src/components/CarouselWrapper.tsx +++ b/packages/extras/src/components/Carousel.tsx @@ -4,7 +4,7 @@ import { FlatList } from 'react-native-gesture-handler'; import { useCarousel } from '../hooks/useCarousel'; -export type CarouselWrapperProps = Omit< +export type CarouselProps = Omit< FlatListProps, | 'accessibilityLabel' | 'accessibilityRole' @@ -14,14 +14,13 @@ export type CarouselWrapperProps = Omit< accessibilityLabel: string; }; -export const CarouselWrapper = React.forwardRef< - FlatList, - CarouselWrapperProps ->((props, forwardedRef) => { - const a11yProps = useCarousel({ - data: props.data, - flatListRef: forwardedRef, - }); +export const Carousel = React.forwardRef>( + (props, forwardedRef) => { + const a11yProps = useCarousel({ + data: props.data, + flatListRef: forwardedRef, + }); - return ; -}); + return ; + }, +); From 95ee57eb88aff8c988eb32c82d2ae6498a7d948d Mon Sep 17 00:00:00 2001 From: JDMathew Date: Thu, 19 Sep 2024 15:02:39 -0700 Subject: [PATCH 2/9] update useCarousel ref type --- packages/extras/src/hooks/useCarousel.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/extras/src/hooks/useCarousel.ts b/packages/extras/src/hooks/useCarousel.ts index 27ad9160..9da971f7 100644 --- a/packages/extras/src/hooks/useCarousel.ts +++ b/packages/extras/src/hooks/useCarousel.ts @@ -7,7 +7,7 @@ import { type UseCarousel = { data: ArrayLike | null | undefined; - flatListRef: React.ForwardedRef | null>; + flatListRef: React.Ref | null>; }; export const useCarousel = ({ data, flatListRef }: UseCarousel) => { From 5be48fa67cc6533f3afbf52ae6ec9222833a2e53 Mon Sep 17 00:00:00 2001 From: JDMathew Date: Thu, 19 Sep 2024 15:03:02 -0700 Subject: [PATCH 3/9] export Carousel and useCarousel --- packages/extras/src/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/extras/src/index.ts b/packages/extras/src/index.ts index ba74b5b5..3df64e63 100644 --- a/packages/extras/src/index.ts +++ b/packages/extras/src/index.ts @@ -1,6 +1,8 @@ // Components export { BottomSheet } from './components/BottomSheet'; +export { Carousel } from './components/Carousel'; // Hooks export { useBottomSheetGestureHandler } from './hooks/useBottomSheetGestureHandler'; export { useKeyboard } from './hooks/useKeyboard'; +export { useCarousel } from './hooks/useCarousel'; From f412b3322bfb80eb19103fa3be85078254835c8b Mon Sep 17 00:00:00 2001 From: JDMathew Date: Thu, 3 Oct 2024 23:12:43 -0700 Subject: [PATCH 4/9] Make accessible on iOS --- packages/extras/src/hooks/useCarousel.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/extras/src/hooks/useCarousel.ts b/packages/extras/src/hooks/useCarousel.ts index 9da971f7..46392380 100644 --- a/packages/extras/src/hooks/useCarousel.ts +++ b/packages/extras/src/hooks/useCarousel.ts @@ -29,6 +29,7 @@ export const useCarousel = ({ data, flatListRef }: UseCarousel) => { }; return { + accessible: true, accessibilityRole: 'adjustable' as AccessibilityRole, accessibilityActions, onAccessibilityAction, From 6929cdf569155fd691017448c780f38e0e9d9a18 Mon Sep 17 00:00:00 2001 From: JDMathew Date: Thu, 3 Oct 2024 23:13:22 -0700 Subject: [PATCH 5/9] fix type for useCarousel --- packages/extras/src/hooks/useCarousel.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/extras/src/hooks/useCarousel.ts b/packages/extras/src/hooks/useCarousel.ts index 46392380..2cac5bb9 100644 --- a/packages/extras/src/hooks/useCarousel.ts +++ b/packages/extras/src/hooks/useCarousel.ts @@ -1,16 +1,17 @@ import { useRef } from 'react'; +// import { FlatList } from 'react-native'; import { FlatList } from 'react-native-gesture-handler'; import { AccessibilityActionEvent, AccessibilityRole, } from 'react-native/types'; -type UseCarousel = { - data: ArrayLike | null | undefined; - flatListRef: React.Ref | null>; +type UseCarousel = { + data: ArrayLike | null | undefined; + flatListRef: React.Ref | null>; }; -export const useCarousel = ({ data, flatListRef }: UseCarousel) => { +export const useCarousel = ({ data, flatListRef }: UseCarousel) => { const carouselIndexForScreenReader = useRef(0); const totalItems = data?.length || 0; From c2b2a0e81f75c8709c5be3ee8e50184bd92e3efe Mon Sep 17 00:00:00 2001 From: JDMathew Date: Thu, 3 Oct 2024 23:15:21 -0700 Subject: [PATCH 6/9] fix to work a Carousel --- packages/extras/src/components/Carousel.tsx | 44 +++++++++++++++------ 1 file changed, 33 insertions(+), 11 deletions(-) diff --git a/packages/extras/src/components/Carousel.tsx b/packages/extras/src/components/Carousel.tsx index 7009b8bc..28390a97 100644 --- a/packages/extras/src/components/Carousel.tsx +++ b/packages/extras/src/components/Carousel.tsx @@ -1,10 +1,16 @@ import * as React from 'react'; -import { FlatListProps } from 'react-native'; +import { FlatListProps, LayoutChangeEvent } from 'react-native'; import { FlatList } from 'react-native-gesture-handler'; import { useCarousel } from '../hooks/useCarousel'; -export type CarouselProps = Omit< +function fixedForwardRef( + render: (props: P, ref: React.Ref) => React.ReactNode, +): (props: P & React.RefAttributes) => React.ReactNode { + return React.forwardRef(render) as any; +} + +export type CarouselProps = Omit< FlatListProps, | 'accessibilityLabel' | 'accessibilityRole' @@ -14,13 +20,29 @@ export type CarouselProps = Omit< accessibilityLabel: string; }; -export const Carousel = React.forwardRef>( - (props, forwardedRef) => { - const a11yProps = useCarousel({ - data: props.data, - flatListRef: forwardedRef, - }); +const CarouselInner = ( + props: CarouselProps, + forwardedRef: React.ForwardedRef>, +) => { + const a11yProps = useCarousel({ + data: props.data, + flatListRef: forwardedRef, + }); + + return ( + { + props?.onLayout?.(event); + }} + {...a11yProps} + /> + ); +}; - return ; - }, -); +export const Carousel = fixedForwardRef(CarouselInner); From 5bf4af81f6376bd2ca7fb905fa82beaec6766eac Mon Sep 17 00:00:00 2001 From: JDMathew Date: Thu, 3 Oct 2024 23:15:42 -0700 Subject: [PATCH 7/9] remove onLayout --- packages/extras/src/components/Carousel.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/extras/src/components/Carousel.tsx b/packages/extras/src/components/Carousel.tsx index 28390a97..598ce597 100644 --- a/packages/extras/src/components/Carousel.tsx +++ b/packages/extras/src/components/Carousel.tsx @@ -37,9 +37,6 @@ const CarouselInner = ( decelerationRate="fast" horizontal {...props} - onLayout={(event: LayoutChangeEvent) => { - props?.onLayout?.(event); - }} {...a11yProps} /> ); From 8348cf81031c3304cb22a214bb944667a934204a Mon Sep 17 00:00:00 2001 From: JDMathew Date: Thu, 3 Oct 2024 23:17:55 -0700 Subject: [PATCH 8/9] remove unused import --- packages/extras/src/components/Carousel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/extras/src/components/Carousel.tsx b/packages/extras/src/components/Carousel.tsx index 598ce597..3402d091 100644 --- a/packages/extras/src/components/Carousel.tsx +++ b/packages/extras/src/components/Carousel.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { FlatListProps, LayoutChangeEvent } from 'react-native'; +import { FlatListProps } from 'react-native'; import { FlatList } from 'react-native-gesture-handler'; import { useCarousel } from '../hooks/useCarousel'; From e0e252ae55cac2247c9e1bf0a084d6be71eb6bb8 Mon Sep 17 00:00:00 2001 From: JDMathew Date: Thu, 3 Oct 2024 23:29:15 -0700 Subject: [PATCH 9/9] Added changesets --- .changeset/breezy-suns-compare.md | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 .changeset/breezy-suns-compare.md diff --git a/.changeset/breezy-suns-compare.md b/.changeset/breezy-suns-compare.md new file mode 100644 index 00000000..5de58970 --- /dev/null +++ b/.changeset/breezy-suns-compare.md @@ -0,0 +1,11 @@ +--- +'@react-native-ama/internal': minor +'@react-native-ama/extras': minor +'@react-native-ama/forms': minor +'@react-native-ama/animations': minor +'@react-native-ama/core': minor +'@react-native-ama/lists': minor +'@react-native-ama/react-native': minor +--- + +Added Carousel and useCarousel to extras package