Add caraousel image slider and animation of 'See All' application status button at Home screen

src/screens/home/index.tsx

@@ -1,6 +1,14 @@
 import * as React from 'react';
 import styles from './styles';
-import {View, Text, StatusBar, FlatList} from 'react-native';
+import {
+  View,
+  Text,
+  StatusBar,
+  FlatList,
+  Animated,
+  Dimensions,
+  Pressable,
+} from 'react-native';
 import Colors from '../../../assets/styles/Colors';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {NativeStackNavigationProp} from '@react-navigation/native-stack';
@@ -12,20 +20,112 @@ import GuidebookIcon from '../../../assets/icons/guidebook.svg';
 import EazyPassportIcon from '../../../assets/icons/eazy_passport.svg';
 import passportAppointmentData from '../../data/History/PassportAppointmentData';
 import PassportAppointmentCard from '../../components/PassportAppointmentCard';
+import {useRef} from 'react';
 
 type HomeScreenNavigationProp = NativeStackNavigationProp<
   RootStackParamList,
   'Home'
 >;
 
+const {width} = Dimensions.get('window');
+const ITEM_WIDTH = width * 0.8;
+const ITEM_SPACING = (width - ITEM_WIDTH) / 2;
+const FIRST_ITEM_SPACING = 16;
+
+const data = [1, 2, 3, 4];
+
 const ItemSeparator = () => <View style={styles.flatllistGap} />;
 
 const RenderContent = () => {
   const navigation = useNavigation<HomeScreenNavigationProp>();
+  const scrollX = useRef(new Animated.Value(0)).current;
 
   return (
     <>
-      <View style={styles.topContainer} />
+      <View style={styles.topContainer}>
+        <Animated.FlatList
+          data={data}
+          keyExtractor={item => item.toString()}
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          snapToInterval={ITEM_WIDTH}
+          decelerationRate="fast"
+          bounces={false}
+          ListHeaderComponent={<View style={{width: FIRST_ITEM_SPACING}} />}
+          ListFooterComponent={<View style={{width: ITEM_SPACING}} />}
+          onScroll={Animated.event(
+            [{nativeEvent: {contentOffset: {x: scrollX}}}],
+            {useNativeDriver: true},
+          )}
+          scrollEventThrottle={16}
+          renderItem={({index}) => {
+            const inputRange = [
+              (index - 1) * ITEM_WIDTH,
+              index * ITEM_WIDTH,
+              (index + 1) * ITEM_WIDTH,
+            ];
+
+            const scale = scrollX.interpolate({
+              inputRange,
+              outputRange: [0.875, 1, 0.875],
+              extrapolate: 'clamp',
+            });
+
+            const opacity = scrollX.interpolate({
+              inputRange,
+              outputRange: [0.5, 1, 0.5],
+              extrapolate: 'clamp',
+            });
+
+            return (
+              <Animated.View
+                style={[
+                  styles.itemContainer,
+                  {
+                    transform: [{scale}],
+                    opacity,
+                  },
+                ]}>
+                <View style={styles.item} />
+              </Animated.View>
+            );
+          }}
+        />
+        <View style={styles.indicatorContainer}>
+          {data.map((_, i) => {
+            const inputRange = [
+              (i - 1) * ITEM_WIDTH,
+              i * ITEM_WIDTH,
+              (i + 1) * ITEM_WIDTH,
+            ];
+
+            const dotOpacity = scrollX.interpolate({
+              inputRange,
+              outputRange: [0.3, 1, 0.3],
+              extrapolate: 'clamp',
+            });
+
+            const dotScale = scrollX.interpolate({
+              inputRange,
+              outputRange: [0.8, 1.2, 0.8],
+              extrapolate: 'clamp',
+            });
+
+            return (
+              <Animated.View
+                key={i}
+                style={[
+                  styles.indicatorInactive,
+                  {
+                    opacity: dotOpacity,
+                    transform: [{scale: dotScale}],
+                  },
+                ]}
+              />
+            );
+          })}
+        </View>
+      </View>
       <View style={styles.serviceContainer}>
         <Text style={styles.serviceText}>Layanan</Text>
         <View style={styles.serviceOptionWrapper}>
@@ -58,11 +158,13 @@ const RenderContent = () => {
       <View style={styles.applicationStatusContainer}>
         <View style={styles.applicationStatusTextWrapper}>
           <Text style={styles.applicationStatusTitle}>Status Permohonan</Text>
-          <Text
+          <Pressable
-            style={styles.applicationStatusSeeAll}
+            onPress={() => navigation.navigate('History')}
-            onPress={() => navigation.navigate('History')}>
+            style={({pressed}) => ({
-            Lihat semua
+              transform: [{scale: pressed ? 0.925 : 1}],
-          </Text>
+            })}>
+            <Text style={styles.applicationStatusSeeAll}>Lihat semua</Text>
+          </Pressable>
         </View>
         <View style={styles.cardWrapper}>
           <FlatList

src/screens/home/styles.tsx

@@ -1,7 +1,10 @@
-import {StyleSheet} from 'react-native';
+import {Dimensions, StyleSheet} from 'react-native';
 import Colors from '../../../assets/styles/Colors';
 import FontFamily from '../../../assets/styles/FontFamily';
 
+const {width} = Dimensions.get('window');
+const ITEM_WIDTH = width * 0.8;
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -26,6 +29,16 @@ const styles = StyleSheet.create({
     height: 245,
     alignItems: 'center',
   },
+  itemContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  item: {
+    width: ITEM_WIDTH,
+    height: 200,
+    borderRadius: 20,
+    backgroundColor: Colors.secondary70.color,
+  },
   serviceContainer: {
     marginVertical: 12,
     marginHorizontal: 16,
@@ -83,6 +96,19 @@ const styles = StyleSheet.create({
   flatllistGap: {
     height: 8,
   },
+  indicatorContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginTop: 4,
+    marginBottom: 12,
+  },
+  indicatorInactive: {
+    height: 8,
+    width: 8,
+    borderRadius: 4,
+    backgroundColor: Colors.neutral100.color,
+    marginHorizontal: 4,
+  },
 });
 
 export default styles;