ame-miniapp-components v3.0.1

MiniApp Components

Consiste em uma coletânea de componentes para construção de mini-apps.

Sumário

• Instalação

• Unidades de medida

• Propriedades Comuns

• Lista de componentes

  • Componentes Estruturais

    • Window

    • View

    • Card

    • FlexBox

    • Separator

  • Imagens

    • Image

    • ImageBackground

  • Componentes Lógicos

    • If

    • Repeater

  • Componentes Interativos

    • Touchable

    • DatePicker

    • Switch

    • Stepper

    • Botões

      • SolidButton

      • GhostButton

      • SoftButton

      • TextLink

      • SearchButton

      • CircleButton

  • Componentes de Texto

    • Text

    • Title

    • PriceFormat

• SuperCoponentes

  • Header

  • ProductCard

  • TabNavigator

  • Warning

  • ActivityIndicator

• StyleResolver

Instalação

Abra o seu terminal e execute o seguinte comando:

npm install miniapp-components

Os componentes precisam ser importados conforme a sua necessidade, veja o exemplo:

import { Window, Image, Text } from "miniapp-components";

Unidades de medida

Os componentes utilizam unidades de medida interna que são caracterizadas pelo uso de números em propriedades ou strings quando utilizamos porcentagens ou outros tipos de medida.

Você pode utilizar uma unidade de medida numérica, ex.:

<View width={50} />

Você pode utilizar uma unidade de medida percentual, ex.:

<View width={"100%"} />

Propriedades Comuns

Todos os componentes descendem de uma mesma classe que possui propriedades úteis.

São elas:

margin Number Configura um mesmo valor para todas as margens.

marginVertical Number Configura um mesmo valor para as margens superior e inferior, sobrescreve a propriedade margin.

marginHorizontal Number Configura um mesmo valor para as margens esquerda e direita, sobrescreve a propriedade margin.

marginTop Number Configura um valor para margem superior, sobrescreve margin e marginVertical.

marginBottom Number Configura um valor para margem inferior, sobrescreve margin e marginVertical.

marginLeft Number Configura um valor para margem à esquerda, sobrescreve margin e marginHorizontal.

marginRight Number Configura um valor para margem à direita, sobrescreve margin e marginHorizontal.

width Number|String Define uma largura para o componente.

height Number|String Define uma altura para o componente.

fixed top | bottom Fixa um componente no topo ou em baixo da tela.

drop top | bottom Desliza um componente 100% do seu tamanho para cima ou para baixo.

zIndex Number Especifica a ordem-z de um elemento e de seus herdeiros

Lista de componentes

Segue abaixo a lista de componentes, nós dividimos a lista em categorias para facilitar a compreensão.

Componentes Estruturais

Componentes estruturais são feitos para diagramar o conteúdo, basicamente são contêineres de conteúdo. São eles:

Window

Utilize o componente Window como um componente mestre que envolve toda tela. Seu uso é obrigatório e ele deverá ser o primeiro nó de todas as telas. Nunca utilize Window dentro de outro Window.

Importação do componente:

import { Window } from "miniapp-components";

Utilização:

<Window>... outras tags maravilhosas</Window>

<Window pullToRefresh="{function}">... outras tags maravilhosas</Window>

Parâmetros

pullToRefresh Function Permite que a View seja atualizável. Semelhante as funcionalidades de Pull To Refresh do Facebook e Instagram. Este retorna uma Promise (veja mais em https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise).

View

View padrão, menor unidade de divisão de conteúdo.

Exemplo de utilização

<View style={{ backgroundColor: "#e7e5e5" }} />

Parâmetros

View extende o componente BaseComponent, herdando suas propriedades.

style Estilização geral para a view

children Any | Obrigatório Conteúdo.

horizontal Boolean Altera a disposição da view para horizontal

borderRadius String ou Number Define o tamaho do arredondamento da borda

