fix: improved first example design

Author: Petr Konecny

example/app/(tabs)/index.tsx

@@ -1,47 +1,66 @@
 import { ThemedText } from '@/components/ThemedText'
 import { ThemedView } from '@/components/ThemedView'
 import { AutoCarousel } from '@strv/react-native-hero-carousel'
-import { SafeAreaView } from 'react-native'
+import { SafeAreaView, StyleSheet, Dimensions } from 'react-native'
+import { Image } from 'expo-image'
+import { LinearGradient } from 'expo-linear-gradient'
+
+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)}`
+}
+
+const images = Array.from({ length: 5 }, getRandomImageUrl)
+
 export default function HomeScreen() {
   return (
-    <SafeAreaView style={{ flex: 1 }}>
-      <ThemedView style={{ flex: 1 }}>
+    <SafeAreaView style={styles.container}>
+      <ThemedView style={styles.container}>
         <AutoCarousel>
-          <ThemedView
-            style={{
-              flex: 1,
-              backgroundColor: 'red',
-              maxHeight: 200,
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <ThemedText type="title">Slide 1</ThemedText>
-          </ThemedView>
-          <ThemedView
-            style={{
-              flex: 1,
-              backgroundColor: 'blue',
-              maxHeight: 200,
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <ThemedText type="title">Slide 2</ThemedText>
-          </ThemedView>
-          <ThemedView
-            style={{
-              flex: 1,
-              backgroundColor: 'green',
-              maxHeight: 200,
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <ThemedText type="title">Slide 3</ThemedText>
-          </ThemedView>
+          {images.map((image, index) => (
+            <ThemedView key={index} style={styles.slide}>
+              <Image source={{ uri: image }} style={styles.image} contentFit="cover" />
+              <LinearGradient colors={['transparent', 'rgba(0,0,0,0.8)']} style={styles.gradient}>
+                <ThemedText style={styles.title}>Slide {index + 1}</ThemedText>
+              </LinearGradient>
+            </ThemedView>
+          ))}
         </AutoCarousel>
       </ThemedView>
     </SafeAreaView>
   )
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  slide: {
+    flex: 1,
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT * 0.7,
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  gradient: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: '50%',
+    justifyContent: 'flex-end',
+    padding: 20,
+  },
+  title: {
+    fontSize: 32,
+    bottom: 100,
+    left: 20,
+    position: 'absolute',
+    lineHeight: 32,
+    fontWeight: 'bold',
+    color: 'white',
+  },
+})

example/package.json

@@ -20,6 +20,7 @@
     "expo-font": "~13.3.1",
     "expo-haptics": "~14.1.4",
     "expo-image": "~2.1.7",
+    "expo-linear-gradient": "^14.1.4",
     "expo-linking": "~7.1.5",
     "expo-router": "~5.0.6",
     "expo-splash-screen": "~0.30.8",
@@ -40,9 +41,9 @@
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@types/react": "~19.0.10",
-    "typescript": "~5.8.3",
     "eslint": "^9.25.0",
-    "eslint-config-expo": "~9.2.0"
+    "eslint-config-expo": "~9.2.0",
+    "typescript": "~5.8.3"
   },
   "private": true
 }