Executando verificação de segurança...
-6

[ 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.

Hello Word

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,
  },
});
Carregando publicação patrocinada...
2
0
1

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.