boxShadow StringouNumber` Permite inserir uma sombra ou Glow no componente.

ScrollView

Utilizado para exibição de conteúdo maior que a tela, atribuindo um scroll (na vertical ou horizontal)

Exemplo de utilização

<ScrollView horizontal snap>
  <Image source={"https://picsum.photos/seed/1/420/270"} />
  <Image source={"https://picsum.photos/seed/2/420/270"} />
  <Image source={"https://picsum.photos/seed/3/420/270"} />
  <Image source={"https://picsum.photos/seed/4/420/270"} />
  <Image source={"https://picsum.photos/seed/5/420/270"} />
</ScrollView>

Parâmetros

ScrollView extende o componente BaseComponent, herdando suas propriedades.

children Any | Obrigatório Conteúdo.

horizontal Boolean Realiza a exibição na forma horizontal. Padrão: vertical.

snap Boolean Move o conteúdo por sua totalidade.

hideScroll Boolean Esconde a barra de scroll.

itemsWidth Number|String Largura dos itens dentro do scrollview, valor único.

Card

Utilizado para emoldurar outros elementos, ele possui uma margem padrão que pode ser alterada. Funciona semelhante ao componente view, mas já possui essa margem por padrão e podemos adicionar borda, sombra e outras coisas.

Exemplo de utilização

<Card
  bordered
  shadow
  borderRadius={20}
  backgroundColor={"red"}
  color={"white"}
  height={50}
>
  Este é um Card
</Card>

Parâmetros

Card extende o componente BaseComponent, herdando suas propriedades.

shadow Boolean Adiciona sombra.

children Any | Obrigatório Conteúdo

backgroundColor String Aplica uma cor de fundo ao card

color String Adiciona cor ao texto

height String ou Number Altera o tamanho do card

selectable Boolean Permite selecionar o texto.

borderRadius String ou Number Define o tamanho da borda do card

bordered Boolean Adiciona borda.

As propriedades abaixo somente podem ser alteradas caso a propriedade bordered não seja declarada ou com valor igual a false.

borderWidth String ou Number Define a espessura da borda

borderColor String Altera a cor da borda

borderStyle String Altera o estilo da borda

FlexBox

Uma view que possui comportamentos semelhantes ao flexbox do HTML

Exemplo de utilização

<FlexBox>
  <Text>FlexBox</Text>
</FlexBox>

Parâmetros

children Any Conteúdo.

Propriedades do CSS elegíveis:

• flex
• flexDirection
• alignItems
• flexWrap
• justifyContent

ListView

Utilize para diagramar itens

Exemplo de utilização

<ListView items={[
                     {
                         key: '1',
                         title: 'Título do Item (Opcional)',
                         subtitle: 'Subtítulo (Opcional)',
                         image: 'Path para Imagem (Opcional)'
                     },
                     //... Outros itens
                 ]}
            backgroundColor="#e5e5e5"
            borderColor="#c5c5c5"
            color="#353535"
            onItemSelect={(item, index) => {
                //...
            }}
            renderImage={(image, title) => (
                    <Image source={image} />
                )
            }
 />

Parâmetros

items Array Coleção de Itens que será disposta no listView

backgroundColor String Cor de fundo

borderColor String Cor das bordas

color String Cor do texto

onItemSelect Function Função que é invocada a cada interação no item

renderImage Function Função de renderização de imagem

renderTitle Function Função de renderização do título

renderSubtitle Function Função de renderização do subtítulo

Separator

Utilizado para separar conteúdos.

Exemplo de utilização

Parâmetros

Separator extende o componente BaseComponent, herdando suas propriedades.

backgroundColor String Define uma cor para o separator

Imagens

Existem basicamente dois elementos que comportam imagens, um distribui a imagem como conteúdo e a outra como plano de fundo. Veja detalhes abaixo:

Image

Utilizado para a exibição de imagens.

Exemplo de utilização

<Image source={`http://lorempixel.com/300/300/food/`} round />

Parâmetros

Image extende o componente BaseComponent, herdando suas propriedades.

source String Link da imagem que será exibida.

Somente imagens dentro do projeto ou HTTPS são permitidas.

round Exibe a imagem em formar circular.

height String e Number Define a altura da imagem.

width String e Number Define a largura da imagem.

borderRadius String e Number Medida da borda arredondada.

ImageBackground

Utilizado para imagem de fundo.

Exemplo de utilização

<ImageBackground
  source={"http://lorempixel.com/250/70/food/"}
  width={250}
  height={70}
  backgroundSize={"cover"}
  backgroundPosition={"center"}
  parallax={50}
/>

Parâmetros

