react-native-element-textinput-yuger

v1.0.2

Published

8 months ago

自定义react-native-element-textinput包

Downloads

0High
0Medium
0Low

yuger

react-native elements components material textfield input hashtag tags autocomplete

react-native-element-textinput

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

Features

TextInput, TagsInput 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 | | ------------------ | -------------------- | --------- | ---------------------------------- | | mode | default or numeric or password |No | Switch mode textinput | | style | ViewStyle | No | Styling for container view | | label | String | No | Label for textinput | | labelStyle | TextStyle | No | Styling for label text | | placeholderStyle | TextStyle | No | Styling for placeholderStyle text | | 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 | | 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 extends TextInputProps

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

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 text | | placeholderStyle | TextStyle | No | Styling for placeholderStyle text | | 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 | | 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 | | data | String[] | No | Data is a plain array | | tagsStyle | ViewStyle | No | Styling for hashtash container view| | tagsTextStyle | TextStyle | No | Styling for hashtag text | | onChangeValue | (string[]) => void | No | Callback that is called when submit value | | renderTagsItem | (item, unSelect?: () => void) => JSX.Element | No | Takes an item from data and renders it into the list selected |

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 text | | placeholderStyle | TextStyle | No | Styling for placeholderStyle text | | 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 | | 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 = () => {
    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 },
  });

Example 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 },
  });

Example 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 },
  });

Example 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,
    },
  });

Example 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,
    },
  });

Example 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 },
  });