dohooo · dohooo · Oct 4, 2024 · Sep 23, 2024 · Sep 23, 2024 · Sep 24, 2024
diff --git a/.changeset/big-ligers-nail.md b/.changeset/big-ligers-nail.md
@@ -0,0 +1,5 @@
+---
+"react-native-reanimated-carousel": patch
+---
+
+feat: Add containerStyle prop to control the container styles.
diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml
@@ -53,12 +53,12 @@ jobs:
 
       - run: yarn install && yarn clean && yarn prepare
 
-      - run: cd ./example/expo && yarn install && yarn build:web
+      - run: cd ./example/app && yarn install && yarn build:web
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v2
         with:
-          path: './example/expo/web-build'
+          path: './example/app/dist'
 
       - name: Deploy to GitHub Pages
         id: deployment

diff --git a/example/app/.eslintrc b/example/app/.eslintrc
@@ -3,5 +3,5 @@
     "rules": {
         "@typescript-eslint/no-use-before-define": "off",
         "no-console": "off"
-    },
+    }
 }
diff --git a/example/app/.gitignore b/example/app/.gitignore
@@ -1,63 +1,44 @@
-# OSX
-#
-.DS_Store
-
-# VSCode
-.vscode/
-jsconfig.json
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
 
-# Xcode
-#
-build/
-*.pbxuser
-!default.pbxuser
-*.mode1v3
-!default.mode1v3
-*.mode2v3
-!default.mode2v3
-*.perspectivev3
-!default.perspectivev3
-xcuserdata
-*.xccheckout
-*.moved-aside
-DerivedData
-*.hmap
-*.ipa
-*.xcuserstate
-project.xcworkspace
-
-# Android/IJ
-#
-.idea
-.gradle
-local.properties
-android.iml
+# dependencies
+node_modules/
 
-# Cocoapods
-#
-exampleBare/ios/Pods
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
 
