@emcsistemas/native-ui NPM

📱 Native UI

Biblioteca de componentes react native para construção e estilização de interfaces

1. Pré-requisitos

React Native
Expo
React Navigation

2. Dependências (outras bibliotecas)

expo-font
@expo-google-fonts/roboto (Roboto_400Regular, Roboto_500Medium e Roboto_700Bold)
expo-haptics
react-native-safe-area-context
react-native-calendars
date-fns
react-native-root-toast
react-native-reanimated
react-native-gesture-handler
lottie-react-native

3. Instalação das dependências

npm i @emcsistemas/native-ui react-native-calendars date-fns react-native-root-toast

npx expo install expo-font @expo-google-fonts/roboto expo-haptics react-native-safe-area-context

npx expo install react-native-reanimated react-native-gesture-handler lottie-react-native

Incluir a linha react-native-reanimated/plugin nos plugins do arquivo babel.config.js

4. O que está incluído?

EMCHeader: cabeçalho padrão com logomarca utilizado geralmente na tela Home
EMCHeaderSimple: cabeçalho padrão simplificado sem logomarca utilizado geralmente nas demais telas
EMCHeaderResponse: cabeçalho utilizado em telas exibidas após um envio de documento fiscal ao backend
EMCBox: implementa uma View nativa
EMCBoxSafe: implementa uma View nativa dentro de uma SafeAreaView
EMCVStack: implementa uma View nativa
EMCVStackSafe: implementa uma View nativa dentro de uma SafeAreaView
EMCHStack: implementa uma View nativa com orientação horizontal
EMCHStackSafe: implementa uma View nativa com orientação horizontal dentro de uma SafeAreaView
EMCCenter: implementa uma View com orientação centralizada
EMCCenterSafe: implementa uma View com orientação centralizada dentro de uma SafeAreaView
EMCDivider: linha fina horizontal para divisão de itens na tela
EMCButton: implementa um Pressed nativo com propriedades personalizadas
EMCBoletoButton: exibe um botão personalido para visualização de arquivo de boletos bancários
EMCWhatsAppButton: exibe um botão personalido para envio de mensagem por whatsapp
EMCButtonMenu: botão padrão de opções utilizado geralmente na tela Home dos apps
EMCWhatsAppNumber: exibe um caixa de diálogo para informar o número de telefone do whatsapp de destino
EMCCircularButton: botão circular flutuante com ícone
EMCScrollView: implementa uma ScrollView nativa sem barra de rolagem na vertical
EMCText: implementa um nativo
EMCHeadText: Exibe um texto em negrito utilizado geralmente em telas de login
EMCTextArea: implementa um Input nativo com suporte a múltiplas linhas
EMCTextInput: implementa um Input nativo
EMCFakeInput: componente que imita um Input desabilitado. Somente para exibição de informação.
EMCIcon: exibe na tela um ícone de qualquer família de ícones da biblioteca @expo/vector-icons
EMCInputSelectors: input de texto para conteúdo numérico com seletores nas laterais
EMCMaskedInput: implementa um Input nativo com máscara automática
EMCMessage: exibe uma mensagem ao usuário utilizando a função nativa Alert.alert
EMCDialog: exibe uma caixa de mensagem com a opção de incluir um campo para solicitação de dados
EMCSpinner: implementa um ActivityIndicator nativo
EMCSafeArea: implementa uma SafeAreaView
EMCDecimalKeyboard: teclado customizado para digitação de valores numéricos
EMCBackground: background utilizado em todas as telas
EMCCalendar: calendário estilizado utilizando a lib react-native-calendars
showToast: função que mostra uma mensagem temporária no formato Toast
EMCToastModal: componente que exibe um toast como na função bashowToast para utilização em modals sem transparência
EMCDropDown: exibe um fake dropdown (deve ser implementado um modal para exibir a lista de itens)
EMCAvatar: exibe uma view de avatar em formato circular com a imagem passada
EMCLogo: exibe uma logomarca passada como parâmetro (base64) ou a logo da EMC Sistemas caso a base64 não seja passada
EMCSwitch: implementa um Switch nativo
EMCDiscountSwitch: exibe um switch personalizado para seleção do tipo de desconto (percentual ou valor)
EMCWait: exibe um modal com fundo escuro e semi-transparente para indicar processamento de alguma operação
EMCBannerDemo: banner que é exibido ao entrar no app quando se trata de um cliente de demonstração