feat: added interpolation function and some examples

example/app.json

@@ -6,11 +6,12 @@
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
     "scheme": "example",
-    "userInterfaceStyle": "automatic",
+    "userInterfaceStyle": "dark",
     "newArchEnabled": true,
     "ios": {
       "supportsTablet": true,
-      "bundleIdentifier": "com.petrkonecny2.example"
+      "bundleIdentifier": "com.petrkonecny2.example",
+      "appleTeamId": "EAVQTDVRT7"
     },
     "android": {
       "adaptiveIcon": {

example/app/(examples)/_layout.tsx

@@ -0,0 +1,32 @@
+import { Stack } from 'expo-router'
+
+export default function ExamplesLayout() {
+  return (
+    <Stack screenOptions={{ contentStyle: { backgroundColor: 'transparent' } }}>
+      <Stack.Screen
+        name="index"
+        options={{
+          headerShown: false,
+        }}
+      />
+      <Stack.Screen
+        name="basic"
+        options={{
+          title: 'Basic Carousel',
+        }}
+      />
+      <Stack.Screen
+        name="animated"
+        options={{
+          title: 'Animated Carousel',
+        }}
+      />
+      <Stack.Screen
+        name="pagination"
+        options={{
+          title: 'Custom Pagination',
+        }}
+      />
+    </Stack>
+  )
+}

example/app/(examples)/animated.tsx

@@ -0,0 +1,3 @@
+import AnimatedExample from '@/examples/AnimatedExample'
+
+export default AnimatedExample

example/app/(examples)/basic.tsx

@@ -0,0 +1,3 @@
+import BasicExample from '@/examples/BasicExample'
+
+export default BasicExample

example/app/(examples)/index.tsx

@@ -0,0 +1,75 @@
+import { ThemedText } from '@/components/ThemedText'
+import { ThemedView } from '@/components/ThemedView'
+import { StyleSheet, TouchableOpacity, ScrollView } from 'react-native'
+import { Link } from 'expo-router'
+import { SafeAreaView } from 'react-native-safe-area-context'
+const examples = [
+  {
+    title: 'Basic Carousel',
+    description: 'A simple carousel with basic animations and pagination',
+    route: '/basic' as const,
+  },
+  {
+    title: 'Animated Carousel',
+    description: 'Advanced animations with custom transitions',
+    route: '/animated' as const,
+  },
+]
+
+export default function HomeScreen() {
+  return (
+    <SafeAreaView style={styles.container}>
+      <ThemedView style={styles.container}>
+        <ThemedText type="title" style={styles.title}>
+          Carousel Examples
+        </ThemedText>
+        <ThemedText type="subtitle" style={styles.subtitle}>
+          Select an example to view
+        </ThemedText>
+        <ScrollView style={styles.scrollView}>
+          {examples.map((example) => (
+            <Link key={example.route} href={example.route} asChild push>
+              <TouchableOpacity style={styles.card}>
+                <ThemedText style={styles.cardTitle}>{example.title}</ThemedText>
+                <ThemedText style={styles.cardDescription}>{example.description}</ThemedText>
+              </TouchableOpacity>
+            </Link>
+          ))}
+        </ScrollView>
+      </ThemedView>
+    </SafeAreaView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'black',
+  },
+  scrollView: {
+    flex: 1,
+    padding: 16,
+  },
+  title: {
+    textAlign: 'center',
+  },
+  subtitle: {
+    textAlign: 'center',
+    opacity: 0.7,
+  },
+  card: {
+    padding: 16,
+    borderRadius: 12,
+    marginBottom: 16,
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+  },
+  cardTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginBottom: 8,
+  },
+  cardDescription: {
+    fontSize: 14,
+    opacity: 0.7,
+  },
+})

example/app/+not-found.tsx

@@ -8,7 +8,7 @@ import { ThemedView } from '@/components/ThemedView'
 export default function NotFoundScreen() {
   return (
     <>
-      <Stack.Screen options={{ title: 'Oops!' }} />
+      <Stack.Screen options={{ title: 'Oops!', headerShown: false }} />
       <ThemedView style={styles.container}>
         <ThemedText type="title">This screen does not exist.</ThemedText>
         <Link href="/" style={styles.link}>

example/app/_layout.tsx

@@ -1,31 +1,19 @@
-import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'
-import { useFonts } from 'expo-font'
 import { Stack } from 'expo-router'
-import { StatusBar } from 'expo-status-bar'
-import 'react-native-reanimated'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
-import { useColorScheme } from '@/hooks/useColorScheme'
+import { initialWindowMetrics, SafeAreaProvider } from 'react-native-safe-area-context'
+import * as SystemUI from 'expo-system-ui'
+import { DarkTheme, ThemeProvider } from '@react-navigation/native'
 
-export default function RootLayout() {
-  const colorScheme = useColorScheme()
-  const [loaded] = useFonts({
-    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
-  })
-
-  if (!loaded) {
-    // Async font loading only occurs in development.
-    return null
-  }
+SystemUI.setBackgroundColorAsync('black')
 
+export default function RootLayout() {
   return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
-      <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-        <Stack>
-          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-          <Stack.Screen name="+not-found" />
-        </Stack>
-        <StatusBar style="auto" />
+    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+      <ThemeProvider value={DarkTheme}>
+        <GestureHandlerRootView style={{ flex: 1 }}>
+          <Stack screenOptions={{ headerShown: false }} />
+        </GestureHandlerRootView>
       </ThemeProvider>
-    </GestureHandlerRootView>
+    </SafeAreaProvider>
   )
 }