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) => {
      const postsFetched = json.body.results
      const finalPosts = postsFetched.map((item,index) => ({
        key: index,
        id: item.id,
        image: {uri:item.cover_image},
        author: item.author,
        headline: item.title
      }))
      setPosts(finalPosts)
      return postsFetched
    })
    .then((data) => {
      console.log(data[0].keys())
      return data
    })
    .catch((err) => console.log(err))
    .finally(() => console.log("Fetch Posts Executed"))
  }

  useConstructor(function(){
    const fetchPost = fetchPosts();
    console.log(fetchPost)
  })

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

export default RecentPostsSection

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