React Native ExpFig 🎯

Componetes React Native para Android

Características 🗳️

🚀 Project imperativo 📦 Muito leve (~xxx kB) ⌨️ Compatível com android 🎨 Layouts personalizáveis 🔧 Configuração flexível

Documentação 📋

A react-native-exp-fig é uma biblioteca de componentes reutilizáveis desenvolvida para padronizar e acelerar o desenvolvimento de interfaces nos aplicativos do Expresso Figueiredo. Projetada com foco em consistência visual, escalabilidade e performance, a lib integra tecnologias como React Native, TypeScript, Storybook e React Native Testing Library, promovendo uma experiência de desenvolvimento moderna, testável e responsiva.

Contribuidores 👩‍💻

Este projeto está sendo mantido por (02) desenvolvedores, e qualquer ajuda com problemas e solicitações de pull é sempre bem-vinda. Se você puder e quiser contribuir, entre em contato conosco pelo whats (xx) xxxx-xxxx

Pré-requisitos

Antes de começar, você precisará ter as seguintes ferramentas instaladas em sua máquina:

• Git
• Node.js 20+
• Java

Compatibilidades

Compatível com react-native >= 0.72.3

Instalação 🛠️

 yarn add expfig-ui
 or
 npm i expfig-ui

Projeto Clone 🪞

$ git clone https://github.com/expfig/expfig-ui.git

# Access the project folder cmd/terminal
$ cd expfig-ui

# Install the dependencies
$ yarn install

StoryBook

 yarn storybook

Testing

 yarn test

Rodar o projeto de example

 cd example
 yarn start

Usando Componente 🎇

  <Typography
    text={`Resultado:${result}`}
    size={18}
    fontFamily="Inter-Medium"
    lineHeight={24}
    letterSpacing={0.5}
    marginBottom={8}
    />

  <Button
    title="Cliclou"
    onPress={() => Alert.alert('Cliclou')}
    width={'100%'}
    height={45}
    backgroundColor="#050022"
    buttonTextStyle={{
        color: '#fff',
        fontFamily: 'Inter-Medium',
        fontSize: 18,
        fontWeight: '500',
      }}
    flexStyle={{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    borderStyled={{
        borderWidth: 1,
        borderColor: '#050022',
        borderRadius: 8,
      }}
  />