Whenever my app makes a fetch request the clickable components of my app don't work

For example whenever my app is loading an image of a url, you can’t click a button, it doesn’t work, it only works when you finish loading the image of the url, the same happens with fetch when I try to get anything from my api.

I’ve already created several apps and the same thing happens

What should I do? Why is this happening?

Here is the sample code. In the flatlist I load a list containing images


/* This is an Login Registration example from https://aboutreact.com/ */
/* https://aboutreact.com/react-native-login-and-signup/ */

import React, { useState, useEffect } from 'react';

import {
    ActivityIndicator,
    View,
    StyleSheet,
    Text,
    StatusBar,
    Linking,
    Image,
    FlatList,
    TouchableOpacity,
    SafeAreaView,
    Alert, TouchableNativeFeedback, RefreshControl
} from 'react-native';

import AsyncStorage from '@react-native-community/async-storage';
import Cores from '../wapangola/Cores';
import {Button, Header, Icon, Badge} from 'react-native-elements';
import estilo from '../wapangola/Styles';
import Request, {ERROR_TYPE, VIEW_STATE} from '../wapangola/CustomRequest';
import Config from '../wapangola/Config';
import CustomError from '../wapangola/CustomError';
import Menu, { MenuItem, MenuDivider } from 'react-native-material-menu';
import {RandomNum, TerminarSessao} from '../wapangola/Utils';
import Loader from '../wapangola/Loader';
import PublicacaoItem from "../app/PublicacaoItem";
import EventBus from "react-native-event-bus";
import {NOTI_ACTION, WapEvents} from "../wapangola/WapEvents";
import PushNotification from "react-native-push-notification";
import RNFetchBlob from "rn-fetch-blob";


function MostraData(props) {


    const renderSeparator = () => {
        return (
            <View
                style={{
                    height: 0,
                    width: "80%",
                    alignSelf:'flex-end',
                    backgroundColor: "#eee",
                }}
            />
        );
    };

    const renderFooter = () => {
        return (
            <>


                <View>

                    { props.loadMore === true ?

                    <View
                        style={{
                            paddingVertical: 20,
                        }}>
                        <ActivityIndicator
                            color={Cores.primary}
                            animating size="large"
                        />
                    </View> :

                        <Button
                            type={"solid"}
                            containerStyle={{margin:10}}
                            buttonStyle={{backgroundColor: Cores.primary}}
                            title={"Carregar mais"}
                            onPress={()=>{

                                props.onLoadMore();

                                //EventBus.getInstance().fireEvent(WapEvents.CARREGAR_MAIS_PUBLICACAO, {});

                            }}
                        />
                    }
                </View>

            </>
        );
    };

    const renderHeader = () => {

        return (
            <>
                <View style={{flexDirection:"row", flex:1, backgroundColor:"#fff", margin:5, padding:10, elevation:3, borderRadius:10}}>
                    <Image source={{uri: props.foto}} style={{width:40, height:40, borderRadius:50, marginRight:10}} />
                    <Button
                    type={"clear"}
                    title={"Criar publicação"}
                    onPress={()=>{

                        props.navigation.navigate("Compor");

                    }}
                    titleStyle={{color:Cores.success}}
                    containerStyle={{alignSelf:"center"}}
                    buttonStyle={{width:"100%", alignSelf:"center"}}
                    />
                </View>


                <View style={{flexDirection:"column", flex:1, backgroundColor:"#fff", margin:5, padding:10, elevation:3, borderRadius:10}}>

                    <Text style={{alignSelf:"center", fontSize: 18, marginBottom:5}}>{props.dataMain.rei.rei_desc}</Text>
                    <Image source={{uri: props.dataMain.rei.rei_foto}} style={{width:100, height:100, borderRadius:50, alignSelf:"center"}} />

                    <Text style={{alignSelf:"center", fontSize:20, marginTop:5}} numberOfLines={1} ellipsizeMode={"tail"}>{props.dataMain.rei.rei_nome}</Text>

                    <Button
                        type={"clear"}
                        title={props.dataMain.rei.rei_text_btn}
                        titleStyle={{color:Cores.primary}}
                        onPress={()=>{
                            props.navigation.navigate("Perfil",{id: props.dataMain.rei.rei_id, foto: props.dataMain.rei.rei_foto, nome: props.dataMain.rei.rei_nome});
                        }}
                        buttonStyle={{alignSelf:"center"}}
                    />