Add banner to the Home screen

src/screens/home/index.tsx

@@ -8,6 +8,7 @@ import {
   Animated,
   Dimensions,
   Pressable,
+  Image,
 } from 'react-native';
 import Colors from '../../../assets/styles/Colors';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -27,26 +28,35 @@ type HomeScreenNavigationProp = NativeStackNavigationProp<
   '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} />;
 
 type RenderContentProps = {
   showDialog: () => void;
 };
 
-const RenderContent = ({showDialog}: RenderContentProps) => {
-  const navigation = useNavigation<HomeScreenNavigationProp>();
+const RenderBanner = () => {
+  const {width} = Dimensions.get('window');
+  const ITEM_WIDTH = width * 0.8;
+  const ITEM_SPACING = (width - ITEM_WIDTH) / 2;
+  const FIRST_ITEM_SPACING = 16;
   const scrollX = useRef(new Animated.Value(0)).current;
+  const data = [
+    {
+      id: '1',
+      image: require('../../../assets/images/banner01PengajuanPaspor.png'),
+    },
+    {
+      id: '2',
+      image: require('../../../assets/images/banner02Panduan.png'),
+    },
+    {
+      id: '3',
+      image: require('../../../assets/images/banner03EazyPassport.png'),
+    },
+  ];
 
   return (
     <>
-      <View style={styles.topContainer}>
       <Animated.FlatList
         data={data}
         keyExtractor={item => item.toString()}
@@ -62,7 +72,7 @@ const RenderContent = ({showDialog}: RenderContentProps) => {
           {useNativeDriver: true},
         )}
         scrollEventThrottle={16}
-          renderItem={({index}) => {
+        renderItem={({item, index}) => {
           const inputRange = [
             (index - 1) * ITEM_WIDTH,
             index * ITEM_WIDTH,
@@ -90,7 +100,11 @@ const RenderContent = ({showDialog}: RenderContentProps) => {
                   opacity,
                 },
               ]}>
-                <View style={styles.item} />
+              <Image
+                source={item.image}
+                style={styles.item}
+                resizeMode="cover"
+              />
             </Animated.View>
           );
         }}
@@ -129,7 +143,16 @@ const RenderContent = ({showDialog}: RenderContentProps) => {
           );
         })}
       </View>
-      </View>
+    </>
+  );
+};
+
+const RenderContent = ({showDialog}: RenderContentProps) => {
+  const navigation = useNavigation<HomeScreenNavigationProp>();
+
+  return (
+    <>
+      <View style={styles.topContainer}>{RenderBanner()}</View>
       <View style={styles.serviceContainer}>
         <Text style={styles.serviceText}>Layanan</Text>
         <View style={styles.serviceOptionWrapper}>
@@ -229,7 +252,7 @@ const RenderContent = ({showDialog}: RenderContentProps) => {
 };
 
 type HomeScreenProps = {
-  showDialog: () => void;
+  readonly showDialog: () => void;
 };
 
 function HomeScreen({showDialog}: HomeScreenProps) {