Input

Como utilizar

import { Input } from '@superlogica/design-system-mobile'

import * as React from 'react';
import { View } from 'react-native';
import { Input } from '@superlogica/design-system-mobile';

const YourApp = () => {
  const [value, setValue] = useState('')

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Input
        value={value}
        label="Informe o nome"
        onChangeText={(text) => setValue(text)}
        status="danger"
        message="O campo deve ser preenchido"
        iconLeft={<View></View>}
        onLeftIconPress={() => {}}
      />
    </View>
  )
}

export default YourApp;

Props

Prop	Tipo	Default	Descrição
value	`string`	`" "`	Value do componente
label	`string`	`" "`	Label do componente
onChangeText	`func`	`() => {}`	Função chamada quando houver mudanças no value
size	`string`	`md`	Define o tamanho do componente (md ou lg)
status	`string`	`default`	Define o status do componente (default, danger ou success)
message	`string`	`" "`	Exibe uma mensagem abaixo do componente
iconLeft	`element`	`null`	Insere um ícone à esquerda no componente
iconRight	`element`	`null`	Insere um ícone à direita no componente
onLeftIconPress	`func`	`() => {}`	Função chamada quando houver um "click" no "iconLeft"
onRightIconPress	`func`	`() => {}`	Função chamada quando houver um "click" no "iconRight"
customProps	`object`	`{ color: 'neutral600', fontColor: 'neutral700', focusedColor: 'primary', labelColor: 'neutral600', messageColor:'neutral700' }`	Permite personalizar as cores do Input
multiline	`bool`	`false`	Habilita o input com múltiplas linhas
disabled	`bool`	`false`	Desabilita o componente
onBlur	`func`	`() => {}`	Função chamada quando o componente perder o foco
onFocus	`func`	`() => {}`	Função chamada quando o componente receber o foco