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

import { ScrollView, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import SectionHeader from '../Headers/SectionHeader'
import fonts from '../../../theme/fonts'
import VerticalNewsCard from '../Cards/VerticalNewsCard'

const RecentPostsSection = () => {

    const posts = [{},{},{},{},{}]
  return (
    <View style={styles.container}>
      <SectionHeader label={"Recents Posts"}/>
      <View style={styles.recentPostsContainer}>
        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
            {posts.map((item) => <VerticalNewsCard/>)}
        </ScrollView>
      </View>  
    </View>
  )
}

export default RecentPostsSection

const styles = StyleSheet.create({
    recentPostsContainer:{
        paddingHorizontal: fonts.getSize(16),
        gap: fonts.getSize(4),
        paddingBottom: fonts.getSize(16)
    }
})