chore: remove offset updated readme (#15)

* chore: remove offset example

* chore: better image quality

* chore: example image

* chore: updated readme

---------

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

Author: petrkonecny2

README.md

@@ -1,5 +1,10 @@
 # React Native Hero Carousel
 
+<div style="display: flex; flex-direction: row; gap: 10px;">
+<img src="docs/assets/carousel-demo.webp" alt="Carousel Demo" width="200">
+<img src="docs/assets/carousel-demo2.webp" alt="Video Carousel Demo" width="200">
+<img src="docs/assets/carousel-demo3.webp" alt="Other Carousel Demo" width="200">
+</div>
 A highly customizable, performant carousel component for React Native with advanced animations, auto-scrolling capabilities, and infinite scrolling support. Built with React Native Reanimated for smooth, native-level performance.
 
 **✨ Context-Based Configuration** - All carousel settings are configured through the context provider for a clean, centralized API.

docs/assets/carousel-demo.webp

@@ -14,11 +14,6 @@ const examples = [
     description: 'Advanced animations with custom transitions',
     route: '/animated' as const,
   },
-  {
-    title: 'Offset Carousel',
-    description: 'A carousel with offset animations',
-    route: '/offset' as const,
-  },
   {
     title: 'Entering Animation Carousel',
     description: 'Carousel with entering/exiting animations triggered by shared values',

docs/assets/carousel-demo2.webp

@@ -11,11 +11,14 @@ import { LinearGradient } from 'expo-linear-gradient'
 import Animated, { useAnimatedStyle, interpolate, Extrapolation } from 'react-native-reanimated'
 import { Pagination } from './components/Pagination'
 import { useEffect } from 'react'
+import { BlurView } from 'expo-blur'
 
 const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window')
 
 const getRandomImageUrl = () => {
-  return `https://picsum.photos/${SCREEN_WIDTH}/${SCREEN_HEIGHT}?random=${Math.floor(Math.random() * 1000)}`
+  return `https://picsum.photos/${SCREEN_WIDTH * 3}/${SCREEN_HEIGHT * 3}?random=${Math.floor(
+    Math.random() * 1000,
+  )}`
 }
 
 const images = Array.from({ length: 5 }, getRandomImageUrl)
@@ -54,10 +57,12 @@ const Slide = ({ image, title, index }: { image: string; title: string; index: n
   return (
     <View key={index} style={styles.slide}>
       <Animated.View style={rStyle}>
-        <Image source={{ uri: image }} style={styles.image} contentFit="cover" />
+        <Image source={{ uri: image }} style={styles.image} contentFit="cover" transition={200} />
       </Animated.View>
       <LinearGradient colors={['transparent', 'rgba(0,0,0,0.8)']} style={styles.gradient}>
-        <Text style={styles.title}>{title}</Text>
+        <BlurView style={styles.blurView} experimentalBlurMethod="dimezisBlurView">
+          <Text style={styles.title}>{title}</Text>
+        </BlurView>
       </LinearGradient>
     </View>
   )
@@ -72,12 +77,14 @@ export default function AnimatedExample() {
   return (
     <CarouselContextProvider>
       <SafeAreaView style={styles.container}>
-        <View style={styles.container}>
+        <View style={styles.carouselContainer}>
           <HeroCarousel>
             {images.map((image, index) => (
               <Slide key={index} image={image} title={`Slide ${index + 1}`} index={index} />
             ))}
           </HeroCarousel>
+        </View>
+        <View style={styles.paginationContainer}>
           <Pagination total={images.length} />
         </View>
       </SafeAreaView>
@@ -88,7 +95,26 @@ export default function AnimatedExample() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
+    backgroundColor: 'black',
+  },
+  carouselContainer: {
+    flex: 0.8,
+    borderRadius: 16,
+    overflow: 'hidden',
+    marginTop: 64,
+  },
+  paginationContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 0.2,
+  },
+  blurView: {
+    bottom: 40,
+    left: 20,
+    position: 'absolute',
+    borderRadius: 16,
+    padding: 20,
+    overflow: 'hidden',
   },
   slide: {
     flex: 1,
@@ -100,7 +126,8 @@ const styles = StyleSheet.create({
     width: '100%',
     height: '100%',
     transformOrigin: 'center',
-    transform: [{ scale: 1.6 }],
+    transform: [{ scale: 1.3 }],
+    backgroundColor: 'gray',
   },
   gradient: {
     position: 'absolute',
@@ -113,9 +140,6 @@ const styles = StyleSheet.create({
   },
   title: {
     fontSize: 32,
-    bottom: 100,
-    left: 20,
-    position: 'absolute',
     lineHeight: 32,
     fontWeight: 'bold',
     color: 'white',

docs/assets/carousel-demo3.webp

@@ -7,15 +7,23 @@ import { useEffect } from 'react'
 const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window')
 
 const getRandomImageUrl = () => {
-  return `https://picsum.photos/${SCREEN_WIDTH}/${SCREEN_HEIGHT}?random=${Math.floor(Math.random() * 1000)}`
+  return `https://picsum.photos/${SCREEN_WIDTH * 3}/${SCREEN_HEIGHT * 3}?random=${Math.floor(
+    Math.random() * 1000,
+  )}`
 }
 
 const images = Array.from({ length: 5 }, getRandomImageUrl)
 
 const Slide = ({ image, title, index }: { image: string; title: string; index: number }) => {
   return (
     <View key={index} style={styles.slide}>
-      <Image key={image} source={{ uri: image }} style={styles.image} contentFit="cover" />
+      <Image
+        key={image}
+        source={{ uri: image }}
+        style={styles.image}
+        contentFit="cover"
+        transition={200}
+      />
       <LinearGradient colors={['transparent', 'rgba(0,0,0,0.8)']} style={styles.gradient}>
         <Text style={styles.title}>{title}</Text>
       </LinearGradient>
@@ -77,5 +85,6 @@ const styles = StyleSheet.create({
     lineHeight: 32,
     fontWeight: 'bold',
     color: 'white',
+    opacity: 0.5,
   },
 })

example/app/(examples)/index.tsx

@@ -33,14 +33,21 @@ const Slide = ({ image, title, index }: { image: string; title: string; index: n
 
   return (
     <View key={index} style={styles.slide}>
-      <Image source={{ uri: image }} style={styles.image} contentFit="cover" />
+      <Image source={{ uri: image }} style={styles.image} contentFit="cover" transition={200} />
       <LinearGradient colors={['transparent', 'rgba(0,0,0,0.8)']} style={styles.gradient}>
-        <SlideAnimatedView style={styles.textContainer} {...animationConfig}>
-          <Text style={styles.title}>{title}</Text>
-          <Text style={styles.subtitle}>
-            Animation: {animationNames[index % animationNames.length]}
-          </Text>
-        </SlideAnimatedView>
+        <View style={styles.text}>
+          <SlideAnimatedView style={styles.textContainer} {...animationConfig}>
+            <Text style={styles.title}>{title}</Text>
+          </SlideAnimatedView>
+          <SlideAnimatedView
+            style={styles.textContainer}
+            entering={FadeIn.duration(400).delay(200)}
+          >
+            <Text style={styles.subtitle}>
+              Animation: {animationNames[index % animationNames.length]}
+            </Text>
+          </SlideAnimatedView>
+        </View>
       </LinearGradient>
     </View>
   )
@@ -96,23 +103,23 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-end',
     padding: 20,
   },
-  title: {
-    fontSize: 32,
+  text: {
+    flex: 1,
     bottom: 100,
     left: 20,
     position: 'absolute',
+    gap: 16,
+  },
+  title: {
+    fontSize: 32,
     lineHeight: 32,
     fontWeight: 'bold',
     color: 'white',
   },
   subtitle: {
     fontSize: 16,
-    bottom: 70,
-    left: 20,
-    position: 'absolute',
     lineHeight: 16,
     fontWeight: '500',
     color: 'white',
-    opacity: 0.8,
   },
 })