Add Carousel to extras (#259)

* update name

* update useCarousel ref type

* export Carousel and useCarousel

* Make accessible on iOS

* fix type for useCarousel

* fix to work a Carousel

* remove onLayout

* remove unused import

* Added changesets

Author: JDMathew

.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

packages/extras/src/components/Carousel.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { FlatListProps } from 'react-native';
+import { FlatList } from 'react-native-gesture-handler';
+
+import { useCarousel } from '../hooks/useCarousel';
+
+function fixedForwardRef<T, P = {}>(
+  render: (props: P, ref: React.Ref<T>) => React.ReactNode,
+): (props: P & React.RefAttributes<T>) => React.ReactNode {
+  return React.forwardRef(render) as any;
+}
+
+export type CarouselProps<T = any> = Omit<
+  FlatListProps<T>,
+  | 'accessibilityLabel'
+  | 'accessibilityRole'
+  | 'accessibilityActions'
+  | 'onAccessibilityAction'
+> & {
+  accessibilityLabel: string;
+};
+
+const CarouselInner = <T,>(
+  props: CarouselProps<T>,
+  forwardedRef: React.ForwardedRef<FlatList<T>>,
+) => {
+  const a11yProps = useCarousel({
+    data: props.data,
+    flatListRef: forwardedRef,
+  });
+
+  return (
+    <FlatList
+      ref={forwardedRef}
+      showsHorizontalScrollIndicator={false}
+      showsVerticalScrollIndicator={false}
+      decelerationRate="fast"
+      horizontal
+      {...props}
+      {...a11yProps}
+    />
+  );
+};
+
+export const Carousel = fixedForwardRef(CarouselInner);

packages/extras/src/components/CarouselWrapper.tsx

@@ -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<any> | null | undefined;
-  flatListRef: React.ForwardedRef<FlatList<any> | null>;
+type UseCarousel<T> = {
+  data: ArrayLike<T> | null | undefined;
+  flatListRef: React.Ref<FlatList<T> | null>;
 };
 
-export const useCarousel = ({ data, flatListRef }: UseCarousel) => {
+export const useCarousel = <T = any>({ data, flatListRef }: UseCarousel<T>) => {
   const carouselIndexForScreenReader = useRef(0);
   const totalItems = data?.length || 0;
 
@@ -29,6 +30,7 @@ export const useCarousel = ({ data, flatListRef }: UseCarousel) => {
   };
 
   return {
+    accessible: true,
     accessibilityRole: 'adjustable' as AccessibilityRole,
     accessibilityActions,
     onAccessibilityAction,

packages/extras/src/hooks/useCarousel.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';