ImageBackground extende o componente BaseComponent, herdando suas propriedades.

source String | Obrigatório Caminho da imagem de fundo.

Somente imagens dentro do projeto ou HTTPS são permitidas.

backgroundSize String | Obrigatório Especifica o tamanho da imagem de fundo.

backgroundPosition String | Number determina a posição da imagem de fundo.

backgroundAttachment String determina se a imagem de fundo é fixa ou não.

backgroundRepeat String determina se a imagem de fundo irá se repetir.

backgroundClip String fundo de um elemento, seja cor ou imagem, se extende debaixo de sua borda.

parallax Number Define o posicionamento no efeito parallax.

Componentes Lógicos

Componentes lógicos permitem a aparição de componentes em determinadas condições. Veja abaixo os componentes:

If

Utilizado para exibir conteúdo, de acordo com a condição.

Exemplo de utilização

<If test={"algum tipo de dado"}>
  <Title size={2}>Título do Title</Title>
</If>

Parâmetros

test Any | Obrigatório Tipo de condição a ser testada

children Any | Obrigatório Conteúdo a ser exibido ou não de acordo com o teste.

Realiza a validação do resultado em true ou false, e em caso verdadeiro o conteúdo é exibido.

Tipos de dados aceitos neste componente: String, Number, Array, Object e Boolean.

Repeater

Utilizado para listas de conteúdo.

Exemplo de utilização

let itemsForRepeater = ['AME', 'MiniApp', 'AME SuperApp']

<Repeater items={itemsForRepeater}>
    {item => (
        <View>
            <Text>{item}</Text>
        </View>
    )}
</Repeater>

Parâmetros

children Any | Obrigatório Conteúdo a ser exibido.

items Array | Obrigatório Itens da lista de conteúdo.

Componentes Interativos

São componentes que permitem interação do usuário, veja a lista abaixo:

Touchable

Exemplo de utilização

<Touchable onClick={()=>{ ...ação qualquer }} >
... conteúdo clicável qualquer
</Touchable>

Parâmetros

Touchable extende o componente BaseComponent, herdando suas propriedades.

onClick Function Função que será evocada ao tocar no componente

disable Boolean Informação se o botão é (ou não) inativo

block Boolean Componente atinge 100% de largura

loading Boolean Atribui o valor de carregamento (loading), impendindo que o botão esteja apto a receber toque.

DatePicker

Este componente funciona como uma área interativa que quando tocada invoca o selecionador de data nativo de cada plataforma.

constructor() {
 super() this.state = { date: '' } this.getValue = this.getValue.bind(this)}

changeDate = value => {
  console.log('Valor retornado: ', value)
  this.setState({date: value})
}

<DatePicker
    minDate={Date(2019, 8, 7)}
    maxDate={'2019-10-10'}
    disabled={false}
    onChange={this.changeDate}
    value={this.state.date}
    format={'DD/MMM/YYYY'}/>

// Ou com conteúdo customizado

<DatePicker
    minDate={Date(2019, 8, 7)} maxDate={'2019-10-10'} disabled={false}
    onChange={this.changeDate} value={this.state.date}
    format={'DD/MMM/YYYY'}>
    <Text>Selecionar data</Text>
</DatePicker>

Parâmetros

DatePicker extende o componente BaseComponent, herdando suas propriedades.

children Obrigatório Conteúdo.

minDate Object A menor data aceitável

maxDate Object A maior data aceitável

disabled Boolean Define se o DatePicker está ativo.

value String Perimite definir uma data, pelo componente pai.

format String Perimite definir um formato para a data.

onChange Function A data definida pelo DatePicker pode ser devolvida ao componente pai, através da função onChange.

borderColor String Permite definir a cor de borda.

borderRadius String e Number Permite definir a espessura do border-radius.

color String e Number Permite definir a cor do texto.

Formatos de data aceitos (VALUE):

• YYYY-MM-DD
• YYYYMMDD

Formatos de data aceitos (FORMAT):

• DD/MM/YYYY - Retorno: 12/08/2019
• D [de] MMMM [de] YYYY - Retorno: 12 de Agosto de 2019

TimePicker

Este componente funciona como uma área interativa que quando tocada invoca o selecionador de tempo (hora e minuto) nativo de cada plataforma.

