react native shadow 2
v7.1.1
Importante
O novo React Native 0.76 , lançado em 23 de outubro de 2024 , finalmente suporta uma sombra de plataforma cruzada!
Esse novo recurso deve ser preferido nesta biblioteca.
Só posso apreciar de todo o coração o apoio e a bondade de todos nos últimos 4 anos e comemorar, tendo atingido 39 mil downloads semanais e 2m ?
Se você está procurando um profissional apaixonado com 5 anos de experiência em TypeScript, React e React Native, entre em contato comigo em [email protected]!
React-native-shadow está morto por anos. Esta é uma versão aprimorada com mais funcionalidades, suporte ao TypeScript e escrito do zero. Não é necessário definir seu tamanho: a sombra é aplicada de maneira inteligente na primeira renderização e depois reaplicada com precisão nas seguintes.
Ele resolve a antiga questão nativa do React de não ter a mesma aparência de sombra e uso para Android, iOS e Web.
O site EtherCreative/React-native-Shadow-Generator não fornecerá resultados muito semelhantes entre as duas plataformas, pelos motivos que descrevi aqui. Também não é tão personalizável quanto esta biblioteca.
Compatível com Android, iOS e Web. E expo!
Suporta RTL.
Tente esta biblioteca uma rápida tentativa!
Recomenda-se a versão mais recente
react-native-svg, incluindo se estiver usando a Expo.
npm i react-native-shadow-2
# or
yarn add react-native-shadow-2 import { Shadow } from 'react-native-shadow-2' ;
< Shadow >
< Text style = { { margin : 20 , fontSize : 20 } } > ? </ Text >
</ Shadow > 
< Shadow distance = { 15 } startColor = { '#eb9066d8' } endColor = { '#ff00ff10' } offset = { [ 3 , 4 ] } >
< View style = { { borderTopStartRadius : 24 , borderBottomEndRadius : 0 , borderRadius : 10 , backgroundColor : '#c454f0dd' } } >
< Text style = { { margin : 20 , fontSize : 20 } } > ? </ Text >
</ View >
</ Shadow > 
| Propriedade | Descrição | Tipo | Padrão |
|---|---|---|---|
| StartColor | A cor do gradiente inicial da sombra. | string | '#00000020' |
| endcolor | A cor do gradiente final da sombra. | string | StartColor transparente. Explicação. |
| distância | Quão longe a sombra vai. | number | 10 |
| desvio | Move a sombra. x negativo se move para a esquerda/partida, y negativo o move.Aceita valores 'x%' .Definir isso padrão paintInside padrão é verdadeiro , pois é o comportamento desejado usual. | [x: string | number, y: string | number] | [0, 0] |
| Paintinside | Aplique a sombra abaixo/dentro do conteúdo. startColor é usado como cor de preenchimento, sem gradiente.Útil ao usar offset ou se seu filho tiver alguma transparência. | boolean | false , mas true se offset for definido |
| lados | Os lados que terão suas sombras desenhadas. Não inclui cantos. Lados indefinidos fallbacks para verdadeiro . Explicação. | Record<'start' | 'end' | 'top' | 'bottom', boolean> | undefined |
| cantos | Os cantos que terão suas sombras desenhadas. Cantos indefinidos fallbacks para verdadeiro . Explicação. | Record<'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd', boolean> | undefined |
| estilo | O estilo da visão que envolve seus filhos. Leia as notas abaixo. | StyleProp<ViewStyle> | undefined |
| contêineres | O estilo da visão que envolve a sombra e seus filhos. Útil para margens. | StyleProp<ViewStyle> | undefined |
| esticar | Torne seus filhos Ocuppy todo espaço horizontal disponível. Explicação. | boolean | false |
| segura | Não usará o dimensionamento e o posicionamento relativos na 1ª renderização, mas nas seguintes renderizações com os tamanhos exatos do Onlayout. Útil se lidar com raios maiores que os tamanhos de lados (como um círculo) para evitar artefatos visuais na 1ª renderização. Se for true , a sombra não aparecerá na 1ª renderização. | boolean | false |
| desabilitado | Desativa a sombra. Útil para reutilizar facilmente os componentes, pois às vezes as sombras não são desejadas.containerStyle e style ainda são aplicados. | boolean | false |
Se a sombra tiver um filho único, terá a width , height e todas as propriedades da borderRadius da propriedade style infantil, se definidas.
Você também pode definir essas propriedades no style da sombra. As propriedades definidas aqui terão prioridade sobre as definidas no style da criança.
Se a width e height forem definidas em qualquer uma delas, haverá apenas uma única renderização, pois o primeiro dimensionamento automático não acontecerá, apenas a renderização precisa.
Você pode usar o 'borderTopLeftRadius' ou 'borderTopStartRadius' e suas variações para definir os raios dos cantos, embora eu recomendo o último, pois é o padrão RTL.
Ter um raio maior que o seu lado atrapalhará a sombra se os tamanhos não forem definidos. Você pode usar a propriedade safeRender para mostrar apenas a sombra na segunda renderização e além, quando temos o tamanho exato do componente e os raios são adequadamente limitados.
Os raios superiores a 2000 (o Tailwind's rounded-full é 9999) pode travar o Android.
A opacidade é definida diretamente nas propriedades startColor e endColor , no canal alfa. Por exemplo: '#0001' é um preto quase transparente. Você também pode usar '#rrggbbaa' , 'rgba()' , 'hsla()' etc. Todos os padrões neste link, mas não as cores int, são aceitos.
Use a propriedade stretch ou style={{alignSelf: 'stretch'}} em seu componente de sombra. Explicação!
Ele é exportado do tipo ShadowProps , os adereços do componente de sombra. Você pode fazer o seguinte:
const ShadowPresets = {
button : {
offset : [ 0 , 1 ] , distance : 1 , startColor : '#0003' ,
} as ShadowProps ,
} ;
< Shadow { ... ShadowPresets . button } > offset e size estão lançando erros de texto do TypeScript!Atualize seu tipedript para pelo menos 4.0.0! Essas duas propriedades usam tuplas marcadas . Se você não usar o TypeScript, isso não acontecerá.
