chore: introduce compound pattern

Author: Petr Konecny

example/examples/AnimatedExample.tsx

@@ -3,7 +3,6 @@ import {
   interpolateInsideCarousel,
   useCarouselContext,
   useAutoCarouselSlideIndex,
-  CarouselContextProvider,
 } from '@strv/react-native-hero-carousel'
 import { SafeAreaView, StyleSheet, View, Text, Dimensions } from 'react-native'
 import { Image } from 'expo-image'
@@ -75,7 +74,7 @@ export default function AnimatedExample() {
   }, [])
 
   return (
-    <CarouselContextProvider>
+    <HeroCarousel.Provider>
       <SafeAreaView style={styles.container}>
         <View style={styles.carouselContainer}>
           <HeroCarousel>
@@ -88,7 +87,7 @@ export default function AnimatedExample() {
           <Pagination total={images.length} />
         </View>
       </SafeAreaView>
-    </CarouselContextProvider>
+    </HeroCarousel.Provider>
   )
 }
 

example/examples/BasicExample.tsx

@@ -1,4 +1,4 @@
-import { HeroCarousel, CarouselContextProvider } from '@strv/react-native-hero-carousel'
+import { HeroCarousel } from '@strv/react-native-hero-carousel'
 import { SafeAreaView, StyleSheet, View, Text, Dimensions } from 'react-native'
 import { Image } from 'expo-image'
 import { LinearGradient } from 'expo-linear-gradient'
@@ -38,7 +38,7 @@ export default function BasicExample() {
   }, [])
 
   return (
-    <CarouselContextProvider>
+    <HeroCarousel.Provider>
       <SafeAreaView style={styles.container}>
         <View style={styles.container}>
           <HeroCarousel>
@@ -48,7 +48,7 @@ export default function BasicExample() {
           </HeroCarousel>
         </View>
       </SafeAreaView>
-    </CarouselContextProvider>
+    </HeroCarousel.Provider>
   )
 }
 

example/examples/EnteringAnimationExample.tsx

@@ -1,8 +1,4 @@
-import {
-  HeroCarousel,
-  CarouselContextProvider,
-  SlideAnimatedView,
-} from '@strv/react-native-hero-carousel'
+import { HeroCarousel } from '@strv/react-native-hero-carousel'
 import { SafeAreaView, StyleSheet, View, Text, Dimensions } from 'react-native'
 import { Image } from 'expo-image'
 import { LinearGradient } from 'expo-linear-gradient'
