React-native-validate-textinput NPM

react-native-validate-textinput

Validate TextInput custom for React native (same Redux form) validate-textinput

Installation

$ npm install react-native-validate-textinput --save

Usage

'use strict';

var React = require('react-native');
var {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
} = React;

import ValidateTextInput from "react-native-validate-textinput";

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      valueInput: ""
    };
  }
  
  _onProcessTextChange(currentText){
        if(!currentText){
          this.setState({
            errorText: 'Không được để trống'
          })
        } else if(!currentText.includes("@") && currentText){
          this.setState({
            errorText: 'Phải chứa ký tự @'
          })
        } else if(currentText.length < 8 && currentText){
          this.setState({
            errorText: 'Phải lớn hơn 8 ký tự'
          })
        }
        else{
          this.setState({
            errorText: ''
          })
        }
  }

  render() {
    return (
        <View style={styles.container}>
            <Image source={background} style={styles.shadow}>
              <View style={styles.bg}>
                <ValidateTextInput
                  errorItem={this.state.errorText}
                  typeInput={"email"}
                  // styleIcon={{
                  //   color: 'red'
                  // }}
                  onChangeTextInput={(text) => {
                    this._onProcessTextChange(text);
                    this.setState({
                      valueInput: text
                    })
                  }}
                  hiddenIcon={false}
                  typeErrorView={"bottomInput"}
                  hiddenIconErrorView={true}
                />

                <ValidateTextInput
                  errorItem={this.state.errorText}
                  typeInput={"password"}
                  // styleIcon={{
                  //   color: 'red'
                  // }}
                  onChangeTextInput={(text) => {
                    this.setState({
                      valueInput: text
                    })
                  }}
                  hiddenIcon={false}
                />

                <Button
                  style={styles.btn}
                  onPress={() => this.props.navigation.navigate("Home")}
                >
                  <Text>Login</Text>
                </Button>
              </View>
            </Image>
        </View>
    );
  }
}

export default Login;

Properties

Note: Other properties will be passed down to underlying component.

Prop	Description	Type	Default
`autoFocus`	If true, focuses the input on componentDidMount.	bool	`false`
`autoCapitalize`	Can tell TextInput to automatically capitalize certain characters.	bool	`false`
`editable`	If false, text is not editable. The default value is true.	bool	`false`
`secureTextEntry`	If true, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is false. Does not work with 'multiline={true}'.	bool	`false`
`underlineColorAndroid`	The color of the TextInput underline.	color	`transparent`
`placeholder`	The string that will be rendered before text input has been entered.	string	`Enter text...`
`placeholderTextColor`	The text color of the placeholder string.	color	`gray`
`multiline`	If true, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is false. Does not work with 'multiline={true}'.	bool	`true`
`maxLength`	Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker.	int	None
`disableFullscreenUI`	When false, if there is a small amount of space available around a text input (e.g. landscape orientation on a phone), the OS may choose to have the user edit the text inside of a full screen text input mode. When true, this feature is disabled and users will always edit the text directly inside of the text input.	bool	`false`
`allowFontScaling`	Specifies whether fonts should scale to respect Text Size accessibility settings.	bool	`true`
`autoCorrect`	If false, disables auto-correct.	bool	`true`
`caretHidden`	If true, caret is hidden.	bool	`false`
`enablesReturnKeyAutomatically`	If true, the keyboard disables the return key when there is no text and automatically enables it when there is text.	bool	`false`
`typeInput`	Type TextInput. Value valid: `email`, `password`, `default`	None	`email`
`hiddenIcon`	If true, hide icon in custom view of TextInput.	bool	`false`
`renderIcon`	Custom Icon view for view input.	func	None
`onChangeText`	Change value text input, setState value text input.	func	None
`backgroundColorErrorView`	Change background color for error validate view.	color	`#DA0967`
`colorErrorText`	Change color error text.	color	`#fff`
`customValidate`	If true, custom validate value text input.	bool	`false`
`typeErrorView`	Type error view when validate text input. Vaue valid: `design`, `bottomInput` .	string	`design`
`sizeErrorText`	Change fontSize error text.	number	`13`
`hiddenIconErrorView`	If true, hide icon in error view.	bool	`false`

Style props

Custom style input

Custom style TextInput default

styleInputDefault: {
        color: '#000',
        height: 40,
        fontSize: 14,
        // width: WINDOW_WIDTH,
        backgroundColor: 'transparent',
        paddingLeft: 10
 },

Custom style TextInput email

styleInputEmail: {
      color: '#000',
      height: 40,
      fontSize: 14,
      // width: WINDOW_WIDTH,
      backgroundColor: 'transparent',
      paddingLeft: 10
 },

Custom style TextInput password

styleInputPassword: {
      color: '#000',
      height: 40,
      fontSize: 14,
      // width: WINDOW_WIDTH,
      backgroundColor: 'transparent',
      paddingLeft: 10
 },

Custom style item

styleItem: { 
       alignItems: "center",   
       borderWidth: 1,
       backgroundColor: '#ededed',
       borderRadius: 5,
},

Custom style icon

styleIcon: { 
     color: '#000',
     fontSize: 22, 
     backgroundColor: "transparent", 
     alignItems: "center",
     marginRight: 5,
     marginLeft: 5
},

React native TextInput Validate Validate TextInput ReduxForm

native-base

@infinitebrahmanuniverse/nolb-react-native-v @everything-registry/sub-chunk-2597

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago