Stardust - React Native

Seja bem vindo a sua library UI de React Native desenvolvido pelo time mobile da Ubistart!

Essa library foi desenvolvida para agilizar o processo de criação de aplicativos em React Native e extrair o máximo de complexidade do lado do desenvolvedor para que o processo seja mais ágil.

Como utilizar o stardust-react-native?

Nossa library faz uso de algumas dependências e configurações padrões que são necessárias para o nosso escopo default que segue o nosso Design System.

Essas dependências por exemplo são:

• svg Necessário configurar duas libraries:

react-native-svg react-native-svg-transformer

• tipografia - customizada (Proxima Nova)

É necessário criar um arquivo chamado de react-native.config.js caso o teu projeto não possua. Criar uma pasta assets/fonts e colocar os arquivos de fonte dentro.

react-native.config.js:

  module.exports = {
    assets: ['./assets/fonts'],
  };

Então execute o comando

npx react-native link

Após as configurações acima, temos que instalar a nossa library como uma dependência no vosso projeto.

yarn add stardust-react-native #ou npm install stardust-react-native

Agora precisamos fazer algumas configurações para podermos utilizar os recursos dentro do vosso projeto.

Precisamos encapsular o seu APP no ThemeManager para esse ser acessível em toda a aplicação:

import { ThemeManager } from 'stardust-react-native';

const App = () => (
 <ThemeManager>
   <SeuAppAqui />
 </ThemeManager>
);

Com essa configuração já será possível fazer a utilização dos componentes disponíveis na library.

Utilizando os componentes

import { Button } from 'stardust-react-native';


const App = () => (
 <ThemeManager customTheme={customTheme}>
   <Button label="Stardust" onPress={() => console.log("Stardust button"!)} />
 </ThemeManager>
);

Styling - Customizando o Tema da library

Nossa library tem a possibilidade de sobrescrever os estilos definidos por padrão, usados no nosso Design System.

Para isso, passe a propriedade customTheme no componente ThemeManager, como por exemplo:

import { ThemeManager, extendTheme } from 'stardust-react-native';

const customTheme = extendTheme({
 color: {
   positive: {
     ubistart: "blue",
   },
 },
});

const App = () => (
 <ThemeManager customTheme={customTheme}>
   <SeuAppAqui />
 </ThemeManager>
);

Após essa definição, já estará disponível para utilização a propriedade theme.brand.color.positive.ubistart

Para acessar essa propriedade temos que invocar o nosso custom hook de tema e utilizar a propriedade theme dele.

import { useTheme, Button } from 'stardust-react-native';

const CustomButton = () => {
 const { theme } = useTheme();
 //theme.brand.color.positive.ubistart já é acessível aqui.

 return <Button bgColor={theme.brand.color.positive.ubistart}>

};

export default CustomButton;