Estilizando interfaces com classes no React Native

[@dieegosf]

Obrigado Deuses da programação! Tailwind hoje, Tailwind amanhã, Tailwind sempre!

[@felipearanha564]

💜

[@viniciusdeveloper]

SIm mn

[@oliveirafocs]

Se tá louco! Os melhores professores da atualidade estão na Rocket. Um dia serei Premium e terei a oportunidade de estar dia a dia aprendendo com eles. Parabéns pelo conteúdo, muito top. Eu utilizei a primeira vez Tailwind em dezembro de 2022, desde la me apaixonei. Obrigado, Rodrigo, que conteúdo top! Parabéns de verdade!!!

[@jhorranisbrunetti9174]

Tem alguns pontos que faz com que eu ainda não utilize: - Não saber a performance disso; - Compatibilidade com bibliotecas de animação (a documentação diz que não tem esse objetivo) - Aplicar Dark mode dessa forma, sem um Provider por exemplo é osso. Gosto muito do tailwind por trazer tudo que precisamos na construção de layout de uma forma simples. Tailwind realmente é muito produtivo. Você entende isso com o tempo. Espero que essa iniciativa traga mais insights pro mundo mobile também, merecemos. Muito bom o vídeo Rodrigão!

[@mayconrick6546]

Realmente essa troca de tema da forma como ele mostrou ali, em um projeto maior fica bem chato de implementar.

[@RODRIGOVRAUTV]

perguntei para o tio -gpt sobre essa sua duvida e ele me respondeu isso : O NativeWind é uma biblioteca que utiliza práticas do Tailwind CSS, mas em vez de usar classes HTML, usa a lógica de CSS-in-JS. Em termos de desempenho, pode haver algumas diferenças, mas estas geralmente são mínimas e dependem de vários fatores. Em termos de desempenho: Tamanho do arquivo: O tamanho do arquivo pode ser um pouco maior com o NativeWind, já que ele pode incluir mais lógica JavaScript para manipular o CSS. Renderização inicial: O Tailwind CSS normalmente compila todas as classes em um arquivo CSS estático, o que pode ajudar na renderização inicial. No entanto, o NativeWind, por ser CSS-in-JS, pode precisar de um processamento adicional no lado do cliente para gerar o estilo. Cache e reaproveitamento: O Tailwind CSS pode se beneficiar do cache do navegador, já que é um arquivo CSS estático. O NativeWind pode ter uma abordagem diferente, dependendo de como é implementado, podendo impactar o reaproveitamento de estilos. No entanto, essas diferenças são muitas vezes insignificantes na prática e podem variar dependendo da implementação específica, do tamanho do projeto e de outros fatores. Em muitos casos, a diferença de desempenho entre NativeWind e Tailwind CSS pode ser mínima e não percebida pelos usuários. Além disso, a escolha entre usar uma ou outra muitas vezes se resume à preferência pessoal, estilo de desenvolvimento e integração com outras bibliotecas ou ferramentas que você esteja usando no projeto.

[@pedrobenicio4955]

no começo achava muito estranho essa ideia de "sujar" o HTML. Mas com o tempo eu fui vendo o quanto Tailwind é poderoso. A produtividade com isso é absurda. Sempre fui mais fanboy de css in js. Mas por causa do desempenho e da produtividade, o tailwind me ganhou...Não gosto de usar tailwind pra tudo até porque com o tempo vamos perdendo o jeito de escrever o css tradicional devido o costume de se escrever em classes prontas do tailwind. Então eu fico revezando com Styled Components dependendo do projeto

[@chabetiico]

Tá certo, usava o bootstrapstudio junto com react, quando voltei pro css vanilla nao sabia quase mais nada

[@ramonoliveira_dev]

A notificação mais esperada do dia. Só conteúdo top! 👏👏

[@reacaosistemas5746]

Simplesmente incrível essa integração. Lidando aqui pra integrar no redux.

