fitcard-ui-react-native
<p align="center"> <img src="docs/assets/images/fitcard.png" height="50" /> </p> <p align="center">Mobile UI components.</p>
Last updated 10 days ago by tifitcard .
Original npm · Tarball · package.json
$ cnpm install fitcard-ui-react-native 
SYNC missed versions from official npm registry.

Mobile UI components.


npm npm

Instalação

Instale as dependências:

yarn add @react-native-community/datetimepicker react-native-gesture-handler react-native-text-input-mask

Instale a biblioteca:

yarn add fitcard-ui-react-native

(IOS) Adicione a biblioteca react-native-text-input-mask no Podfile:

pod 'RNInputMask', :path => '../node_modules/react-native-text-input-mask/ios/InputMask'

Utilização

Envolva todo o app com o ThemeProvider:

import { ThemeProvider } from 'fitcard-ui-react-native';

const theme = {
  colors: {
    primary: '#FF4F4F',
    secondary: '#000',
    error: '#FF4F4F',
    primaryText: '#000',
    secondaryText: '#98A9BB',
    background: '#FFF',
    foreground: '#FFF',
    formsBackground: '#F0F3F8',
    border: '#F0F3F8',
    toast: {
      danger: '#FF4F4F',
      success: '#21BA45',
      warning: '#FBBD08',
    },
  },
  fonts: {
    light: {
      fontFamily: 'CircularStd-Book',
    },
    medium: {
      fontFamily: 'CircularStd-Medium',
    },
    bold: {
      fontFamily: 'CircularStd-Bold',
    },
    black: {
      fontFamily: 'CircularStd-Black',
    },
  },
};

function Root() {
  return (
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  );
}

Importando os componentes:

import { Button, Card } from 'fitcard-ui-react-native';

Componentes

Button

<Button
  text="Button"
  onPress={() =>  console.log('pressed!')}
/>
prop tipo padrão descrição
text string (obrigatório) Texto a ser exibido dentro do botão.
onPress () => void (obrigatório) Callback chamado quando o botão é pressionado.
loading boolean false Indica se o botão está carregando.
light boolean false Usa o tema claro (light).
disabled boolean false Desabilita o botão.
containerStyle StyleProp<ViewStyle> null Estilo da View que envolve o componente.
textStyle StyleProp<TextStyle> null Estilo do texto do botão.

TagButton

<TagButton
  text="Sort"
  icon="sort"
  onPress={() => console.log('pressed!')}
/>
prop tipo padrão descrição
text string (obrigatório) Texto a ser exibido no botão.
onPress () => void (obrigatório) Callback chamado quando o botão é pressionado.
active boolean false Indica se está ativo. Quando ativo, o botão ganha cor.
activeColor string Cor padrão do tema Cor customizada de quando o botão estiver ativo.
containerStyle StyleProp<ViewStyle> null Estilo da View que envolve o componente.
textStyle StyleProp<TextStyle> null Estilo do texto.
icon string '' Nome do ícone.
iconColor string colors.primaryText Cor do icone.
disabled boolean false Desabilita o botão.

IconButton

<IconButton
  icon="circle"
  type="solid"
  onPress={() => console.log('pressed!')}
/>
prop tipo padrão descrição
icon string (obrigatório) Nome do ícone do botão.
iconSize number 16 Tamanho do ícone.
color string primary color Cor do ícone.
type 'solid' | 'regular' 'regular' O tipo do icone.
bgColor string light primary color BackgroundColor.
noBackground boolean false Remove o background do botão.
onPress () => void undefined Callback chamado quando o botão é pressionado.
disabled boolean false Desabilita o botão.

TextButton

<TextButton onPress={() => console.log('pressed!')}>Button</TextButton/>
prop tipo padrão descrição
color string primary color Cor do texto do botão.
onPress () => void undefined Callback chamado quando o botão é pressionado.
style StyleProp<TextStyle> null Estilo do texto do botão.
bold boolean false Deixa o texto do botão em negrito.

NavBar

<NavBar
  title="Home"
  leftComponent={<NavBar.BackAction onPress={() => {}} />}
  rightComponent={<NavBar.Action icon="search" />}
/>
prop tipo padrão descrição
leftComponent ReactNode undefined Componente esquerdo da barra de navegação.
rightComponent ReactNode undefined Componente direito da barra de navegação.
flat boolean false Remove a sombra (Android) ou a borda inferior (IOS).
containerStyle StyleProp<ViewStyle> null Estilo da <View /> que envolve o componente.
rightContentStyle StyleProp<ViewStyle> null Estilo da <View /> que envolve o componente direito.
leftContentStyle StyleProp<ViewStyle> null Estilo da <View /> que envolve o componente esquerdo.
title string '' O texto a ser exibido como título.