@@ -36,17 +32,17 @@ const Slide = ({ image, title, index }: { image: string; title: string; index: n
       <Image source={{ uri: image }} style={styles.image} contentFit="cover" transition={200} />
       <LinearGradient colors={['transparent', 'rgba(0,0,0,0.8)']} style={styles.gradient}>
         <View style={styles.text}>
-          <SlideAnimatedView style={styles.textContainer} {...animationConfig}>
+          <HeroCarousel.AnimatedView style={styles.textContainer} {...animationConfig}>
             <Text style={styles.title}>{title}</Text>
-          </SlideAnimatedView>
-          <SlideAnimatedView
+          </HeroCarousel.AnimatedView>
+          <HeroCarousel.AnimatedView
             style={styles.textContainer}
             entering={FadeIn.duration(400).delay(200)}
           >
             <Text style={styles.subtitle}>
               Animation: {animationNames[index % animationNames.length]}
             </Text>
-          </SlideAnimatedView>
+          </HeroCarousel.AnimatedView>
         </View>
       </LinearGradient>
     </View>
@@ -60,7 +56,7 @@ export default function EnteringAnimationExample() {
   }, [])
 
   return (
-    <CarouselContextProvider>
+    <HeroCarousel.Provider>
       <SafeAreaView style={styles.container}>
         <View style={styles.container}>
           <HeroCarousel>
@@ -70,7 +66,7 @@ export default function EnteringAnimationExample() {
           </HeroCarousel>
         </View>
       </SafeAreaView>
-    </CarouselContextProvider>
+    </HeroCarousel.Provider>
   )
 }
 

example/examples/TimerPaginationExample.tsx

@@ -1,8 +1,4 @@
-import {
-  HeroCarousel,
-  CarouselContextProvider,
-  useAutoCarouselSlideIndex,
-} from '@strv/react-native-hero-carousel'
+import { HeroCarousel, useAutoCarouselSlideIndex } from '@strv/react-native-hero-carousel'
 import { SafeAreaView, StyleSheet, View, Text, Dimensions } from 'react-native'
 import { Image } from 'expo-image'
 import { LinearGradient } from 'expo-linear-gradient'
@@ -63,7 +59,7 @@ export default function TimerPaginationExample() {
   }
 
   return (
-    <CarouselContextProvider interval={getInterval}>
+    <HeroCarousel.Provider interval={getInterval}>
       <SafeAreaView style={styles.container}>
         <View style={styles.container}>
           <HeroCarousel>
@@ -80,7 +76,7 @@ export default function TimerPaginationExample() {
           <TimerPagination total={images.length} hideProgressOnInteraction />
         </View>
       </SafeAreaView>
-    </CarouselContextProvider>
+    </HeroCarousel.Provider>
   )
 }
 

example/examples/VideoCarouselExample.tsx

@@ -1,8 +1,4 @@
-import {
-  HeroCarousel,
-  CarouselContextProvider,
-  useAutoCarouselSlideIndex,
-} from '@strv/react-native-hero-carousel'
+import { HeroCarousel, useAutoCarouselSlideIndex } from '@strv/react-native-hero-carousel'
 import { SafeAreaView, StyleSheet, View, Text, Pressable, Dimensions, Platform } from 'react-native'
 import { useVideoPlayer, VideoView } from 'expo-video'
 import { LinearGradient } from 'expo-linear-gradient'
@@ -89,7 +85,7 @@ const Slide = ({ videoUri, title, index }: { videoUri: string; title: string; in
 
 export default function VideoCarouselExample() {
   return (
-    <CarouselContextProvider disableAutoScroll={true}>
+    <HeroCarousel.Provider disableAutoScroll={true}>
       <SafeAreaView style={styles.container}>
         <View style={styles.container}>
           <HeroCarousel>
@@ -100,7 +96,7 @@ export default function VideoCarouselExample() {
           <TimerPagination total={videos.length} hideProgressOnInteraction={false} />
         </View>
       </SafeAreaView>
-    </CarouselContextProvider>
+    </HeroCarousel.Provider>
   )
 }
 

example/examples/components/CarouselBase.tsx

@@ -1,23 +1,19 @@
-import {
-  HeroCarousel,
-  HeroCarouselProps,
-  CarouselContextProvider,
-} from '@strv/react-native-hero-carousel'
+import { HeroCarousel, HeroCarouselProps } from '@strv/react-native-hero-carousel'
 import { SafeAreaView, StyleSheet, View } from 'react-native'
 import { Stack } from 'expo-router'
 import { Pagination } from '@/examples/components/Pagination'
 
 export function CarouselBase({ children }: { children: HeroCarouselProps['children'] }) {
   return (
-    <CarouselContextProvider>
+    <HeroCarousel.Provider>
       <Stack.Screen options={{ title: 'Animated Carousel' }} />
       <SafeAreaView style={styles.container}>
         <View style={styles.container}>
           <HeroCarousel>{children}</HeroCarousel>
           <Pagination total={children.length} />
         </View>
       </SafeAreaView>
-    </CarouselContextProvider>
+    </HeroCarousel.Provider>
   )
 }
 

src/components/HeroCarousel/index.tsx

@@ -1,17 +1,18 @@
 import React from 'react'
 
-import { useCarouselContext } from '../../context/CarouselContext'
+import { CarouselContextProvider, useCarouselContext } from '../../context/CarouselContext'
 import { HeroCarouselSlide } from '../HeroCarouselSlide'
 import { HeroCarouselAdapter } from '../AnimatedPagedView/Adapter'
 import { useAutoScroll } from '../../hooks/useAutoScroll'
 import { useInfiniteScroll } from '../../hooks/useInfiniteScroll'
 import { DEFAULT_INTERVAL } from './index.preset'
+import { SlideAnimatedView } from 'components/SlideAnimatedView'
 
 export type HeroCarouselProps = {
   children: React.ReactNode[]
 }
 
-export const HeroCarousel = ({ children }: HeroCarouselProps) => {
+const HeroCarousel = ({ children }: HeroCarouselProps) => {
   const {
     scrollValue,
     userInteracted,
@@ -72,3 +73,9 @@ export const HeroCarousel = ({ children }: HeroCarouselProps) => {
     </>
   )
 }
+
+HeroCarousel.AnimatedView = SlideAnimatedView
+HeroCarousel.Provider = CarouselContextProvider
+HeroCarousel.Item = HeroCarouselSlide
+
+export { HeroCarousel }

src/components/HeroCarouselSlide/index.tsx

@@ -1,5 +1,5 @@
 import { View } from 'react-native'
-import { AutoCarouselSlideContext } from '../../context/SlideContext'
+import { HeroCarouselSlideContext } from '../../context/SlideContext'
 import { useAutoScroll } from '../../hooks/useAutoScroll'
 import { useMemo } from 'react'
 import { useManualScroll } from '../../hooks/useManualScroll'
@@ -21,14 +21,14 @@ export const HeroCarouselSlide = ({
 }) => {
   return (
     <View style={{ flex: 1, width, minWidth: width }}>
-      <AutoCarouselSlideContext.Provider
+      <HeroCarouselSlideContext.Provider
         value={useMemo(
           () => ({ index, total, runAutoScroll, goToPage }),
           [index, total, runAutoScroll, goToPage],
         )}
       >
         {children}
-      </AutoCarouselSlideContext.Provider>
+      </HeroCarouselSlideContext.Provider>
     </View>
   )
 }

src/components/index.ts

@@ -1,2 +1 @@
-export * from './HeroCarousel'
-export * from './SlideAnimatedView'
+export { HeroCarousel, HeroCarouselProps } from './HeroCarousel'

src/context/SlideContext/index.tsx

@@ -2,15 +2,15 @@ import { createContext, useContext } from 'react'
 import { useAutoScroll } from '../../hooks/useAutoScroll'
 import { useManualScroll } from '../../hooks/useManualScroll'
 
-export const AutoCarouselSlideContext = createContext<{
+export const HeroCarouselSlideContext = createContext<{
   index: number
   total: number
   runAutoScroll: ReturnType<typeof useAutoScroll>['runAutoScroll']
   goToPage: ReturnType<typeof useManualScroll>['goToPage']
 } | null>(null)
 
 export const useAutoCarouselSlideIndex = () => {
-  const context = useContext(AutoCarouselSlideContext)
+  const context = useContext(HeroCarouselSlideContext)
   if (!context) {
     throw new Error('useAutoCarouselSlideIndex must be used within a AutoCarouselSlide')
   }