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"}}
/>