changeTime = value => {
  console.log('Valor retornado:', value)
  this.setState({ time: value })
};

<TimePicker
    onChange={this.changeTime}
    value={'12:00'}
    disabled={false}
    minTime={'10:00'}
    maxTime={'15:00'}
/>

Parâmetros

TimePicker extende o componente BaseComponent, herdando suas propriedades.

minTime Object O menor tempo aceitável

maxTime Object O maior tempo aceitável

disabled Boolean Define se o TimePicker está ativo.

value String Perimite definir um tempo, pelo componente pai.

onChange Function A data definida pelo TimePicker pode ser devolvida ao componente pai, através da função onChange.

Switch

CHeckbox utilizado como um Toggle.

Exemplo de utilização

constructor(props) {
    super(props)
    this.state = {
        checked: false
    }
}

onChangeHandler = e => {
    console.log(e? 'Switch ON': 'Switch OFF')
    this.setState({ value: !this.state.checked })
};

render() {
    return (
        <Switch
            onChange={e => {
            this.onChangeHandler(e)
            }}
            disabled={false}
            checked={this.state.checked}
            disabledColor={this.state.checked && '#ff00ff'}
        />
    )
}

Parâmetros

Switch extende o componente BaseComponent, herdando suas propriedades.

disabled Boolean Determina a ação do checkbox "enabled" ou "disabled".

disabledColor String Cor exibida com clareamento quando o componente está desativado, mas seu valor é igual a true, ou seja, marcado por padrão.

checked Boolean Exibe os estados em que o Toggle Switcher se encontra "Ativo" ou "inativo".

onChange Function Função executada quando o cliente escolhe uma das opções.

Stepper

Utilizado para decrementar ou incrementar um valor.

Exemplo de utilização

<Stepper
  fontSize={12}
  onDecrease={this.decreaseAction}
  onIncrease={this.increaseAction}
  value={this.state.value}
  iconDecrease={require("../assets/images/icone_remover.svg")}
  iconIncrease={require("../assets/images/icone_adicionar.svg")}
/>

Parâmetros

Stepper extende o componente BaseComponent, herdando suas propriedades.

value Any Valor a ser decrementado ou incrementado.

color String Altera a cor do texto do valor.

buttonTextColor String Altera a cor do texto do botão de decremento e incremento.

fontSize String e Number Define o tamanho da fonte dos textos do botão e valor.

onDecrease Function Função de decremento.

onIncrease Function Função de incremento.

fontFamily String Família de fonte padrão.

buttonBackgroundColor String Cor de fundo dos botões

iconDecrease String Ícone de decremento

iconIncrease String Ícone de incremento

Botões

Os botões abaixo possuem as mesmas características, tendo mudanças apenas visuais.

Todos os botões extendem do componente Touchable, herdando suas propriedades.

Exemplo de utilização de um botão

<SolidButton onClick={()=>{ ...uma ação qualquer }} >Meu primeiro botão</SolidButton>

Parâmetros de todos os botões

icon String Ícone do botão

loading Boolean Exibe o loading no botão, substituindo pelo texto e ícone, caso haja.

fontSize String ou Number Alteração o tamanho padrão do texto do botão.

size String Altura e tamanho da fonte pré-definidos do botão.

• small height: 30px - Fonte: 1em
• medium height: 40px - Fonte: 1.5em
• default height: 60px - Fonte: 2em

SolidButton

Botão primário, utilizado para chamadas de ação do usuário.

Exemplo de utilização

<SolidButton icon={"711982.svg"} block size={"medium"}>
  Teste
</SolidButton>

GhostButton

Botão de uso secundário, para ações que são alternativas ao fluxo perfeito do usuário.

Exemplo de utilização

<GhostButton size={"small"}>Ghost</GhostButton>

SoftButton

Botão de uso proibitivo, para ações que são destrutivas do fluxo perfeito do usuário.

Exemplo de utilização

<SoftButton size={"small"}>Soft</SoftButton>

TextLink

Exerce a função semelhante a de um link html. Evite o seu uso em demasia.

Este componente extende o componente Text.

Exemplo de utilização

<TextLink onClick={() => { ...ação qualquer }}>Manual do Usuário</TextLink>