[@er1c3g]

Já tem um tempinho que venho utilizado tailwind no RN. Ajuda muito no desenvolvimento das UI

[@alan3788]

Que top instrutor Rodrigo, Top demais. Estou ansioso em começar com vcs o react native. Abraço

[@GladsonReis]

Obrigado por disponibilizar conhecimento

[@andresribeiroo]

seria mt massa um vídeo sobre o restyle

[@KROMMASyS]

Excelente didatica, parabens pelo conteudo. !!!

[@JohnEsrom]

Dá pra usar em conjunto com o styles normal do react native?

[@pradella]

Espetacular

[@cleysonlago]

E no caso, como mudar a COR do ícone quando usado o @expo/vector-icons? Não adianta importar o colors e usar color={colors.verdemedio} , nem direto no ClassName.

[@GladsonReis]

Ola ! tentei refazer esta aula, e apresentou este erro, tanto no android quanto no ios App\App.js: Use process(css).then(cb) to work with async plugins

[@quinhoriesco]

Faça um downgrade, exemplo: yarn add --dev tailwindcss@3.3.2

[@arozendojr]

O react-test-renderer funciona com nativewind ?

[@wandersonalwes2428]

Massa demais 👏👏

[@ocharlespereira]

Excelente vídeo Rodrigão! A nível de consumo de recursos e usabilidade, particularmente, vejo que o nativeWind leva uma vantagem sobre o native-base. Mas particularmente eu prefiro não utilizar UI para Mobile, pois diferentemente da Web(CSS é mais agressivo), qualquer processo que utilize mais memória que vc aplica em um app,(dependendo do tamanho), isso no fim vira é uma dor de cabeça. E prefiro deixar um código mais limpo do que ficar sujando com classes(mesmo se alocar em um local especifico). Vejo que podemos alocar estes recursos para lib que de fato precisa ser utilizado como um gesture-handler, reanimated, moti, etc....

[@DouglasSantos-fz2pg]

nativeWind ou native-base? qual tem melhor desempenho?

[@manoellopes211]

Tem queria saber

[@brunogomes5431]

Também

[@manoellopes211]

Vai rolar NativeWind no Ignite ?

[@walissonwaal]

E referente as fontes?

[@ThaleSato]

Qual sistema operacional é esse?

[@rhadamez]

Será que causa bastante diferença na performance?

[@sinistro9able]

Mesmo em um pocket, a diferença seria mínima.

[@brunohenriquesilva1359]

Muito top

[@thymarques]

Eu tava pensando nisso hoje...

[@rildomaster]

Agora fiquei confuso.... NativeWind ou NativeBase?

[@saviodev777]

dá um pouco de agonia com o tamanho da string do className kkk mas acho q acostuma com o tempo

[@alexandrecastro9528]

É igual botar purê no cachorro quente

[@principe.borodin]

AAAAMMMMMMOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO!!!!!!

[@Black_9]

É, prefiro fazer na raça que poluição de código, com a integração já deixa meio poluído, imagina com Tailwind + animated, na web já larguei Bootstrap por causa disso, nada contra projeto em si, tem espaço para todos, mas para mim eu não uso, porque para manutenção de grandes projetos fica tenso muita classes, ainda mais com clientes e Designs chatos querem inventar moda e posicionar coisas em lugares chatos para, depois dar trabalho no responsivo.

[@thiagodomingues9521]

Quem usa tailwind deve tá pagando alguma dívida de jogo, não é possível

[@enriquesantosdeoliveira5798]

Também achava isso, mas o negócio é bão kkk

[@Futebolmemorable]

Vou ti fala, quando você pega um projeto muito grande e tem que da nome pra cada class, ai você vai lembra do tailwind kkkk

[@brunogomes5431]

Pô o código fica muito feio kkkk tu ganha muito tempo pra gastar esse tempo todinho depois pra entender oq vc fez nessas classes qnd precisar mexer dkkdkd