Programação B

Telas, Pixels e Densidade

Uma questão que não existe na web: a mesma imagem de 300×200 pixels parece nítida num celular barato e borrada num flagship. A razão é a densidade de pixels — a quantidade de pixels físicos por ponto lógico da tela.

Um celular com densidade 1x tem 1 pixel físico por ponto. Um com 2x tem 4 (2×2). Um com 3x tem 9 (3×3). Quando você define width: 300 no React Native, são 300 pontos lógicos — que se traduzem em 300 pixels num dispositivo 1x, 600 num 2x e 900 num 3x.

Para texto e formas vetoriais, isso é transparente — o sistema operacional renderiza em alta resolução automaticamente. Para imagens bitmap (fotos, ícones PNG), a imagem precisa existir em múltiplas resoluções. Uma imagem logo.png de 100×100 pixels ficará borrada num dispositivo 3x que precisa preencher 300×300 pixels físicos.

A convenção no React Native é fornecer três versões:

assets/
├── logo.png       (100×100 — para 1x)
├── logo@2x.png    (200×200 — para 2x)
└── logo@3x.png    (300×300 — para 3x)

O Metro Bundler seleciona automaticamente a versão correta com base na densidade do dispositivo. No código, basta referenciar require("./assets/logo.png") — o sufixo @2x/@3x é resolvido em tempo de build¹.

O TamoJunto ainda não tem imagens nos cards de evento — capas de evento aparecem quando o upload de imagem for implementado. Mas entender densidades agora evita surpresas quando elas chegarem.

1. A API PixelRatio.get() do React Native retorna a densidade do dispositivo atual. Útil quando você precisa calcular tamanhos em pixels físicos — por exemplo, para definir a espessura mínima de uma borda que precisa ser exatamente 1 pixel físico: borderWidth: 1 / PixelRatio.get(). ↩