Projeto

Solução de compartilhamento de código entre múltiplas plataformas, através de uma biblioteca de componentes acessíveis e customizáveis, utilizando React Native Web, Atomic Design, Storybook e Typescript.

Stack

Esse projeto foi desenvolvido com as seguintes tecnologias:

• React
• React Native
• React Native Web
• Storybook
• TypeScript
• Styled Components
• Styled System

Instalação em outro projeto

1. Instale a bibliteca em seu projeto React/React Native/Expo:

yarn add @yuriazevedo/rnw-components

2. Instale a dependência nativa (utilize expo install caso seja um projeto Expo):

yarn add react-native-vector-icons

3. Agora instale as dependências:

yarn add styled-components styled-system

4. Caso seu projeto utilize Typescript, instale as seguintes tipagens:

yarn add @types/styled-components @types/styled-components-react-native @types/styled-system -D

5. Configurações extras para a Web

• Exemplo da propriedade module.rules dentro do webpack config:

{
  test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
  loader: 'file-loader',
},
{
  test: /\.(ts|js)x?$/,
  exclude: /node_modules[/\\](?!react-native-vector-icons)/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: [
        ['@babel/preset-env', { useBuiltIns: 'usage' }],
        '@babel/preset-react',
        "@babel/preset-typescript"
      ],
      plugins: [
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-proposal-object-rest-spread'
      ],
    },
  },
},

Utilizando o projeto

1. Clone o repositório utilizando:

[email protected]:yuriazevedo11/monografia.git

2. Entre na pasta do repositório:

cd monografia

3. Agora é só instalar as dependências do projeto:

yarn # Equivalente a yarn install
yarn pod # Caso esteja rodando em um ambiente MacOS

Utilizando o Storybook

Ambiente Web

1. Basta rodar o comando :

yarn storybook-web

Ambiente Android e iOS

1. Inicie o Storybook com:

yarn storybook

2. Em seguida inicie o Metro do React Native:

yarn start

3. Agora rode o comando de acordo com a plataforma desejada:

yarn android
yarn ios # É necessário um ambiente MacOS

4. Caso o Storybook não esteja reconhendo os emuladores basta rodar o comando:

yarn reverse

OBS: Os emuladores costumam abrir sozinhos após passo 3, caso seu ambiente esteja configurado corretamente com Android Studio ou Xcode (no caso de MacOS). Se ele não abrir sozinho, basta abrir o emulador antes de rodar o comando anterior.