fitcard-ui-react-native v1.9.4

Instalação

Instale as dependências:

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

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

• AnimatedScrollablePage
• Button
• BottomSheet
• BottomSheetContainer
• Card
• CustomNavBar
• DateTimePicker
• Disclaimer
• FormGroup
• IconButton
• ListItem
• ListMenu
• MaskedTextInput
• MenuListItem
• MenuListSubitem
• MenuSeparator
• MultiSelect
• NavBar
• NavBar BackAction
• NavBar Action
• OptionList
• Picker
• PagedList
• PageWrapper
• SearchablePicker
• ScrollablePage
• TextInput
• TextArea
• Tag
• TagButton
• TextButton
• Text
• Toast

Button

<Button
  text="Button"
  onPress={() =>  console.log('pressed!')}
/>

TagButton

<TagButton
  text="Sort"
  icon="sort"
  onPress={() => console.log('pressed!')}
/>

IconButton

<IconButton
  icon="circle"
  type="solid"
  onPress={() => console.log('pressed!')}
/>

TextButton

<TextButton onPress={() => console.log('pressed!')}>Button</TextButton/>

NavBar

<NavBar
  title="Home"
  leftComponent={<NavBar.BackAction onPress={() => {}} />}
  rightComponent={<NavBar.Action icon="search" />}
/>

CustomNavBar

<CustomNavBar
  leftComponent={<NavBar.BackAction onPress={() => {}} />}
  middleComponent={(
    <TextInput
      placeholder="Pesquise algo..."
      size="small"
      showClearButton
    />
  )}
  rightComponent={<TextButton>Button</TextButton/>}
/>

NavBarBackAction

<NavBar.BackAction onPress={() => console.log('pressed!')} />

NavBarAction

<NavBar.Action
  icon="search"
  color="red"
  onPress={() => console.log('pressed!')}
/>

TextInput

<TextInput
  placeholder="Placeholder"
  onChangeText={text => console.log(text)}
/>

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.

Disclaimer

<Disclaimer
        icon="atom"
        title="Titulo titulo"
        description="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."
        stateView="smooth"
        selectColor="danger"
/>

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}
/>

FormGroup

<FormGroup label="Usuário" error="Este campos é obrigatório!">
  <TextInput placeholder="Seu nome de usuário" secureTextEntry />
</FormGroup>

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>

ListItem

<ListItem
  title="List item title"
  description="List item description"
  rightComponent={(
    <Tag
      light
      text="Pending"
      bgColor="#FFB800"
      containerStyle={{ alignSelf:  'flex-end' }}
    />
  )}
/>

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>

MenuListSubitem

<MenuListSubitem
  title="Notifications sub 1"
  onPress={() => console.log('pressed!')}
/>

MenuSeparator

<MenuSeparator>Separador</MenuSeparator>

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',
    },
  ]}
/>

Tag

<Tag
  text="Pending"
  bgColor="#FFB800"
/>

Text

<H1>Heading 1</H1>

<H2>Heading 2</H2>

<H3>Heading 3</H3>

<Paragraph>Paragraph</Paragraph>

<Description>Description</Description>

AnimatedScrollablePage

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

<AnimatedScrollablePage title="Home">
  {...}
</AnimatedScrollablePage>

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)}
/>

PageWrapper

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

<PageWrapper>
  {...}
</PageWrapper>

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>

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)}
/>

BottomSheet

<BottomSheetContainer>
  {...page}
  <BottomSheet visible={false} height={300}>
    {...}
  </BottomSheet>
</BottomSheetContainer>

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..." />

*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]"
/>

*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)}
/>

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)}
/>

Toast

Envolva o provider na raiz do projeto:

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

Utilização:

const toast = useToast();

toast.show({ message: 'Oops! Ocorreu um erro.' });