react native element textinput download - react native element textinput código fonte download

React-native-elem-textinput

Um componente de textinput, tagsinput nativo de reação e reação e componente de preenchimento automático fácil de personalizar para iOS e Android.

Características

Textinput, tagsInput e preenchimento automático em um pacote
Fácil de usar
Aparência consistente no iOS e Android
Tamanho da fonte personalizável, cores e duração da animação
Implementado com o TypeScript

Começando

    npm install react - native - element - textinput -- save

    yarn add react - native - element - textinput

Demonstração do código -fonte

React-native-template-Components Um belo modelo para o React Native.

Demonstração

TextInput estende o texto textInputProps

Adereços	Params	Isrequire	padrão
modo	padrão ou numérico ou senha	Não	Modo de comutador TextInput
estilo	ViewStyle	Não	Estilo para visualização de contêineres
rótulo	Corda	Não	Etiqueta para textInput
Labelstyle	TextStyle	Não	Estilo para texto de etiqueta
Especialista	TextStyle	Não	Estilo para texto de espaço reservado
inputStyle	TextStyle	Não	Estilo para visualização de entrada
Texterror	Corda	Não	Erro de texto
TexterRorstyle	TextStyle	Não	Estilo para erro de texto
Showicon	Booleano	Não	Mostre ou ocultar o ícone Clear Text
iconstyle	Imaginestyle	Não	Estilo para textinho claro do ícone
FocusColor	Corda	Não	Cor quando foco no textinput
Fontfamily	Corda	Não	Personalize o estilo de fonte
Renderlefticon	() => Jsx.Element	Não	Personalize o ícone esquerdo para textInput
Renderrrighticon	() => Jsx.Element	Não	Personalize o ícone certo para textinput

Hashtaginput estende o textInputProps

Adereços	Params	Isrequire	padrão
estilo	ViewStyle	Não	Estilo para visualização de contêineres
rótulo	Corda	Não	Etiqueta para textInput
Labelstyle	TextStyle	Não	Estilo para texto de etiqueta
Especialista	TextStyle	Não	Estilo para texto de espaço reservado
inputStyle	TextStyle	Não	Estilo para visualização de entrada
Texterror	Corda	Não	Erro de texto
TexterRorstyle	TextStyle	Não	Estilo para erro de texto
Showicon	Booleano	Não	Mostre ou ocultar o ícone Clear Text
iconstyle	Imaginestyle	Não	Estilo para textinho claro do ícone
FocusColor	Corda	Não	Cor quando foco no textinput
Fontfamily	Corda	Não	Personalize o estilo de fonte
Renderlefticon	() => Jsx.Element	Não	Personalize o ícone esquerdo para textInput
Renderrrighticon	() => Jsx.Element	Não	Personalize o ícone certo para textinput
dados	Corda[]	Não	Dados são uma matriz simples
HashtagStyle	ViewStyle	Não	Estilo para visualização de contêineres de hashtash
HashtagTextStyle	TextStyle	Não	Modelando para texto de hashtag
OnChangeValue	(string []) => void	Não	Retorno de chamada que é chamado quando o valor de envio
renderhashtagitem	(Item, Unselect?: () => void) => jsx.Element	Não	Pega um item de dados e o renderiza na lista selecionada

TagsInput estende textInputProps

Adereços	Params	Isrequire	padrão
estilo	ViewStyle	Não	Estilo para visualização de contêineres
rótulo	Corda	Não	Etiqueta para textInput
Labelstyle	TextStyle	Não	Estilo para texto de etiqueta
Especialista	TextStyle	Não	Estilo para texto de espaço reservado
inputStyle	TextStyle	Não	Estilo para visualização de entrada
Texterror	Corda	Não	Erro de texto
TexterRorstyle	TextStyle	Não	Estilo para erro de texto
Showicon	Booleano	Não	Mostre ou ocultar o ícone Clear Text
iconstyle	Imaginestyle	Não	Estilo para textinho claro do ícone
FocusColor	Corda	Não	Cor quando foco no textinput
Fontfamily	Corda	Não	Personalize o estilo de fonte
Renderlefticon	() => Jsx.Element	Não	Personalize o ícone esquerdo para textInput
Renderrrighticon	() => Jsx.Element	Não	Personalize o ícone certo para textinput
dados	Corda[]	Não	Dados são uma matriz simples
TagSstyle	ViewStyle	Não	Estilo para visualização de contêineres de hashtash
TagStExtStyle	TextStyle	Não	Modelando para texto de hashtag
OnChangeValue	(string []) => void	Não	Retorno de chamada que é chamado quando o valor de envio
RenderTagsitem	(Item, Unselect?: () => void) => jsx.Element	Não	Pega um item de dados e o renderiza na lista selecionada