CustomNavBar

<CustomNavBar
  leftComponent={<NavBar.BackAction onPress={() => {}} />}
  middleComponent={(
    <TextInput
      placeholder="Pesquise algo..."
      size="small"
      showClearButton
    />
  )}
  rightComponent={<TextButton>Button</TextButton/>}
/>
prop tipo padrão descrição
leftComponent ReactNode undefined Componente esquerdo da barra de navegação.
middleComponent ReactNode undefined Componente do meio da barra de navegação.
rightComponent ReactNode undefined Componente direito da barra de navegação.
flat boolean false Remove a sombra (Android) ou a borda inferior (IOS).
containerStyle StyleProp<ViewStyle> null Estilo da View que envolve o componente..

NavBarBackAction

<NavBar.BackAction onPress={() => console.log('pressed!')} />
prop tipo padrão descrição
onPress () => void undefined Callback chamado quando o botão é pressionado.
size number 20 (android) 24 (ios) Tamanho do ícone.
color string primary color Cor do ícone.

NavBarAction

<NavBar.Action
  icon="search"
  color="red"
  onPress={() => console.log('pressed!')}
/>
prop tipo padrão descrição
onPress () => void undefined Callback chamado quando o botão é pressionado.
icon string (obrigatório) Nome do ícone
color string #000 Cor do ícone.
size number 20 (android) 24 (ios) Tamanho do ícone.
type 'solid' | 'regular' 'regular' Tipo do ícone.

TextInput

<TextInput
  placeholder="Placeholder"
  onChangeText={text => console.log(text)}
/>
prop tipo padrão descrição
disabled boolean false Desabilita o campo.
error boolean false Muda a cor do campo, indicando erro.
size 'normal' | 'small' 'normal' Tamanho do campo.
showClearButton boolean false Mostra um pequeno botão para limpar o texto do campo.
onClear () => void undefined Callback que é chamado quando o campo é limpado.
onChangeText (text: string) => void Prop padrão do React Native.

DateTimePicker

<DateTimePicker
  placeholder="Escolha uma data"
  IOSHeaderTitle="Escolha uma data"
  date={new Date()}
  onChange={(event, value) => console.log(event, value)}
/>

*Herda as props do @react-native-community/datetimepicker.

prop tipo padrão descrição
containerStyle StyleProp<ViewStyle> null Estilo da View que envolve o componente.
placeholder string '' Texto a ser exibido quando o valor do Picker está vazio.
defaultDate string '' Define um valor inicial para a data mostrada no Picker.
mode 'time' | 'date' | 'datetime' | 'countdown' 'date' O tipo formato de data a ser mostrado.
disabled boolean false Desabilita o Picker.
customFormat string 'dd MMM, yyyy' Uma máscara xDate personalizada para formatar o valor de exibido no Picker.
date Date undefined A data selecionada a ser exibida no Picker.
IOSHeaderTitle string '' Texto a ser exibido no header no modal no IOS.
error boolean false Muda a cor do campo, indicando erro.

Picker

<Picker
  onValueChange={item => console.log(item)}
  selectedValue={'Opção 1'}
  items={['Opção 1', 'Opção 2']}
  valueExtractor={item => item}
  labelExtractor={item => item}
  keyExtractor={item => item}
/>
prop tipo padrão descrição
selectedValue string | number (obrigatório) O item selecionado do array de itens fornecido.
onValueChange (itemValue: string | number, itemPosition: number) => void (obrigatório) Callback chamado quando o item selecionado é alterado.
disabled boolean false Desabilita o Picker.
items any[] (obrigatório) Array de itens disponível para escolha.
loading boolean false Indica se está carregando.
keyExtractor (item: any) => string (obrigatório) Indica qual propriedade no array de itens é usada para ser a key.
labelExtractor (item: any) => string (obrigatório) Indica qual propriedade no array de itens é usada para ser a label.
valueExtractor (item: any) => string (obrigatório) Indica qual propriedade no array de itens é usada para ser o valor.
error boolean false Muda a cor do campo, indicando erro.

FormGroup

<FormGroup label="Usuário" error="Este campos é obrigatório!">
  <TextInput placeholder="Seu nome de usuário" secureTextEntry />
</FormGroup>
prop tipo padrão descrição
label string (obrigatório) Texto a ser exibido como label.
error string '' Mensagem de erro.
style StyleProp<ComponentStyle> null Estilo do componente.
required boolean false Indica se o campo é obrigatório.

Card

<Card title="Card title" icon="clone">
  <Paragraph>
    Mussum Ipsum, cacilds vidis litro abertis.
    Si num tem leite então bota uma pinga aí cumpadi!
    Delegadis gente finis, Vide electram sadipscing et per.
  </Paragraph>
</Card>
prop tipo padrão descrição
icon 'string' | 'number' undefined Nome do icone do card.
iconColor string primary color Cor do icone do card.
title string (obrigatório) Texto a ser exibido como título no card.
rightContent ReactNode undefined O conteúdo posicionado à direta do header do card.
onPress () => void undefined Deixa o cartão inteiro clicável e é chamado quando é pressionado.
mode 'shadowed' | 'bordered' 'bordered' Modo do estilo do card.

ListItem

<ListItem
  title="List item title"
  description="List item description"
  rightComponent={(
    <Tag
      light
      text="Pending"
      bgColor="#FFB800"
      containerStyle={{ alignSelf:  'flex-end' }}
    />
  )}
/>
prop tipo padrão descrição
title string undefined Título do item, exibido em negrito.
description string undefined Descrição do item da lista, exibida em cinza e pequena.
rightComponent ReactNode undefined Conteúdo posicionado à direita da linha.
leftComponent ReactNode undefined Conteúdo posicionado à esquerda da linha.
rightContentStyle StyleProp<ViewStyle> null Estilo da View que envolve o componente direito.
leftContentStyle StyleProp<ViewStyle> null Estilo da View que envolve o componente esquerdo.
containerStyle StyleProp<ViewStyle> null Estilo da View que envolve o componente.
onPress () => void undefined Quando fornecido, torna a lista clicável e é chamado quando pressionado.

MenuListItem

Normal:

<MenuListItem
  title="Home"
  icon="layer-group"
  iconType="solid"
  onPress={() => console.log('pressed!')}
/>

Collapsible:

<MenuListItem
  title="Notifications"
  icon="bell"
  iconType="solid"
  onPress={() => console.log('pressed!')}
>
  {...}
</MenuListItem>
prop tipo padrão descrição
containerStyle StyleProp<ViewStyle> null Estilo da View que envolve o componente.
textStyle StyleProp<TextStyle> null Estilo do texto do item.
iconColor string #8698AB Cor do ícone.
icon string undefined O nome do ícone.
title string (obrigatório) O texto a ser exibido.
onPress () => void undefined Callback chamado quando o item é pressionado.
active boolean false Indica se está ativo (selecionado).
iconType 'regular' | 'solid' 'regular' O tipo do ícone.

MenuListSubitem

<MenuListSubitem
  title="Notifications sub 1"
  onPress={() => console.log('pressed!')}
/>
prop tipo padrão descrição
title string (obrigatório) O texto a ser exibido.
onPress () => void undefined Callback chamado quando o subitem é pressionado.

MenuSeparator

<MenuSeparator>Separador</MenuSeparator>
prop tipo padrão descrição
style StyleProp<TextProps> undefined Estilo do texto.

ListMenu

Componente que cria o menu inteiro utilizando a estrutura de um array.

<ListMenu
  items={[
    {
      type:  'separator',
      text:  'Separator',
    },
    {
      type:  'menu-item',
      text:  'Home',
      icon:  'layer-group',
      iconType:  'solid',
      onPress: () => {},
    },
    {
      type:  'menu-item',
      text:  'Notifications',
      icon:  'bell',
      iconType:  'solid',
      onPress: () => {},
      subItems: [
        {
          type:  'menu-item',
          text:  'Notifications sub 1',
          onPress: () => {},
        },
        {
          type:  'menu-item',
          text:  'Notifications sub 2',
          onPress: () => {},
        },
      ],
    },
    {
      type:  'menu-item',
      text:  'Emails',
      iconType:  'solid',
      icon:  'layer-group',
      onPress: () => {},
    },
    {
      type:  'menu-item',
      text:  'Settings',
      iconType:  'solid',
      icon:  'cog',
      onPress: () => {},
    },
    {
      type:  'separator',
      text:  'Separator Two',
    },
    {
      type:  'menu-item',
      text:  'Star',
      iconType:  'solid',
      icon:  'star',
    },
    {
      type:  'menu-item',
      text:  'Likes',
      iconType:  'solid',
      icon:  'heart',
    },
  ]}
/>
prop tipo padrão descrição
items MenuItem[] (obrigatório) Os itens do menu.

Tag

<Tag
  text="Pending"
  bgColor="#FFB800"