Parâmetros

TextLink extende o componente Text, herdando suas propriedades.

onClick Function Função a ser executada

disabled Boolean Torna o componente desabilitado.

disabledColor String Cor atribuída caso o componente tenha a propriedade disabled com valor verdadeiro (true).

textDecoration String Aplica um dos 4 estilos ("normal", "underline", "line-through" ou "overline") ao componente.

SearchButton

Assemelha-se à uma caixa de busca. Executa uma função de chamada de busca no superapp ao ser tocado.

Exemplo de utilização

<SearchButton>Buscar produtos</SearchButton>

Parâmetros

SearchButton extende o componente Touchable, herdando suas propriedades.

placeholder String Texto padrão exibido no SearchButton.

CircleButton

Botões circular

Exemplo de utilização

<CircleButton
  backgroundColor={"#812"}
  size={2}
  onClick={() => alert("Alert")}
  icon={require("../assets/images/icone_remover.svg")}
/>

CircleButton extende o componente Touchable, herdando suas propriedades.

Parâmetros

icon String Ícone do botão.

onClick Function Função a ser executada.

backgroundColor 'String' Cor de fundo do botão.

size String e Number Tamanho do botão.

minSize String e Number Tamanho mínimo do botão.

iconSize String e Number Define o tamanho do ícone do botão.

DropdownButton

Clique para ver um lista.

Exemplo de utilização

const options = [
  {
    value: "1",
    label: "Opção 1"
  },
  {
    value: "2",
    label: (
      <View marginVertical={2}>
        <Text fontSize={14}>Opção 2</Text>
      </View>
    )
  }
];

<DropdownButton
  value={"2"}
  options={options}
  color={"red"}
  fontWeight={500}
  fontSize={20}
  fontFamily={"Ubuntu, sans-serif"}
  placeholder={"Selecione"}
  onChange={e => {
    console.log("onSelect não implementado1", e);
  }}
/>

Parâmetros

options Array | Obrigatório Array com opções

placeholder String Texto placeholder a ser exibido na label.

value String Opção a ser exibida

onChange Function | Obrigatório Função para retornar a opção selecionada.

color String Cor dos textos (Somente quando usado texto puro).

fontWeight String e Number Define a espessura da fonte (Somente quando usado texto puro).

fontSize String e Number Define o tamanho da fonte (Somente quando usado texto puro).

fontFamily String Família de fonte a ser utilizada (Somente quando usado texto puro).

borderWidth String e Number Define a largura da borda inferior

borderColor String Altera a cor da borda inferior

borderStyle String Estilo da borda inferior

Input

Campo para inserção de texto

Exemplo de utilização

<Input type={"text"} onChange={() => console.log("")} />

Parâmetros

mode String Altera o modo do campo e exibe um ícone para os modos success, error e warning.

Tipos: normal, success, error, warning.

Default: normal

Nenhum modo é exibido caso a propriedade disabled seja verdadeira.

inputMode String Altera o modo do campo e tipo de teclado.

Tipos: none, text, decimal, numeric, tel, search, email, url.

Default: text

multiline Boolean O campo input é transformado em textarea. Default: false

disabled Boolean Desabilita o campo.

height String e Number Altera a altura do campo.

block Boolean Exibe o componente com largura em 100%.

onChange Function Função a ser executada.

onSubmit Function Função a ser executada ao submeter o campo.

value String Valor do campo input.

borderWidth String e Number Espessura da borda do input.

borderColor String Cor da borda do input.

borderStyle String Tipos: solid, dotted, dashed, none.

fontSize String e Number Tamanho da fonte do texto.

fontWeight String e Number 'Peso' da fonte do texto.

lineHeight String e Number Altura da linha do input de texto.

password Boolean Altera o campo para tipo senha.

CurrencyInput

Campo para inserção de valores monetários

Exemplo de utilização

<CurrencyInput
  maxLength={8}
  value={"34,23"}
  onChange={value => console.log(value)}
/>

Parâmetros

disabled Boolean Desabilita o campo.

height String e Number Altera a altura do campo.

onChange Function Função a ser executada quando o valor se altera.

value String Valor inicial do campo input.

fontSize String e Number Tamanho da fonte do texto.

fontWeight String e Number 'Peso' da fonte do texto.

