[ HELPER ] Problema de renderizar imagens - React Native
Estou enfrentando um problema ao renderizar algumas imagens que vêm da internet. O comportamento é um pouco inconsistente: às vezes elas são renderizadas corretamente, outras vezes não. Não consigo identificar um padrão específico para esse problema.
Alguém já passou por uma situação semelhante? Se sim, como vocês lidaram com isso? Alguma sugestão seria muito apreciada.
Obrigado!
return (
<View style={styles.container}>
<Text style={styles.text}>Hello Word </Text>
<ScrollView>
{isLoading && comics.length !== 0 ? (
<>
{comics.map((item, index) => (
<View key={index} style={styles.containerComics}>
<Image style={styles.image} source={{uri: item?.thumbnail}} />
</View>
))}
</>
) : (
<ActivityIndicator
size={'large'}
color={'#C3124D'}
style={{marginTop: 20}}
/>
)}
</ScrollView>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
padding: 20,
},
text: {
fontSize: 20,
color: '#000',
width: '100%',
},
containerComics: {
paddingBottom: 20,
flexDirection: 'row',
alignContent: 'center',
alignItems: 'center',
marginBottom: 20,
gap: 20,
},
});
As imagens demoram a renderizar ou nunca renderizam? Pode ser imagens muito grandes, falta de otimização.
Mano, eu notei que você está utilizando o método map para fazer a listagem. Em tese isso não tem problema para listas pequenas, mas para listas grandes onde os itens tem o layout mais complexo(imagens) o correto é utilizar o componente Flatlist. Ele já é preparado para carregar muitos itens, por baixo dos panos tem várias otimizações. Tenta utilizar ele e vê se os itens são carregados corretamente. Além de usar o Flatlist, tem que ver se essas imagens não estão muito pesadas, isso impacta bastante na renderização.