/>
prop tipo padrão descrição
containerStyle StyleProp<ViewStyle> null Estilo da View que envolve o componente.
bgColor string #000 BackgroundColor.
textColor string #FFF Cor do texto. É ignorado quando light for falso.
iconColor string #FFF Cor do ícone. É ignorado quando light for falso.
text string '' Texto a ser exibido.
icon string '' Nome do ícone.
light boolean false Muda o design da tag para o claro (light).

Text

<H1>Heading 1</H1>

<H2>Heading 2</H2>

<H3>Heading 3</H3>

<Paragraph>Paragraph</Paragraph>

<Description>Description</Description>
prop tipo padrão descrição
style StyleProp<TextStyle> null Estilo do texto

AnimatedScrollablePage

Renderiza um header com uma animação ao rolar a página para baixo.

<AnimatedScrollablePage title="Home">
  {...}
</AnimatedScrollablePage>
prop tipo padrão descrição
title string '' Texto a ser exibido no header.
containerStyle StyleProp<ViewStyle> null Estilo da View que envolve o componente.

OptionList

Renderiza vários <TagButtons /> como uma lista de uma única opção selecionável.

<OptionList
  options={[
    { text:  'Cats', value: 1 },
    { text:  'Dogs', value: 2 },
    { text:  'Birds', value: 3 },
  ]}
  keyExtractor={item => item.text}
  selected={0}
  onChange={index => console.log(index)}
/>
prop tipo padrão descrição
options Option[] (obrigatório) O array para renderizar as opções.
onChange (itemIndex: number) => void (obrigatório) Callback chamado quando o item selecionado é alterado.
selected number undefined Índice do item selecionado.
optionActiveColor string colors.primary Cor da option quando está ativa.
optionContainerStyle StyleProp<ViewStyle> null Estilo da view que envolve a option <TagButton />.
optionTextStyle StyleProp<TextStyle> null Estilo do texto da option <TagButton />.
keyExtractor (item: Option) => string (obrigatório) Função para popular a 'key' do componente no loop.

PageWrapper

Componente padrão para envolver todas as páginas.

<PageWrapper>
  {...}
</PageWrapper>
prop tipo padrão descrição
style StyleProp<ViewStyle> null Estilo da <View />
safeArea boolean false Renderiza ou não um SafeAreaView

ScrollablePage

É usado como componente padrão em todas as páginas com scroll, pois respeita todas as métricas de margins e paddings.

<ScrollablePage>
  {...}
</ScrollablePage>
prop tipo padrão descrição
keyboardShouldPersistTaps 'never' | 'always' | 'handled' 'handled' A prop keyboardShouldPersistTaps normal da View com o 'handled' definido como padrão.

PagedList

Componente que utiliza a <FlatList /> do React Native e trata a lógica de paginação, implementando o scroll infinito.

<PagedList
  title="Title"
  page={1}
  totalPages={2}
  data={[]}
  renderItem={renderItem}
  keyExtractor={item => String(item.id)}
/>
prop tipo padrão descrição
data any[] (obrigatório) Dados da lista.
onEndReached () => void undefined Callback chamado quando o fim da <ScrollView /> é atingido.
page number (obrigatório) Página atual.
totalPages number (obrigatório) Número total de páginas dos dados.
useHeader boolean false Renderiza um <AnimatedHeader />, aparecendo quando rolado.
title string '' Se useHeader for verdadeiro, usa como título do <AnimatedHeader />

BottomSheet

<BottomSheetContainer>
  {...page}
  <BottomSheet visible={false} height={300}>
    {...}
  </BottomSheet>
</BottomSheetContainer>
prop tipo padrão descrição
visible boolean false Indica se o componente está visivel ou não.
showBackdrop boolean true Indica se o backdrop será visível ou não.
height number (obrigatório) Altura do card do bottom sheet.
style StyleProp<ViewStyle> null Estilo do componente.
backdropStyle StyleProp<ViewStyle> null Estilo do backdrop.
onBackdropPress (event: GestureResponderEvent) => boolean null É chamado quando é pressionado o backdrop do componente.

BottomSheetContainer

Componente que permite o backdrop do <BottomSheet /> ser ajustado adequadamente na tela.

<BottomSheetContainer>
  {...page}
</BottomSheetContainer>

*Herda as props de uma <View /> do React Native.


TextArea

<TextArea placeholder="Insert a text..." />
prop tipo padrão descrição
disabled boolean false Desabilita o campo.
error boolean false Muda a cor do campo, indicando erro.

*Herda as props de um <TextInput /> do React Native.

MaskedTextInput

<MaskedTextInput
  placeholder="Placeholder"
  onChangeText={(formatted, extracted) => {
    console.log(formatted) // +1 (123) 456-78-90
    console.log(extracted) // 1234567890
  }}
  mask="+1 ([000]) [000] [00] [00]"