lineHeight String e Number Altura da linha do input de texto.

prefix String Prefixo do tipo de moeda utilizado (Padrão R\$).

maxLength String Quantidade máxima de algarismos.

Componentes de texto

Como o nome diz, são componentes que permitem incluir texto.

Text

Utilizado sempre para exibir um texto.

Exemplo de utilização

<Text>"Lorem ipsum dolor sit amet, consectetur adipiscing."</Text>

Texto a ser exibido deverá ser passado dentro da tag.

Parâmetros

children String | Obrigatório Conteúdo.

color String Cor do texto

lineHeight String ou Number Altura da linha.

fontSize String ou Number Tamanho do texto.

fontWeight String ou Number Peso da fonte do texto.

textShadow String ou Number Sombra ou Glow nos textos.

textIndent String ou Number Identa texto e estiliza os parágrafos.

wordSpacing String ou Number define o espaçamento entre as palavras.

whiteSpace String Usada para descrever como os espaços em branco dentro dos elementos são manipulados.

textOrientation String Orientação do texto. Aceita os tipos: inherit, initial, unset mixed, upright, sideways-right, sideways ou use-glyph-orientation.

textAlign String Alinhamento do texto. Aceita os tipos: initial, left, center, right ou justify.

fontFamily String Família de fonte do texto.

block Boolean Estiliza o texto para ter display block ou inline.

textTransform String Aceita os tipos: initial, capitalize, uppercase, lowercase ou unset.

textDecoration String Aceita os tipos: normal, underline, line-through ou overline.

verticalAlign String Trata o alinhamento vertical do elemento. Aceita os tipos: baseline, textTop, textBottom, sub ou super.

wordBreak String Aceita os tipos: 'normal' 'break-all', 'keep-all', 'inherit', 'initial' ou 'unset'.

letterSpacing String ou Number Espaçamento entre caracteres.

textOverflow String cria um overflow no texto.

selectable Boolean Permite selecionar o texto.

Title

Utilizado para exibir títulos (h1, h2, h3, h4, h5 e h6).

Exemplo de utilização

<Title
  size={2}
  fontSize={30}
  fontWeight={"bold"}
  lineHeight={32}
  fontFamily={"serif"}
  color={"#c4c4c4"}
  marginTop={4}
  marginBottom={8}
  marginLeft={3}
  marginRight={0}
>
  Título do Title
</Title>

Parâmetros

Title extende o componente Text, herdando suas propriedades.

size Number | Obrigatorio Tamanho do título. Valores aceitos: 1, 2, 3, 4, 5 e 6. Caso nenhum tamanho (size) seja passado por parâmetro o valor padrão será 1.

fontSize Number Tamanho do texto

fontWeight String Peso da fonte do texto

lineHeight Number Espaçamento de linhas

fontFamily String Família de fonte do texto

color Any Cor do texto

marginTop Number Margem superior do texto

marginBotton Number Margem Inferior do texto

marginLeft Number Margem esquerda do texto

marginRight Number Margem direita do texto

children String | Obrigatório Conteúdo.

PriceFormat

Exemplo de utilização

Utilizado para formatação de preços.

<PriceFormat amount={3298.0} currency={"r$"} size={30} />

Parâmetros

PriceFormat extende o componente Text, herdando suas propriedades.

amount Number Define a quantia

currency String Define a moeda da quantia

Super Componentes

Super componentes são conjuntos de componentes agrupados com um propósito específico. Visam ajudar e acelerar o desenvolvimento de mini-apps. Veja abaixo todos os super componentes.

Header

Utilizado sempre no topo da aplicação, facilita a composição de uma identidade visual padrão.

Exemplo de utilização

Parâmetros

Header extende o componente BaseComponent, herdando suas propriedades.

title String | Obrigatório Uma string para o título do header

description String | Obrigatório Uma string para a descrição do header

displaySearch Boolean Exibição da barra de pesquisa

searchButtonPlaceholder String | Obrigatório Uma string para auxiliar o usuário com o campo de pesquisa displaySearch

backgroundImage String Uma imagem para o plano de fundo do header

backgroundColor String Uma cor para o plano de fundo do header

headerOrientation String Define a orientação do ProductCard