-# node.js
-#
-node_modules/
-scripts/gif-works-directory/*
-npm-debug.log
-yarn-debug.log
-yarn-error.log
-\.env
+# local env files
+.env*.local
 
-# BUCK
-buck-out/
-\.buckd/
-android/app/libs
-android/keystores/debug.keystore
+# typescript
+*.tsbuildinfo
 
-# Expo
-.expo/*
-web-build
+# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
+# The following patterns were generated by expo-cli
 
-# generated by bob
-lib/
+expo-env.d.ts
+# @end expo-cli
 
 # Yarn
 .yarn/*

diff --git a/...ins/@yarnpkg/plugin-interactive-tools.cjs → ...ins/@yarnpkg/plugin-interactive-tools.cjs b/...ins/@yarnpkg/plugin-interactive-tools.cjs → ...ins/@yarnpkg/plugin-interactive-tools.cjs
diff --git a/example/expo/.yarn/releases/yarn-3.6.1.cjs → example/app/.yarn/releases/yarn-3.6.1.cjs b/example/expo/.yarn/releases/yarn-3.6.1.cjs → example/app/.yarn/releases/yarn-3.6.1.cjs
diff --git a/example/app/app.json b/example/app/app.json
@@ -0,0 +1,35 @@
+{
+  "expo": {
+    "name": "app",
+    "slug": "app",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "myapp",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/images/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.react-native-reanimated-carousel.example"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "bundler": "metro",
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": ["expo-router", "expo-font"],
+    "experiments": {
+      "typedRoutes": true
+    }
+  }
+}
diff --git a/example/app/app/+html.tsx b/example/app/app/+html.tsx
@@ -0,0 +1,47 @@
+import { ScrollViewStyleReset } from "expo-router/html";
+import { WebProvider } from "@/store/WebProvider";
+import { MAX_WIDTH } from "@/constants/sizes";
+
+// This file is web-only and used to configure the root HTML for every
+// web page during static rendering.
+// The contents of this function only run in Node.js environments and
+// do not have access to the DOM or browser APIs.
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1"
+        />
+
+        {/*
+          Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
+          However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
+        */}
+        <ScrollViewStyleReset />
+
+        {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
+        <style
+          dangerouslySetInnerHTML={{
+            __html: viewportStyles,
+          }}
+        />
+
+        {/* Add any additional <head> elements that you want globally available on web... */}
+      </head>
+      <body>
+        <WebProvider>{children}</WebProvider>
+      </body>
+    </html>
+  );
+}
+
+const viewportStyles = `
+  html, body {
+    max-width: ${MAX_WIDTH}px;
+    margin: 0 auto;
+  }
+`;
diff --git a/example/app/app/+not-found.tsx b/example/app/app/+not-found.tsx
@@ -0,0 +1,39 @@
+import { Link, Stack as RouterStack } from "expo-router";
+import { StyleSheet } from "react-native";
+import { Stack, Text } from "tamagui";
+
+export default function NotFoundScreen() {
+  return (
+    <>
+      <RouterStack.Screen options={{ title: "Oops!" }} />
+      <Stack style={styles.container}>
+        <Text style={styles.title}>This screen doesn't exist.</Text>
+
+        <Link href="/" style={styles.link} replace>
+          <Text style={styles.linkText}>Go to home screen!</Text>
+        </Link>
+      </Stack>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 20,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "bold",
+  },
+  link: {
+    marginTop: 15,
+    paddingVertical: 15,
+  },
+  linkText: {
+    fontSize: 14,
+    color: "#2e78b7",
+  },
+});
diff --git a/example/app/app/_layout.tsx b/example/app/app/_layout.tsx
@@ -0,0 +1,131 @@
+import { useEffect, useState } from "react";
+import { I18nManager, View } from "react-native";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { TamaguiProvider } from "tamagui";
+import { tamaguiConfig } from "../tamagui.config";
+
+import FontAwesome from "@expo/vector-icons/FontAwesome";
+import { DefaultTheme, ThemeProvider } from "@react-navigation/native";
+import { useFonts } from "expo-font";
+import * as SplashScreen from "expo-splash-screen";
+import "react-native-reanimated";
+import Stack from "expo-router/stack";
+import { useWebContext } from "@/store/WebProvider";
+import { CaptureProvider } from "@/store/CaptureProvider";
+import { HeaderRight } from "@/components/HeaderRight";
+import { routes } from "./routes";
+import {
+  useGlobalSearchParams,
+  useLocalSearchParams,
+  useNavigation,
+  usePathname,
+} from "expo-router";
+import { useInDoc } from "@/hooks/useInDoc";
+import { IS_WEB } from "@/constants/platform";
+
+export {
+  // Catch any errors thrown by the Layout component.
+  ErrorBoundary,
+} from "expo-router";
+
+export const unstable_settings = {
+  initialRouteName: "index",
+};
+
+// Prevent the splash screen from auto-hiding before asset loading is complete.
+SplashScreen.preventAutoHideAsync();
+
+export default function RootLayout() {
+  const [loaded, error] = useFonts({
+    Inter: require("@tamagui/font-inter/otf/Inter-Medium.otf"),
+    InterBold: require("@tamagui/font-inter/otf/Inter-Bold.otf"),
+    SpaceMono: require("@/assets/fonts/SpaceMono-Regular.ttf"),
+    ...FontAwesome.font,
+  });
+
+  // Expo Router uses Error Boundaries to catch errors in the navigation tree.
+  useEffect(() => {
+    if (error) throw error;
+  }, [error]);
+
+  useEffect(() => {
+    if (loaded) SplashScreen.hideAsync();
+  }, [loaded]);
+
+  if (!loaded) return null;
+
+  return <RootLayoutNav />;
+}
+
+function RootLayoutNav() {
+  const webHeaderShown = !useWebContext()?.page;
+  const [isRTL, setIsRTL] = useState(I18nManager.isRTL);
+  const { inDoc } = useInDoc();
+
+  useEffect(() => {
+    if (IS_WEB && inDoc) {
+      window.addEventListener("load", () => {
+        const carouselComponent = document.getElementById("carousel-component");
+        if (carouselComponent) {
+          window.parent.postMessage(
+            {
+              type: "carouselHeight",
+              height: carouselComponent.offsetHeight,
+            },
+            "*",
+          );
+        }
+      });
+    }
+  }, [inDoc]);
+
+  return (
+    <TamaguiProvider
+      config={tamaguiConfig}
+      defaultTheme={inDoc ? "dark" : "light"}
+    >
+      <View style={{ flex: 1 }}>
+        <GestureHandlerRootView style={{ flex: 1 }}>
+          <ThemeProvider value={DefaultTheme}>
+            <CaptureProvider>
+              <Stack
+                initialRouteName="/"
+                screenOptions={{
+                  headerShown: !inDoc && webHeaderShown,
+                  contentStyle: {
+                    flex: 1,
+                    backgroundColor: inDoc
+                      ? tamaguiConfig.themes.dark.background.val
+                      : tamaguiConfig.themes.light.background.val,
+                  },
+                  headerRight: ({ tintColor }) => (
+                    <HeaderRight
+                      tintColor={tintColor}
+                      isRTL={isRTL}
+                      setIsRTL={setIsRTL}
+                    />
+                  ),
+                }}
+              >
+                <Stack.Screen name="index" />
+                {routes
+                  .flatMap((item) =>
+                    item.demos.map((demo) => ({ ...demo, kind: item.kind })),
+                  )
+                  .map((item) => (
+                    <Stack.Screen
+                      key={item.name}
+                      name={`demos/${item.kind}/${item.name}/index`}
+                      options={{
+                        title: item.title,
+                      }}
+                    />
+                  ))}
+              </Stack>
+            </CaptureProvider>
+          </ThemeProvider>
+        </GestureHandlerRootView>
+      </View>
+    </TamaguiProvider>
+  );
+}