React-Nav-Melon/components/organisms/Sections/RecentNewsSection.js

import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import React from 'react'
import fonts from '../../../theme/fonts'
import colors from '../../../theme/colors'
import ImageBGCard from '../Cards/ImageBGCard'
import images from '../../../assets/images/images'
import SectionHeader from '../Headers/SectionHeader'
import metrics from '../../../theme/metrics'
import Carousel from 'react-native-reanimated-carousel';
import MaterialComIcon from 'react-native-vector-icons/MaterialCommunityIcons'


const ITEM_WIDTH = Math.round(metrics.screenWidth * 0.9);
const ITEM_HEIGHT = Math.round(ITEM_WIDTH * 3 / 4);
const entries = [...new Array(6).keys()]

const RecentNewsSection = () => {

  const [currentCardIndex, setCurrentCardIndex] = React.useState(0)
  const updateCurrentIndex = (index) => {
    console.log('current index:', index)
    setCurrentCardIndex(index)
  }
  return (
    <View>
      <SectionHeader label={"Recent News"} />
      <View style={styles.recentCardContainer}>
        <Carousel
          loop
          width={metrics.screenWidth}
          height={ITEM_HEIGHT}
          style={styles.recentCardContainer}
          autoPlay={true}
          data={entries}
          scrollAnimationDuration={1000}
          mode="parallax"
          modeConfig={{
            parallaxScrollingScale: 1,
            parallaxScrollingOffset: 1,
          }}
          onSnapToItem={(index) => updateCurrentIndex(index)}
          renderItem={({ index }) => (
            <View style={{ paddingHorizontal: 16 }}>
              <ImageBGCard
                image={images.imageCard}
                author={"Ryan Browne"}
                headline={`Shadow Wizard Money Gang We love casting Spells ${index}`}
              />
            </View>

          )}
        />
       
      </View>
      <View style={styles.paginationContainer}>
        {entries.map((item) => {
          const index = entries.indexOf(item)
          return <MaterialComIcon name={"checkbox-blank-circle"} color={currentCardIndex === index ? colors.tertiaryColor: colors.lightGray} size={12} />
        })}
      </View>
    </View>
  )
}

export default RecentNewsSection

const styles = StyleSheet.create({
  recentHeader: {
    paddingHorizontal: 16,
  },
  recentHeaderText: {
    fontFamily: fonts.type.semibold,
    fontSize: fonts.getSize(16),
    color: colors.black
  },
  seeAllText: {
    fontFamily: fonts.type.semibold,
    color: colors.topColor,
    paddingRight: 16,
    alignSelf: 'stretch'

  },
  recentHeaderIcon: {

  },
  recentCardContainer: {
    alignItems: 'center',
    paddingHorizontal: 8
  },
  paginationContainer:{
    justifyContent:'flex-end',
    alignItems:'center',
    paddingHorizontal: 16,
    paddingTop:8,
    paddingBottom:4,
    flexDirection:'row',
    gap:2}
})