• vertical Exibe o Header na vertical
• horizontal Exibe o Header na horizontal

A seguinte regra de background é utilizada no parâmetro neste componente:

• 1º backgroundImage
• 2º backgroundColor
• 3º backgroundImage default.

backgroundImage default é a imagem padrão da biblioteca caso nenhuma imagem ou cor seja definida.

ProductCard

Utilizado para a exposição de produtos.

<ProductCard
  productName={'Smart TV LED 49" Philco PTV49e68dSWN Full HD...'}
  price={1499.32}
  conditionPayment={"10x sem juros"}
  imageProduct={"http://lorempixel.com/400/400/food/"}
  onProuctCardClick={() => console.log("ProductCard test click")}
  cardOrientation={"horizontal"}
  isDisabled={false}
/>

Parâmetros

productName String Identifica e/ou descreve o produto

price Number Exibe o preço do produto

conditionPayment String Condição de pagamento

imageProduct String Endereço onde uma imagem está armazenada

onProuctCardClick Function Recebe uma função para ser executada, em um evento de click sobre o ProductCard

cardOrientation String Define a orientação do ProductCard

• vertical Exibe o ProductCard na vertical
• horizontal Exibe o ProductCard na horizontal

isDisabled Boolean Define se o ProductCard está ativo

TabNavigator

Utilizado sempre para a navegação. Os itens serão transformados em abas.

Exemplo de utilização

<TabNavigator
  styleButton={{ backgroundColor: "#d9defb" }}
  styleContent={{ backgroundColor: "#dce2fb" }}
  items={[
    {
      title: "Food",
      content: <Image source="http://lorempixel.com/500/500/food/1/" />
    },
    {
      title: "Transport",
      content: <Image source="http://lorempixel.com/500/500/transport/1/" />
    },
    {
      title: "Sports",
      content: <Image source="http://lorempixel.com/500/500/sports/1/" />
    }
  ]}
/>

Parâmetros

TabNavigator extende o componente BaseComponent, herdando suas propriedades.

items Lista de itens de conteúdos.

• title Obrigatório Título para a aba de navegação
• content Obrigatório Conteúdo a ser exibido

Mínimo de itens: 2 • Máximo de itens: 3

Sendo passado número de itens inferior a 2 ou superior a 3 o componente não é exibido.

Warning

Utilizado para exibir uma mensagem de alerta.

Exemplo de utilização

<Warning>Este Warning não é manipulado pelo estado.</Warning>

constructor() {
super();
    this.state = {
        value: true
    };
}

handleRender = () => {
    this.setState({ value: !this.state.value });
};

<Warning display={this.state.value} onClose={this.handleRender}>
    Este Warning é manipulado pelo estado.
</Warning>
<SolidButton block size={"medium"} onClick={this.handleRender}>
    {this.state.value ? "Esconder Alerta" : "Mostrar Alerta"}
</SolidButton>

Parâmetros

text String Conteúdo da mensagem, de acordo com o type.

color String Define uma cor para o texto e botão x (fechar).

backgroundColor String Define uma cor para o fundo do alerta.

onClose Func Função a ser executada em caso o warning seja fechado através do estado (state).

display Boolean Exibe ou oculta o alerta através do estado (state).

ActivityIndicator

Utilizado para exibir um spinner quando estiver em um loader.

Exemplo de utilização

<ActivityIndicator borderSize={8} size={100} direction={"cw"} loading={true} />

Parâmetros

loading Boolean Realiza a exibição do componente

borderSize String ou Number Tamanho do spinner load

borderColor String Cor de segundo plano do spinner load

borderColorSpin String Cor de primeiro plano do spinner load.

size String ou Number Tamanho do componente

direction String Direção na qual o spinner load irá girar. cw: clockwise e ccw: counterclockwise.

StyleResolver

É um conjunto de métodos estáticos, que tem como objetivo ajudar no manuseio e configuração do estilo dos componentes.

Métodos set

setPrimaryFont(font): Altera o estilo de fonte padrão utilizado pelo navegador. É necessário passar uma string, definindo o estilo da font.

setPrimaryColor(color): Altera a definição de cor primária utilizada pelo navegador. É necessário passar uma string, definindo qual a cor deve ser definida como a cor primária do navegador.

