Adds carousel example to example to Apps (#263)

* fix GestureHandlerRootView issue on Android

* Add fox assets

* fix react-native-gesture-handler issue on ios

* fix linting

* Add Carousel shared example

* Add Carousel to expo example home screen

* update font size

* Add Carousel to the expo app

* Add Carousel example to the bare app

* update carousel example

examples/bare/index.js

@@ -1,7 +1,8 @@
 import 'react-native-gesture-handler';
 
-import {AppRegistry} from 'react-native';
+import { AppRegistry } from 'react-native';
+
+import { name as appName } from './app.json';
 import App from './src/App';
-import {name as appName} from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);

examples/bare/src/AppNavigator.tsx

@@ -1,6 +1,7 @@
 import {
   BackButton,
   BottomSheetScreen,
+  CarouselScreen,
   ExpandablePressableScreen,
   FlatListDynamicScreen,
   FlatListScreen,
@@ -186,6 +187,14 @@ export const AppNavigator = () => {
             headerTitle: () => <Header title={'BottomSheet Demo'} autofocus />,
           }}
         />
+        <Stack.Screen
+          name="Carousel"
+          component={CarouselScreen}
+          options={{
+            headerLeft: () => <BackButton />,
+            headerTitle: () => <Header title={'Carousel Demo'} autofocus />,
+          }}
+        />
         <Stack.Screen
           name="UseTimedAction"
           component={UseTimedActionScreen}
@@ -235,6 +244,7 @@ type StackParamList = {
   FlatListDynamic: undefined;
   FlatListStatic: undefined;
   BottomSheet: undefined;
+  Carousel: undefined;
   UseTimedAction: undefined;
   UseAMAContext: undefined;
 };

examples/expo/App.tsx

@@ -1,16 +1,17 @@
-import 'react-native-gesture-handler';
-
 import { AMAProvider } from '@react-native-ama/core';
 import { StatusBar } from 'expo-status-bar';
 import React from 'react';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 import { AppNavigator } from './src/AppNavigation';
 
 export default function App() {
   return (
-    <AMAProvider>
-      <StatusBar style="auto" />
-      <AppNavigator />
-    </AMAProvider>
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <AMAProvider>
+        <StatusBar style="auto" />
+        <AppNavigator />
+      </AMAProvider>
+    </GestureHandlerRootView>
   );
 }

examples/expo/index.js

@@ -1,5 +1,7 @@
 import { registerRootComponent } from 'expo';
 
+import 'react-native-gesture-handler';
+
 import App from './App';
 
 // registerRootComponent calls AppRegistry.registerComponent('main', () => App);

examples/expo/src/AppNavigation.tsx

@@ -1,6 +1,7 @@
 import {
   BackButton,
   BottomSheetScreen,
+  CarouselScreen,
   ExpandablePressableScreen,
   FlatListDynamicScreen,
   FlatListScreen,
@@ -186,6 +187,14 @@ export const AppNavigator = () => {
             headerTitle: () => <Header title={'BottomSheet Demo'} autofocus />,
           }}
         />
+        <Stack.Screen
+          name="Carousel"
+          component={CarouselScreen}
+          options={{
+            headerLeft: () => <BackButton />,
+            headerTitle: () => <Header title={'Carousel Demo'} autofocus />,
+          }}
+        />
         <Stack.Screen
           name="UseTimedAction"
           component={UseTimedActionScreen}
@@ -235,6 +244,7 @@ type StackParamList = {
   FlatListDynamic: undefined;
   FlatListStatic: undefined;
   BottomSheet: undefined;
+  Carousel: undefined;
   UseTimedAction: undefined;
   UseAMAContext: undefined;
 };

examples/shared/index.ts

@@ -7,6 +7,7 @@ export { Header } from './src/components/Header';
 export { Spacer } from './src/components/Spacer';
 
 // Screens
+export { CarouselScreen } from './src/screens/Carousel.screen';
 export { BottomSheetScreen } from './src/screens/BottomSheet.screen';
 export { ExpandablePressableScreen } from './src/screens/ExpandablePressableScreen';
 export { FlatListScreen } from './src/screens/FlatList.screen';

