chore: introduce compound pattern for components (#25)

* chore: introduce compound pattern

* chore: updated docs

* chore: added helper hook for interpolated values

* chore: rename slide to item

---------

Co-authored-by: Petr Konecny <[email protected]>

Author: petrkonecny2

README.md

@@ -1,10 +1,4 @@
-import {
-  HeroCarousel,
-  interpolateInsideCarousel,
-  useCarouselContext,
-  useAutoCarouselSlideIndex,
-  CarouselContextProvider,
-} from '@strv/react-native-hero-carousel'
+import { HeroCarousel, useInterpolateInsideCarousel } 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'
@@ -24,17 +18,14 @@ const getRandomImageUrl = () => {
 const images = Array.from({ length: 5 }, getRandomImageUrl)
 
 const Slide = ({ image, title, index }: { image: string; title: string; index: number }) => {
-  const { scrollValue } = useCarouselContext()
-  const { index: slideIndex, total } = useAutoCarouselSlideIndex()
+  const progress = useInterpolateInsideCarousel({
+    valueBefore: 0,
+    thisValue: 1,
+    valueAfter: 0,
+    offset: 0.2,
+  })
 
   const rStyle = useAnimatedStyle(() => {
-    const progress = interpolateInsideCarousel(scrollValue.value, slideIndex, total, {
-      valueBefore: 0,
-      thisValue: 1,
-      valueAfter: 0,
-      offset: 0.2,
-    })
-
     return {
       flex: 1,
       width: '100%',
@@ -44,13 +35,13 @@ const Slide = ({ image, title, index }: { image: string; title: string; index: n
       transformOrigin: 'center',
       transform: [
         {
-          scale: interpolate(progress, [0, 1], [0.8, 1], Extrapolation.CLAMP),
+          scale: interpolate(progress.value, [0, 1], [0.8, 1], Extrapolation.CLAMP),
         },
         {
-          rotate: `${interpolate(progress, [0, 1], [-15, 0], Extrapolation.CLAMP)}deg`,
+          rotate: `${interpolate(progress.value, [0, 1], [-15, 0], Extrapolation.CLAMP)}deg`,
         },
       ],
-      opacity: progress,
+      opacity: progress.value,
     }
   })
 
@@ -75,7 +66,7 @@ export default function AnimatedExample() {
   }, [])
 
   return (
-    <CarouselContextProvider>
+    <HeroCarousel.Provider>
       <SafeAreaView style={styles.container}>
         <View style={styles.carouselContainer}>
           <HeroCarousel>
@@ -88,7 +79,7 @@ export default function AnimatedExample() {
           <Pagination total={images.length} />
         </View>
       </SafeAreaView>
-    </CarouselContextProvider>
+    </HeroCarousel.Provider>
   )
 }
 

example/components/Collapsible.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/components/ExternalLink.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/components/HapticTab.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>
   )
 }