Apps React Native exibem imagens (locais e remotas) e agrupam assets (fontes, etc.). Entender como carregar imagens de forma eficiente, lidar com diferentes resoluções e otimizar o desempenho de imagens é importante para uma boa UX e desempenho.
{ } ;
Imagens locais usam require (agrupadas); imagens remotas usam uma uri. Imagens precisam de dimensões explícitas (largura/altura) — diferentemente da web, elas não se dimensionam automaticamente a partir do arquivo.
→ RESOLUTION: provide @2x and @3x variants (logo.png, [email protected], [email protected]) → RN
picks the right one per device density (crisp on all screens)
→ resizeMode: cover / contain / stretch / center → how the image fits its box
✓ Use APPROPRIATELY-SIZED images (don't load huge images into small views — wastes
memory/bandwidth)
✓ FastImage (react-native-fast-image) → better remote image performance + CACHING
(caches images so they don't re-download; smoother than the default Image for lists)
✓ Use the right FORMAT (WebP for smaller sizes); lazy-load; placeholders while loading
✓ Images are a common source of memory issues / jank in lists → optimize them
Entender como lidar com imagens e assets é valioso porque a maioria dos apps exibe imagens, e fazer isso de forma eficiente afeta tanto a UX quanto o desempenho, então é um conhecimento prático útil.
Entender carregamento de imagens — imagens locais via require (agrupadas no tempo de compilação), imagens remotas via uma uri, e o ponto importante de que imagens precisam de dimensões explícitas no React Native (diferentemente da web, elas não se dimensionam automaticamente) — é necessário para exibir qualquer imagem.
Entender tratamento de resolução (fornecer variantes @2x/@3x para que o React Native escolha a correta por densidade do dispositivo para imagens nítidas em diferentes telas) e resizeMode (como as imagens se encaixam em sua caixa) é importante para imagens que se veem bem nas diversas densidades de tela do Android e iOS.
Mais importante ainda, entender otimização de desempenho de imagens é valioso porque imagens são uma fonte comum de problemas de memória e jank (especialmente em listas): usar imagens de tamanho apropriado (não carregar imagens enormes em visualizações pequenas, o que desperdiça memória e largura de banda), usar FastImage para melhor desempenho de imagens remotas e cache (para que imagens não sejam baixadas novamente e listas rolem suavemente — uma melhoria significativa sobre a Image padrão para listas com muitas imagens), usar formatos eficientes (WebP) e lazy-loading com placeholders.
Essas otimizações importam porque apps com muitas imagens (comuns — feeds, galerias, perfis) podem sofrer problemas reais de desempenho se as imagens não forem tratadas bem.
Como a maioria dos apps exibe imagens e tratá-las bem (carregamento correto e dimensões, variantes de resolução e, especialmente, otimização de desempenho com cache e dimensionamento apropriado) afeta tanto a UX (imagens nítidas e carregadas suavemente) quanto o desempenho (evitando problemas de memória e jank), entender imagens e assets no React Native é um conhecimento valioso e praticamente relevante — importante para a necessidade comum de exibir imagens, onde entender carregamento, resolução e, especialmente, otimização de desempenho (cache, dimensionamento) é a chave para construir apps ricos em imagens, suaves e polidos.