@stardust-ds/react-native
TypeScript icon, indicating that this package has built-in type declarations

0.9.0 • Public • Published

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.

Componentes

Como utilizar o @stardust-ds/react-native?

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

Essas dependências são:

SVG

Necessário configurar duas libraries:

    1. react-native-animatable

    yarn add react-native-animatable

    1. react-native-svg

    yarn add react-native-svg

    • 2.1 caso esteja utilizando Typescript (o que recomendamos), precisará criar um arquivo, ou adicionar caso exista um, para que o typescript reconheça os imports dos svgs: custom.d.ts:
    declare module '*.svg' {
      const content: any;
      export default content;
    }
    1. react-native-svg-transformer

    yarn add react-native-svg-transformer

    • 3.1 Para podermos manipular as cores dos svg que eventualmente usará, precisamos criar um arquivo para a configuração desses svgs. .svgrrc
      {
        "replaceAttrValues": {
          "#000000": "{props.fill}",
          "black": "{props.fill}"
        }
      }

    ⚠️ Tenha ATENÇÃO que caso a cor do seu svg não for um dos valores '#000000' ou 'black', a cor do mesmo não será alterada. Para isso, ou mude as cores do svg para tais cores mencionadas ou adicione uma nova propriedade no 'replaceAttrValues' com a cor que quer substituir. exemplo: "red": "{props.fill}"

Tipografia - customizada (Poppins)

    1. É necessário criar um arquivo chamado de react-native.config.js caso o teu projeto não possua.
    1. Criar uma pasta assets/fonts e colocar os arquivos de fontes dentro.
    1. react-native.config.js:
      module.exports = {
        assets: ['./assets/fonts'],
      };
    1. Então execute o comando

    = 0.69

    npx react-native-asset

    < 0.69

    npx react-native link

    Para maior entendimento da utilização do Typography em diferentes sistemas operacionais, consulte a documentação específica aqui

Instalando a library

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

yarn add @stardust-ds/react-native #ou npm install @stardust-ds/react-native
cd ios
pod install

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

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

import { ThemeManager } from '@stardust-ds/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 { ThemeManager, Button } from '@stardust-ds/react-native';


const App = () => (
 <ThemeManager>
   <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, utilize a função extendTheme() para inserir as propriedades do seu tema, ou sobrescrever as já existentes, como por exemplo:

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

const theme = {
 color: {
  ubistart: "blue",
 },
}

const customTheme = extendTheme(theme);

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

Após essa definição, já estará disponível para utilização a propriedade theme.brand.color.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-ds/react-native';

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

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

};

export default CustomButton;

Typing theme - dizendo para seu tema como agir

Se estiver utilizando Typescript (altamente recomendado), para que seu projeto identifique as propriedades sobrescritas no tema, deve criar um arquivo de tipos para sobrescrever o type da library também.

como por exemplo:

type.d.ts

import { customTheme } from './App'; // lembre de exportar essa informação no seu App ou onde quer que tenha definido ela e importe aqui

type Theme = typeof customTheme;

declare module '@stardust-ds/react-native' {
  export interface StardustTheme extends Theme {}
  export function useTheme(): Theme;
}

Isso irá fazer com que seu typescript identifique as propriedades novas que passares para o ThemeManager e te ajudará na hora do desenvolvimento.

Caso esteja utilizando o styled components, deve fazer a etapa a seguir para que o DefaultTheme seja sobrescrito:

...
import {StardustTheme} from '@stardust-ds/react-native'

...

declare module 'styled-components' {
  export interface DefaultTheme extends StardustTheme
}

Para finalizar, adicione o arquivo type.d.ts na propriedade include do seu arquivo tsconfig.

exemplo:

...
"include": [
    "src", "type.d.ts"
  ],
...

Readme

Keywords

none

Package Sidebar

Install

npm i @stardust-ds/react-native

Weekly Downloads

0

Version

0.9.0

License

MIT

Unpacked Size

10.2 MB

Total Files

590

Last publish

Collaborators

  • gabriel.pedro
  • cleber.ferreira
  • luciel.santos.ubi
  • econte