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'
import { useConstructor } from '../../../utils/Constants/functions'

const RecentPostsSection = () => {

  const [posts,setPosts] = React.useState([{},{},{},{},{}])

  const fetchPosts = () => {
    fetch("http://www.newscout.in/api/v1/article/search/?domain=newscout&category=Sector%20Updates")
    .then((res) => res.json())
    .then((json) => setPosts(json.body.results))
    .then(() => console.log(posts))
    .catch((err) => console.log(err))
    .finally(() => console.log("Fetch Posts Executed"))
  }

  useConstructor(function(){
    fetchPosts()
  })

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

export default RecentPostsSection

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