examples/shared/src/assets/images.ts

@@ -0,0 +1,5 @@
+import { ImageRequireSource } from 'react-native';
+
+export const fox_1: ImageRequireSource = require('./fox-1.jpg');
+export const fox_2: ImageRequireSource = require('./fox-2.jpg');
+export const fox_3: ImageRequireSource = require('./fox-3.jpg');

examples/shared/src/screens/Carousel.screen.tsx

@@ -0,0 +1,90 @@
+import { Carousel } from '@react-native-ama/extras';
+import * as React from 'react';
+import {
+  Image,
+  ListRenderItem,
+  Platform,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  View,
+  useWindowDimensions,
+} from 'react-native';
+import { FlatList } from 'react-native-gesture-handler';
+
+import { fox_1, fox_2, fox_3 } from '../assets/images';
+import { theme } from '../theme';
+
+type Data = (typeof data)[number];
+
+const isAndroid = Platform.OS === 'android';
+
+const ITEM_SEPARATOR_WIDTH = 24;
+const IMAGE_WIDTH = 220;
+
+const data = [
+  { key: '1', image: fox_1 },
+  { key: '2', image: fox_2 },
+  { key: '3', image: fox_3 },
+];
+
+const renderItem: ListRenderItem<Data> = ({ item }) => {
+  return <Image source={item.image} resizeMode="cover" style={styles.image} />;
+};
+
+export const CarouselScreen = () => {
+  const ref = React.useRef<FlatList<Data>>(null);
+  const { width } = useWindowDimensions();
+
+  const snapToOffsets = data.reduce((acc, _, index) => {
+    if (index === 0) {
+      return [...acc, 0];
+    } else if (index === 1) {
+      return [
+        ...acc,
+        IMAGE_WIDTH + 2 * ITEM_SEPARATOR_WIDTH - (width - IMAGE_WIDTH) / 2,
+      ];
+    } else {
+      return [
+        ...acc,
+        acc?.[acc.length - 1] + IMAGE_WIDTH + ITEM_SEPARATOR_WIDTH,
+      ];
+    }
+  }, [] as number[]);
+  return (
+    <SafeAreaView style={styles.wrapper}>
+      <Carousel
+        ref={ref}
+        accessibilityLabel="Carousel of foxes"
+        snapToOffsets={snapToOffsets}
+        data={data}
+        renderItem={renderItem}
+        ItemSeparatorComponent={ItemSeparator}
+      />
+      <Text style={styles.text}>{`The Carousel above is fully accessible, use ${
+        isAndroid ? 'TalkBack on Android' : 'VoiceOver on iOS'
+      } to interact with it.`}</Text>
+    </SafeAreaView>
+  );
+};
+
+const ItemSeparator: React.FC = () => (
+  <View style={{ width: ITEM_SEPARATOR_WIDTH }} />
+);
+
+const styles = StyleSheet.create({
+  wrapper: {
+    paddingHorizontal: theme.padding.big,
+    marginTop: theme.padding.big,
+  },
+  image: {
+    width: IMAGE_WIDTH,
+    height: 300,
+    borderRadius: 6,
+  },
+  text: {
+    marginTop: theme.padding.normal,
+    fontSize: theme.fontSize.normal,
+    textAlign: 'center',
+  },
+});

examples/shared/src/screens/Home.screen.tsx

@@ -53,6 +53,11 @@ export const HomeScreen = ({ navigation }) => {
           onPress={() => navigate('BottomSheet')}
         />
 
+        {/**/}
+        <Spacer height={'normal'} />
+
+        <CTAPressable title="Carousel" onPress={() => navigate('Carousel')} />
+
         {/* */}
         <Spacer height={'big'} />
         <Header title="Hooks" />

examples/shared/src/theme.ts

@@ -5,7 +5,8 @@ export const theme = {
     big: 24,
   },
   fontSize: {
-    normal: 12,
+    small: 12,
+    normal: 15,
     medium: 18,
     big: 24,
   },