CodeKitHubO que é esta ferramenta?
No React Native, as sombras não são multiplataforma por padrão. O iOS usa quatro propriedades de estilo separadas (shadowColor, shadowOffset com width/height, shadowOpacity de 0 a 1 e shadowRadius para o desfoque), que mapeiam para a mesma sombra CoreAnimation usada pelo box-shadow na web. O sistema View nativo do Android não suporta formas de sombra arbitrárias — ele só suporta elevation, um único número que gera uma sombra fixa no estilo Material Design, baseada em quão "alto" a view parece flutuar.
Isso significa que uma sombra que fica certa no iOS usando shadowRadius/shadowOpacity não aparecerá no Android, a menos que você também defina elevation — e as duas nunca ficarão idênticas pixel a pixel, já que o formato da sombra do elevation não é personalizável como o do iOS. A partir do React Native 0.74 com a New Architecture ativada, também está disponível a propriedade multiplataforma boxShadow, usando a mesma sintaxe do CSS.
Por que usar?
- Veja uma pré-visualização em tempo real enquanto ajusta deslocamento, desfoque, opacidade e cor, em vez de chutar valores e reconstruir o app para conferir.
- Obtenha as propriedades de sombra do iOS, o elevation do Android e a nova string boxShadow multiplataforma de uma vez, sem precisar consultar três APIs diferentes.
- O elevation é um controle separado (não calculado automaticamente a partir do desfoque/opacidade), porque o mapeamento de elevation para a aparência da sombra no Android não é uma tradução direta das propriedades de sombra do iOS — o ajuste é visual, e esta ferramenta permite fazer isso lado a lado.
- Gratuito, instantâneo e pronto para copiar como um único objeto de estilo.
Como usar
- Ajuste o deslocamento X/Y, o raio de desfoque, a opacidade e a cor da sombra — a caixa de pré-visualização atualiza em tempo real.
- Ajuste separadamente o número de elevation do Android até que ele corresponda visualmente à intensidade de sombra pretendida.
- Clique em "Copy" para copiar o objeto de estilo completo, incluindo as propriedades do iOS, o elevation do Android e a string boxShadow.
- Cole o objeto no StyleSheet do seu componente — combine ou mescle com os estilos de view existentes.
Exemplo
Entrada
Deslocamento (0, 4), desfoque 8, opacidade 0.25, preto, elevation 5Resultado
shadowColor: '#000000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.25, shadowRadius: 4, elevation: 5, boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.25)'shadowRadius é definido como metade do valor de desfoque mostrado na pré-visualização, seguindo a relação prática entre o raio de desfoque do CSS e o shadowRadius do iOS.
Perguntas frequentes
Por que minha sombra não aparece no Android?
As propriedades shadowColor/shadowOffset/shadowOpacity/shadowRadius são exclusivas do iOS — a renderização nativa do Android simplesmente as ignora. Você também precisa definir a propriedade elevation (um número positivo) para que alguma sombra apareça no Android.
Posso deixar a sombra do Android idêntica à do iOS?
Não exatamente — elevation gera o formato de sombra Material Design embutido do Android, que não pode ser configurado de forma independente em cor, direção do deslocamento ou desfoque como a sombra do iOS. É possível ajustar o número de elevation para obter uma intensidade visualmente parecida, mas uma correspondência pixel a pixel entre plataformas não é possível com as APIs clássicas de shadow/elevation.
O que é a propriedade boxShadow e posso usá-la em vez disso?
boxShadow é uma propriedade de estilo mais nova e verdadeiramente multiplataforma (adicionada no React Native 0.74, disponível na New Architecture), que usa a mesma sintaxe de string do box-shadow do CSS e funciona de forma idêntica em iOS e Android. Se a versão do React Native e a arquitetura do seu app suportarem, você pode usar apenas essa propriedade em vez das quatro propriedades do iOS mais elevation — verifique sua versão do RN e o status da New Architecture antes de confiar nela em produção.
Por que shadowRadius é metade do valor de desfoque que defini?
A pré-visualização em tempo real usa o box-shadow do CSS, no qual o valor de desfoque se espalha aproximadamente o dobro do shadowRadius do iOS para o mesmo número. O código gerado define shadowRadius como metade do seu valor de desfoque para que a sombra vista na pré-visualização corresponda ao que o iOS realmente renderiza — se você copiasse o valor de desfoque diretamente, a sombra no iOS pareceria visivelmente mais suave e maior do que na pré-visualização.
Preciso do Platform.select para aplicar esses estilos?
Não — é seguro colocar as propriedades shadow* do iOS e o elevation do Android juntos em um único objeto de estilo, exatamente como faz o código gerado: cada plataforma simplesmente ignora as propriedades da outra. Platform.select só vale a pena se você quiser designs de sombra realmente diferentes por plataforma, não apenas para evitar avisos (não há nenhum).
Defini elevation, mas a sombra no Android ainda não aparece — por quê?
As duas causas mais comuns: a view não tem backgroundColor (a sombra de elevation do Android é projetada a partir do fundo opaco da view, então uma view transparente não projeta nada), ou um elemento pai tem overflow: 'hidden' e está cortando a sombra. Dê à view uma cor de fundo sólida e verifique as configurações de overflow dos ancestrais antes de supor que o valor de elevation está errado.