O preenchimento automático estende textInputProps

Adereços	Params	Isrequire	padrão
dados	Corda[]	Não	Dados são uma matriz simples
estilo	ViewStyle	Não	Estilo para visualização de contêineres
rótulo	Corda	Não	Etiqueta para textInput
Labelstyle	TextStyle	Não	Estilo para texto de etiqueta
Especialista	TextStyle	Não	Estilo para texto de espaço reservado
inputStyle	TextStyle	Não	Estilo para visualização de entrada
Texterror	Corda	Não	Erro de texto
TexterRorstyle	TextStyle	Não	Estilo para erro de texto
Showicon	Booleano	Não	Mostre ou ocultar o ícone Clear Text
iconstyle	Imaginestyle	Não	Estilo para textinho claro do ícone
FocusColor	Corda	Não	Cor quando foco no textinput
Fontfamily	Corda	Não	Personalize o estilo de fonte
Renderlefticon	() => Jsx.Element	Não	Personalize o ícone esquerdo para textInput
Renderrrighticon	() => Jsx.Element	Não	Personalize o ícone certo para textinput
renderitem	(Item: String) => JSX.Element	Não	Pega um item de dados e o renderiza na lista

Exemplo 1

  import React , { useState } from 'react' ;
  import { StyleSheet , View } from 'react-native' ;
  import { TextInput } from 'react-native-element-textinput' ;

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

    return (
      < View style = { styles . container } >
        < TextInput
          value = { value }
          style = { styles . input }
          inputStyle = { styles . inputStyle }
          labelStyle = { styles . labelStyle }
          placeholderStyle = { styles . placeholderStyle }
          textErrorStyle = { styles . textErrorStyle }
          label = "TextInput"
          placeholder = "Placeholder"
          placeholderTextColor = "gray"
          focusColor = "blue"
          onChangeText = { text => {
            setValue ( text ) ;
          } }
        />
      </ View >
    ) ;
  } ;

  export default TextInputComponent ;

  const styles = StyleSheet . create ( {
    container : {
      padding : 16 ,
    } ,
    input : {
      height : 55 ,
      paddingHorizontal : 12 ,
      borderRadius : 8 ,
      borderWidth : 0.5 ,
      borderColor : '#DDDDDD' ,
    } ,
    inputStyle : { fontSize : 16 } ,
    labelStyle : {
      fontSize : 14 ,
      position : 'absolute' ,
      top : - 10 ,
      backgroundColor : 'white' ,
      paddingHorizontal : 4 ,
      marginLeft : - 4 ,
    } ,
    placeholderStyle : { fontSize : 16 } ,
    textErrorStyle : { fontSize : 16 } ,
  } ) ;

Exemplo 2

  import React , { useState } from 'react' ;
  import { StyleSheet , View } from 'react-native' ;
  import { TextInput } from 'react-native-element-textinput' ;

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

    return (
      < View style = { styles . container } >
        < TextInput
          value = { value }
          style = { styles . input }
          inputStyle = { styles . inputStyle }
          labelStyle = { styles . labelStyle }
          placeholderStyle = { styles . placeholderStyle }
          textErrorStyle = { styles . textErrorStyle }
          label = "TextInput"
          placeholder = "Placeholder"
          placeholderTextColor = "gray"
          onChangeText = { text => {
            setValue ( text ) ;
          } }
        />
      </ View >
    ) ;
  } ;

  export default TextInputComponent ;

  const styles = StyleSheet . create ( {
    container : {
      padding : 16 ,
    } ,
    input : {
      height : 55 ,
      paddingHorizontal : 12 ,
      borderRadius : 8 ,
      backgroundColor : 'white' ,
      shadowColor : '#000' ,
      shadowOffset : {
        width : 0 ,
        height : 1 ,
      } ,
      shadowOpacity : 0.2 ,
      shadowRadius : 1.41 ,
      elevation : 2 ,
    } ,
    inputStyle : { fontSize : 16 } ,
    labelStyle : { fontSize : 14 } ,
    placeholderStyle : { fontSize : 16 } ,
    textErrorStyle : { fontSize : 16 } ,
  } ) ;

Exemplo 3

  import React , { useState } from 'react' ;
  import { StyleSheet , View } from 'react-native' ;
  import { TextInput } from 'react-native-element-textinput' ;

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

    return (
      < View style = { styles . container } >
        < TextInput
          mode = "password"
          value = { value }
          style = { styles . input }
          inputStyle = { styles . inputStyle }
          labelStyle = { styles . labelStyle }
          placeholderStyle = { styles . placeholderStyle }
          textErrorStyle = { styles . textErrorStyle }
          label = "Password"
          placeholder = "Placeholder"
          placeholderTextColor = "gray"
          onChangeText = { text => {
            setValue ( text ) ;
          } }
        />
      </ View >
    ) ;
  } ;

  export default TextInputComponent ;

  const styles = StyleSheet . create ( {
    container : {
      padding : 16 ,
    } ,
    input : {
      height : 55 ,
      paddingHorizontal : 12 ,
      borderRadius : 8 ,
      backgroundColor : 'white' ,
      shadowColor : '#000' ,
      shadowOffset : {
        width : 0 ,
        height : 1 ,
      } ,
      shadowOpacity : 0.2 ,
      shadowRadius : 1.41 ,
      elevation : 2 ,
    } ,
    inputStyle : { fontSize : 16 } ,
    labelStyle : { fontSize : 14 } ,
    placeholderStyle : { fontSize : 16 } ,
    textErrorStyle : { fontSize : 16 } ,
  } ) ;

Exemplo 4

  import React , { useState } from 'react' ;
  import { StyleSheet , View } from 'react-native' ;
  import { HashtagInput } from 'react-native-element-textinput' ;

  const TextInputComponent = ( ) => {
    const [ value , setValue ] = useState < string [ ] > ( [ ] ) ;

    return (
      < View style = { styles . container } >
        < HashtagInput
          data = { value }
          style = { styles . input }
          inputStyle = { styles . inputStyle }
          labelStyle = { styles . labelStyle }
          placeholderStyle = { styles . placeholderStyle }
          textErrorStyle = { styles . textErrorStyle }
          hashtagStyle = { styles . hashtagStyle }
          hashtagTextStyle = { styles . hashtagTextStyle }
          placeholder = "Hashtag..."
          placeholderTextColor = "gray"
          onChangeValue = { value => {
            setValue ( value ) ;
          } }
        />
      </ View >
    ) ;
  } ;

  export default TextInputComponent ;

  const styles = StyleSheet . create ( {
    container : {
      padding : 16 ,
    } ,
    input : {
      height : 55 ,
      paddingHorizontal : 12 ,
      borderRadius : 8 ,
      backgroundColor : 'white' ,
      shadowColor : '#000' ,
      shadowOffset : {
        width : 0 ,
        height : 1 ,
      } ,
      shadowOpacity : 0.2 ,
      shadowRadius : 1.41 ,
      elevation : 2 ,
    } ,
    inputStyle : { fontSize : 16 } ,
    labelStyle : { fontSize : 14 } ,
    placeholderStyle : { fontSize : 16 } ,
    textErrorStyle : { fontSize : 16 } ,
    hashtagStyle : {
      borderWidth : 0 ,
      borderRadius : 16 ,
      padding : 8 ,
      backgroundColor : 'white' ,
      shadowColor : '#000' ,
      shadowOffset : {
        width : 0 ,
        height : 1 ,
      } ,
      shadowOpacity : 0.2 ,
      shadowRadius : 1.41 ,
      elevation : 2 ,
    } ,
    hashtagTextStyle : {
      fontSize : 16 ,
    } ,
  } ) ;

Exemplo 5

  import React , { useState } from 'react' ;
  import { StyleSheet , View } from 'react-native' ;
  import { TagsInput } from 'react-native-element-textinput' ;

  const TextInputComponent = ( ) => {
    const [ value , setValue ] = useState ( [ ] ) ;

    return (
      < View style = { styles . container } >
        < TagsInput
          data = { value }
          style = { styles . input }
          inputStyle = { styles . inputStyle }
          labelStyle = { styles . labelStyle }
          placeholderStyle = { styles . placeholderStyle }
          textErrorStyle = { styles . textErrorStyle }
          tagsStyle = { styles . tagsStyle }
          tagsTextStyle = { styles . tagsTextStyle }
          label = "TagsInput"
          placeholder = "Tags..."
          placeholderTextColor = "gray"
          onChangeValue = { value => {
            setValue ( value ) ;
          } }
        />
      </ View >
    ) ;
  } ;

  export default TextInputComponent ;

  const styles = StyleSheet . create ( {
    container : {
      padding : 16 ,
    } ,
    input : {
      paddingHorizontal : 12 ,
      borderRadius : 8 ,
      backgroundColor : 'white' ,
      shadowColor : '#000' ,
      shadowOffset : {
        width : 0 ,
        height : 1 ,
      } ,
      shadowOpacity : 0.2 ,
      shadowRadius : 1.41 ,
      elevation : 2 ,
    } ,
    inputStyle : {
      fontSize : 16 ,
      minWidth : 80 ,
    } ,
    labelStyle : {
      fontSize : 14 ,
      position : 'absolute' ,
      top : - 10 ,
      backgroundColor : 'white' ,
      paddingHorizontal : 4 ,
      marginLeft : - 4 ,
    } ,
    placeholderStyle : { fontSize : 16 } ,
    textErrorStyle : { fontSize : 16 } ,
    tagsStyle : {
      borderWidth : 0 ,
      borderRadius : 16 ,
      padding : 8 ,
      backgroundColor : 'white' ,
      shadowColor : '#000' ,
      shadowOffset : {
        width : 0 ,
        height : 1 ,
      } ,
      shadowOpacity : 0.2 ,
      shadowRadius : 1.41 ,
      elevation : 2 ,
    } ,
    tagsTextStyle : {
      fontSize : 16 ,
    } ,
  } ) ;

Exemplo 6

  import React , { useState } from 'react' ;
  import { StyleSheet , View } from 'react-native' ;
  import { AutoComplete } from 'react-native-element-textinput' ;

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

    return (
      < View style = { styles . container } >
        < AutoComplete
          value = { value }
          data = { [ 'hello' , 'how are you' , 'complete' ] }
          style = { styles . input }
          inputStyle = { styles . inputStyle }
          labelStyle = { styles . labelStyle }
          placeholderStyle = { styles . placeholderStyle }
          textErrorStyle = { styles . textErrorStyle }
          label = "Auto Complete"
          placeholder = "Placeholder..."
          placeholderTextColor = "gray"
          onChangeText = { e => {
            setValue ( e ) ;
          } }
        />
      </ View >
    ) ;
  } ;

  export default TextInputComponent ;

  const styles = StyleSheet . create ( {
    container : {
      padding : 16 ,
    } ,
    input : {
      height : 55 ,
      paddingHorizontal : 12 ,
      borderRadius : 8 ,
      backgroundColor : 'white' ,
      shadowColor : '#000' ,
      shadowOffset : {
        width : 0 ,
        height : 1 ,
      } ,
      shadowOpacity : 0.2 ,
      shadowRadius : 1.41 ,
      elevation : 2 ,
    } ,
    inputStyle : { fontSize : 16 } ,
    labelStyle : { fontSize : 14 } ,
    placeholderStyle : { fontSize : 16 } ,
    textErrorStyle : { fontSize : 16 } ,
  } ) ;