Testing the SHOPIFY lib (creating UI components with Restyle)

Рет қаралды 7,718

11 ай бұрын

If you are one of those people who struggle when making any style changes within your app, trying to remember the font or color palette, now your life just got easier.
We decided to test the SHOPIFY lib within a mobile application using React Native.
In practice, we will create a UI component using Restyle. So, let's code, shall we?

Пікірлер: 30

@thalesgelinger 10 ай бұрын

Acho que uma coisa bala de começar a comentar é sobre o impacto de cada lib em performance, comparando essas libs de style como restyle, nativebase, styled components, cada uma tem seu devido impacto, acho legal deixar o pessoal a par disso na hora de escolher a lib

@eduardo-maia348 11 ай бұрын

Show!! Gostaria muito de ver um vídeo focado em responsividade no react native, simulando tamanhos de telas e mesclando também com a acessibilidade(font scale), que é algo que sempre dá uma "quebrada" nos layouts e é um conteúdo muito pouco abordado na minha opinião!!

@TimeToListenBR 10 ай бұрын

Show de bola já tinha trabalhado com esta fantastica lib em um projeto react native, mas é sempre bpm relembrar para fixar melhor

@NeinhoxD 11 ай бұрын

Muito show... Para projeto grande e escalável vai poupar muito tempo e dar consistência.

@thiagokim17 11 ай бұрын

gostei muito dessa ferramenta, braboo

@principe.borodin 11 ай бұрын

conteudo Top. altas ideias, o cerebro esta fervilhando.

@roni_c_castro 8 ай бұрын

Eu acho que este modo utilizando props talvez pode não escala muito bem para criar variações de estado e permitir customização, pois se por exemplo for necessário criar mais de 5 estado d botão diferentes (ativo, hover, disabled, loading...), ao invés de customizar o tema, vc precisaria criar mais de 5 botões. Acho que para resolver isso teria que criar um tema mais complexo, o que acha? ``` buttons: { primary: { active: { container: {}, text: {}, iconLeft: {}, iconRight: {} } hover: { container: {}, text: {}, iconLeft: {}, iconRight: {} }, disabled: { container: {}, text: {}, iconLeft: {}, iconRight: {} } }, secondary: { active: { container: {}, text: {}, iconLeft: {}, iconRight: {} } hover: { container: {}, text: {}, iconLeft: {}, iconRight: {} }, disabled: { container: {}, text: {}, iconLeft: {}, iconRight: {} } } } const ButtonBase = () => { ... return ( // state="loading" | "disabled" | hover" // com styled-component, daria para fazer algo tipo style: ....getButtonTheme({theme, variant, state})} // aqui escolheria uma das variantes e seu estado ) } ```

@faran42 10 күн бұрын

Oi, na versão atual (2.4.4) não está sendo possível executar a criação do botão, pois, quando chamo a função createVariant({ themeKey: 'buttonVariants' }), recebo um erro funcsMap[key] is not a function (it is undefined). Já procurei bastante e não consigo encontrar solução para isso.

@euricodesousadacosta7483 9 ай бұрын

Adorei o video, so achei estranho que o style do texto dos Buttons foi feito no textVariants, quando devia ser no buttonVariants pra manter a consistencia dos botoes, ja agora quando e que vai refazer outro crud do react native realm, mas dessa vez com create delete update, via formulario?

@FelipeSouza-vz6gc 10 ай бұрын

Nas variantes de buttons eu não conseguiria ja passar um color?

@maxsonsantos1217 11 ай бұрын

qual o sistema operacional e tema que você usa?

@manuelhonoredesousa 11 ай бұрын

Chegueiiiii

@kenjimaeda2443 11 ай бұрын

Alguem ja testou em um app com varias telas ? Gostaria de saber a performance

@saviodev777 8 ай бұрын

muito daora, só achei paia o

@arozendojr 11 ай бұрын

Flutter está sofrendo por pacotes ficando absndonados ou cobrando licensas, monetizando muito justo, como podemos evidar tais situações ou facilitar para trocar dependências?

@gabrel44 11 ай бұрын

parada é react native, aproveita que o muro ta baixo

@Matheus_1582 11 ай бұрын

Oh yes o @gabrel44 tem razão o muro ta baixíssimo 👍