diff --git a/examples/bare/index.js b/examples/bare/index.js
index 1957efdd..ebf66c0f 100644
--- a/examples/bare/index.js
+++ b/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);
diff --git a/examples/bare/src/AppNavigator.tsx b/examples/bare/src/AppNavigator.tsx
index bfe4eab8..c865c450 100644
--- a/examples/bare/src/AppNavigator.tsx
+++ b/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;
 };
diff --git a/examples/expo/App.tsx b/examples/expo/App.tsx
index 90207b7e..0ac330d5 100644
--- a/examples/expo/App.tsx
+++ b/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>
   );
 }
diff --git a/examples/expo/index.js b/examples/expo/index.js
index 1d6e981e..bca59af1 100644
--- a/examples/expo/index.js
+++ b/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);
diff --git a/examples/expo/src/AppNavigation.tsx b/examples/expo/src/AppNavigation.tsx
index 6ffeca6d..1f3bc124 100644
--- a/examples/expo/src/AppNavigation.tsx
+++ b/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;
 };
diff --git a/examples/shared/index.ts b/examples/shared/index.ts
index 199219c8..b33f0757 100644
--- a/examples/shared/index.ts
+++ b/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';
diff --git a/examples/shared/src/assets/fox-1.jpg b/examples/shared/src/assets/fox-1.jpg
new file mode 100644
index 00000000..618b6482
Binary files /dev/null and b/examples/shared/src/assets/fox-1.jpg differ
diff --git a/examples/shared/src/assets/fox-2.jpg b/examples/shared/src/assets/fox-2.jpg
new file mode 100644
index 00000000..2809b15c
Binary files /dev/null and b/examples/shared/src/assets/fox-2.jpg differ
diff --git a/examples/shared/src/assets/fox-3.jpg b/examples/shared/src/assets/fox-3.jpg
new file mode 100644
index 00000000..d94dcf8a
Binary files /dev/null and b/examples/shared/src/assets/fox-3.jpg differ
diff --git a/examples/shared/src/assets/images.ts b/examples/shared/src/assets/images.ts
new file mode 100644
index 00000000..e3d4f9ec
--- /dev/null
+++ b/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');
diff --git a/examples/shared/src/screens/Carousel.screen.tsx b/examples/shared/src/screens/Carousel.screen.tsx
new file mode 100644
index 00000000..2273df1d
--- /dev/null
+++ b/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',
+  },
+});
diff --git a/examples/shared/src/screens/Home.screen.tsx b/examples/shared/src/screens/Home.screen.tsx
index 53d5d592..085a0292 100644
--- a/examples/shared/src/screens/Home.screen.tsx
+++ b/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" />
diff --git a/examples/shared/src/theme.ts b/examples/shared/src/theme.ts
index 41c7ac07..92bb51e0 100644
--- a/examples/shared/src/theme.ts
+++ b/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,
   },