fetching.js

import React, { useEffect, useState } from 'react'
import { View, Text, FlatList, StyleSheet, TouchableOpacity, Button, Image } from 'react-native'

import { SliderBox } from 'react-native-image-slider-box'

const fetchJson = async (url) => {
    const response = await fetch(url)
    const json = await response.json()
    //  data = await json
    console.log(json)
    return json
}

const HomeScreen = (props) => {
    console.log(props)

    const [dataSource, setDataSource] = useState()
    const [dataImage, setDataImage] = useState()

    const { navigate } = props.navigation;

    const images = [
        'https://source.unsplash.com/1024x768/?nature',
        'https://source.unsplash.com/1024x768/?water',
        'https://source.unsplash.com/1024x768/?girl',
        'https://source.unsplash.com/1024x768/?tree'
      ]

    useEffect(() => {
        const url = 'apiBanner'
        fetchJson(url).then((data) => setDataSource(data))
        fetchJson(url).then(({Id}) => setDataImage(Id))
        // setDataSource(fetchJson())

        console.log('DATA', dataSource)
    }, [])

    useEffect(() => {
        console.log('UPDATED DATA IS', dataSource)
        setDataImage(dataSource)
        console.log('Data Image', dataImage)
    }, [dataSource])

    
    return (
        <View>

            <Text>Home Screen</Text>
            
            {/* <SliderBox  images={dataImage} /> */}
            <FlatList
                showsHorizontalScrollIndicator={false}
                data={dataSource}
                renderItem={(item) => {
                    setDataImage(imageUrl)
                    const imageUrl = "api" + item.item.FolderName + "/" + item.item.FileName + "." + item.item.FileExtension
                    console.log(dataImage, item.index)
                    // if (item.item.isOffer === true)
                        return (
                            <TouchableOpacity style={styles.textStyle} onPress={() => navigate(item.link)}>
                                <Image source={{ uri: imageUrl }} style={{ width: 150, height: 150, }} />
                                {item.item.isOffer ? <Text style={{ position: "absolute" }}>{item.item.OfferNameEn}</Text> : null}
                            </TouchableOpacity>
                        )
                }}
                keyExtractor={({ id }) => id}
            />


        </View>
    )
}

const styles = StyleSheet.create({
    textStyle: {
        marginVertical: 10,
        marginLeft: 5,
        marginRight: 5,
        height: 130,
        backgroundColor: '#D2514F',
        borderRadius: 10,
    }
})

export default HomeScreen