setSecondaryColor(color): Altera a definição de cor secundária utilizada pelo navegador. É necessário passar uma string, definindo qual a cor deve ser definida como a cor secundária do navegador.

setTertiaryColor(color): Altera a definição de cor terciária utilizada pelo navegador. É necessário passar uma string, definindo qual a cor deve ser definida como a cor terciária do navegador.

setTextColor(color): Altera a definição de cor de texto padrão utilizada pelo navegador. É necessário passar uma string, definindo qual a cor deve ser definida como a cor de texto padrão do navegador.

setBorderColor(color): Altera a definição de cor de borda padrão utilizada pelo navegador. É necessário passar uma string, definindo qual a cor deve ser definida como a cor de borda padrão do navegador.

setBackgroundColor(color): Altera a definição de cor de background padrão utilizada pelo navegador. É necessário passar uma string, definindo qual a cor deve ser definida como a cor de background padrão do navegador.

Métodos get

getPrimaryFont(): Retorna o estilo de fonte padrão, do navegador.

getPrimaryColor(): Retorna a cor definida como cor primária do navegador.

getSecondaryColor(): Retorna a cor definida como cor secundária do navegador.

getTertiaryColor(): Retorna a cor definida como cor terciária do navegador.

getTextColor(): Retorna a cor definida como cor de texto padrão do navegador.

getBorderColor: Retorna a cor definida como cor de borda padrão do navegador.

getBackgroundColor: Retorna a cor definida como cor de background padrão do navegador.

getDisabledColor(): Retorna a cor padronizada para elementos que assumem a propriedade disabled.

Outros Métodos

brightness(color, percent): Recebe dois parâmetros color(String) e percent(Number), os quais são utilizados para determinar o grau de brilho da cor passada.

darken(color, percent): Recebe dois parâmetros color(String) e percent(Number), os quais são utilizados para determinar o grau de contraste da cor passada.

getColors(): Retorna um objeto com os atributos primaryColor, secondaryColor, tertiaryColor, textColor, borderColor e backgroundColor. O valor de cada propriedade é o valor que foi definido como padrão para o navegador, utilizando as funções set. Se o valor padrão do atributo não for definido através das funções set, serão utilizados valores padrões definidos internamente. é o elemento a ser exibido em uma coluna.

Map

Utilizado para a exibir a localização no mapa.

Exemplo de utilização

getMarkerLabel = text => (
    <View backgroundColor={'#ff0000'}>
      <Text color={'#00FFFF'}>text</Text>
    </View>
  )

  const pinImage = (
      <Image
        source={
          'http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/map-marker-icon.png'
        }
        width={30}
        height={30}
      />
    )


      <Map
        zoom={12}
        center={[-22.94980821, -43.19095194]}
        height={500}
        markers={[
          {
            key: 'pin_01',
            content: (
              <View style={{}}>
                <Image
                  source={
                    'http://www.myiconfinder.com/uploads/iconsets/256-256-7a195b78d9607a48fb234f98634fa5ea-pin.png'
                  }
                  width={16}
                  height={16}
                />
                <Text>Copacabana</Text>
              </View>
            ),
            coords: [-22.967443, -43.186942]
          },
          {
            key: 'pin_02',
            content: (
              <View style={{ backgroundColor: '#fff', padding: 10 }}>
                <Text>Botafogo</Text>
              </View>
            ),
            coords: [-22.950236, -43.183827]
          },
          {
            key: 'pin_03',
            content: (
              <View style={{ backgroundColor: '#fff', padding: 10 }}>
                <Text>Bara da Tijuca</Text>
              </View>
            ),
            coords: [-23.0004, -43.3659]
          },
          {
            key: 'pin_04',
            content: (
              <View style={{ backgroundColor: '#fff', padding: 10 }}>
                <Text>Leme</Text>
              </View>
            ),
            coords: [-22.9615, -43.16623]
          }
        ]}
      />

Parâmetros

markers Lista de Pins no mapa.

• Zoom number Define o zoom no mapa.
• center object | obrigatório Define a geolocalização inicial.
• coords number Define Latitude e Longitude.
• onMarkerPress function Determina uma ação ao clicar no pin.
• markers any Exibe o pin.
• content any Agrupa a view com a legenda ou os Pins.