/>
prop tipo padrão descrição
disabled boolean false Desabilita o campo.
error boolean false Muda a cor do campo, indicando erro.
size 'normal' | 'small' 'normal' Tamanho do campo.
mask string '' Máscara utilizada no texto do campo.
onChangeText (formatted: string, extracted: string) => void Callback executado quando o texto é mudado.

*Herda as props do react-native-text-input-mask.


MultiSelect

<MultiSelect
  modalTitle="Choose a item"
  placeholder="Choose a item"
  searchPlaceholder="Search fruits"
  maxSelectedItems={3}
  onChange={setSelectedItems}
  items={[{ text: 'Apple', value: 1 }, { text: 'Banana', value: 2 }]}
  selected={{ 1: 'Apple' }}
  keyExtractor={item => String(item.value)}
/>
prop tipo padrão descrição
items Item[] (obrigatório)
onClose (selected: Record<string | number, string>) => void (obrigatório) Callback executado quando o picker é fechado (Retorna os itens selecionados).
keyExtractor (item: Item, index: number) => string (obrigatório)
maxSelectableItems number undefined Máximo de itens selecionáveis.
placeholder string ''
modalTitle string (obrigatório)
searchPlaceholder string '' Placeholder do campo de busca.
disabled boolean false
valueKey string 'value' Nome customizado para ser usado como propriedade do valor.
textKey string 'text' Nome customizado para ser usado como propriedade do texto.

SearchablePicker

<SearchablePicker
  modalTitle="Choose a item"
  placeholder="Choose a item"
  searchPlaceholder="Search fruits"
  items={[{ text: 'Apple', value: 1 }, { text: 'Banana', value: 2 }]}
  onChange={setSelectedSearchableItems}
  selected={1}
  keyExtractor={item => String(item.value)}
/>
prop tipo padrão descrição
items Item[] (obrigatório)
selected string | number undefined Item selecionado (propriedade "value").
onChange (selected: SelectedItems) => void (obrigatório) Callback executado quando um item é escolhido.
keyExtractor (item: Item, index: number) => string (obrigatório)
placeholder string ''
modalTitle string (obrigatório)
searchPlaceholder string '' Placeholder do campo de busca.
disabled boolean false
valueKey string 'value' Nome customizado para ser usado como propriedade do valor.
textKey string 'text' Nome customizado para ser usado como propriedade do texto.

Toast

Envolva o provider na raiz do projeto:

<ToastProvider>
  {...rest}
</ToastProvider>

Utilização:

const toast = useToast();

toast.show({ message: 'Oops! Ocorreu um erro.' });
prop tipo padrão descrição
message string (obrigatório) Mensagem mostrada no Toast.
type 'danger' | 'success' | 'warning' 'danger'
visible boolean false
buttonText string (obrigatório) Texto a ser mostrado no botão.
duration number 1500 Duração do toast.

Current Tags

  • 1.3.3                                ...           latest (10 days ago)

33 Versions

  • 1.3.3                                ...           10 days ago
  • 1.3.2                                ...           22 days ago
  • 1.3.1                                ...           a month ago
  • 1.3.0                                ...           a month ago
  • 1.2.0                                ...           2 months ago
  • 1.1.14                                ...           2 months ago
  • 1.1.13                                ...           2 months ago
  • 1.1.12                                ...           2 months ago
  • 1.1.11                                ...           2 months ago
  • 1.1.10                                ...           3 months ago
  • 1.1.9                                ...           3 months ago
  • 1.1.8                                ...           3 months ago
  • 1.1.7                                ...           4 months ago
  • 1.1.6                                ...           4 months ago
  • 1.1.5                                ...           4 months ago
  • 1.1.4                                ...           4 months ago
  • 1.1.3                                ...           4 months ago
  • 1.1.2                                ...           4 months ago
  • 1.1.1                                ...           4 months ago
  • 1.1.0                                ...           4 months ago
  • 1.0.9                                ...           5 months ago
  • 1.0.8                                ...           5 months ago
  • 1.0.7                                ...           5 months ago
  • 1.0.6                                ...           6 months ago
  • 1.0.5                                ...           6 months ago
  • 1.0.4                                ...           6 months ago
  • 1.0.3                                ...           6 months ago
  • 1.0.2                                ...           6 months ago
  • 1.0.1                                ...           6 months ago
  • 1.0.0                                ...           6 months ago
  • 0.0.4                                ...           6 months ago
  • 0.0.3                                ...           6 months ago
  • 0.0.2                                ...           6 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 28
Last Day 0
Last Week 18
Last Month 35
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |