JSPM – react-native-element-textinput@1.4.0

Package Exports

react-native-element-textinput
react-native-element-textinput/index.ts

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-element-textinput) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-element-textinput

A react-native TextInput, HashtagInput and AutoComplete component easy to customize for both iOS and Android.

Features

TextInput, HashtagInput and AutoComplete in one package
Easy to use
Consistent look and feel on iOS and Android
Customizable font size, colors and animation duration
Implemented with typescript

Getting started

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

    yarn add react-native-element-textinput

Source code demo

react-native-template-components A beautiful template for React Native.

Demo

TextInput extends TextInputProps

Props	Params	isRequire	default
style	ViewStyle	No	Styling for container view
label	String	No	Label for textinput
labelStyle	TextStyle	No	Styling for label
inputStyle	TextStyle	No	Styling for input view
textError	String	No	Text error
textErrorStyle	TextStyle	No	Styling for text error
showIcon	Boolean	No	Show or hide icon clear text
iconStyle	ImageStyle	No	Styling for icon clear text
numeric	Boolean	No	Input value is numeric
focusColor	String	No	Color when focus to textinput
fontFamily	String	No	Customize font style
renderLeftIcon	() => JSX.Element	No	Customize left icon for textinput
renderRightIcon	() => JSX.Element	No	Customize right icon for textinput

HashtagInput, TagsInput extends TextInputProps

Props	Params	isRequire	default
style	ViewStyle	No	Styling for container view
label	String	No	Label for textinput
labelStyle	TextStyle	No	Styling for label
inputStyle	TextStyle	No	Styling for input view
textError	String	No	Text error
textErrorStyle	TextStyle	No	Styling for text error
showIcon	Boolean	No	Show or hide icon clear text
iconStyle	ImageStyle	No	Styling for icon clear text
numeric	Boolean	No	Input value is numeric
focusColor	String	No	Color when focus to textinput
fontFamily	String	No	Customize font style
renderLeftIcon	() => JSX.Element	No	Customize left icon for textinput
renderRightIcon	() => JSX.Element	No	Customize right icon for textinput
hashtagValue	String[]	No	Data is a plain array
hashtagStyle	ViewStyle	No	Styling for hashtash container view
renderHashtagItem	(item, unSelect?: () => void) => JSX.Element	No	Takes an item from data and renders it into the list selected
hashtagTextStyle	TextStyle	No	Styling for hashtag text
onChangeHashtag	(string[]) => void	No	Callback that is called when submit value

AutoComplete extends TextInputProps

Props	Params	isRequire	default
data	String[]	No	Data is a plain array
style	ViewStyle	No	Styling for container view
label	String	No	Label for textinput
labelStyle	TextStyle	No	Styling for label
inputStyle	TextStyle	No	Styling for input view
textError	String	No	Text error
textErrorStyle	TextStyle	No	Styling for text error
showIcon	Boolean	No	Show or hide icon clear text
iconStyle	ImageStyle	No	Styling for icon clear text
numeric	Boolean	No	Input value is numeric
focusColor	String	No	Color when focus to textinput
fontFamily	String	No	Customize font style
renderLeftIcon	() => JSX.Element	No	Customize left icon for textinput
renderRightIcon	() => JSX.Element	No	Customize right icon for textinput
renderItem	(item:string) => JSX.Element	No	Takes an item from data and renders it into the list

Example 1

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

  const TextInputComponent = props => {
    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="Username"
          placeholder="Placeholder"
          placeholderTextColor="gray"
          focusColor="blue"
          onChangeText={text => {
            setValue(text);
          }}
        />
      </View>
    );
  };

  export default TextInputComponent;

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      paddingHorizontal: 20,
      backgroundColor: 'white',
    },
    input: {
      marginTop: 20,
      height: 55,
      paddingLeft: 16,
      paddingRight: 10,
      borderRadius: 8,
      borderWidth: 0.5,
      borderColor: 'gray',
    },
    inputStyle: { fontSize: 16 },
    labelStyle: {
      fontSize: 16,
      position: 'absolute',
      top: -10,
      backgroundColor: 'white',
      paddingHorizontal: 4,
      marginLeft: -4,
    },
    placeholderStyle: { fontSize: 16 },
    textErrorStyle: { fontSize: 16 },
  });

Example 2

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

  const TextInputComponent = props => {
    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="Username"
          placeholder="Placeholder"
          placeholderTextColor="gray"
          onChangeText={text => {
            setValue(text);
          }}
        />
      </View>
    );
  };

  export default TextInputComponent;

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      paddingHorizontal: 20,
    },
    input: {
      marginTop: 20,
      height: 55,
      paddingHorizontal: 16,
      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 },
  });

Example 3

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

  const TextInputComponent = props => {
    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="Password"
          placeholder="Placeholder"
          placeholderTextColor="gray"
          secureTextEntry
          onChangeText={text => {
            setValue(text);
          }}
        />
      </View>
    );
  };

  export default TextInputComponent;

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      paddingHorizontal: 20,
    },
    input: {
      marginTop: 20,
      height: 55,
      paddingHorizontal: 16,
      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 },
  });

Example 4

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

  const TextInputComponent = props => {
    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: {
      flex: 1,
      paddingHorizontal: 20,
    },
    input: {
      marginTop: 20,
      height: 55,
      paddingHorizontal: 16,
      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,
    },
  });

Example 5

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

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

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

  export default TextInputComponent;

  const styles = StyleSheet.create({
    input: {
      marginVertical: 16,
      marginHorizontal: 4,
      paddingHorizontal: 16,
      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 },
    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,
    },
  });

Example 6

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

  const TextInputComponent = props => {
    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="AutoComplete"
          placeholder="Placeholder..."
          placeholderTextColor="gray"
          onChangeText={e => {
            setValue(e);
          }}
        />
      </View>
    );
  };

  export default TextInputComponent;

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      paddingHorizontal: 20,
    },
    input: {
      marginTop: 20,
      height: 55,
      paddingHorizontal: 16,
      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,
    },
  });