react-native-text-field v4.1.1

react-native-text-field

react-native-text-field is a text field that wraps React Native TextInput with customizable field title and placeholder, masked text input, and text validation.

For the text validation, the react-native-text-field provides onValidate props to allow developers customize validation methods. Before version 3.0, react-native-text-field gives a general error to indicate the content in the text field is unexpected. However, for versions after 3.0, developers can provide multiple different error messages for various cases that could happen during the validation process.

For example, a Password field might need to be longer than 4 digits, and contains letters at the same time.

Installation

Install Dependencies

npm install react-native-masked-text

Install react-native-text-field

npm install react-native-text-field

Basic Usage

import TextField from 'react-native-text-field';

render() {
  return (
    <TextField
      title="Header"
      placeholder="Placeholder"
      onInputChange={(text) => this.onInputChange(text)}
    />
  )
}

onInputChange(text) {
  console.log(text)
}

Text Validation

render() {
	return(
		<TextField
			title="Password"
			placeholder="password"
			onInputChange={text =>
				this.onInputChange({ password: text })
			}
			onValidate={text => this.validatePassword(text)}
			invalidHint="Password is not valid."
			validateAsTyping={true}
			isSecured={true}
			isRequired={true}
			isRequiredHint="Password cannot be empty."
		/>
	)
}

validatePassword = (password) => {
	if (!password.length >= 4) {
		// Return error message as string if the text is not valid.
		return 'Password need to be at least 4 digits.' 
	}
	if (!/[a-zA-Z]/.test(password)) {
		// Return a different error message if the text doesn't match certain criteria. 
		return 'Password need to contain letters.'
	}
	
	return true // Return 'true' to indicate the text is valid.
	
}

Style Customization

Samples of text fields that were made with react-native-text-field.

render() {
  return(
    <TextField
      title='Password'
      placeholder="password"
      onInputChange={(text) => this.onInputChange(text)}
      onValidate={(text) => this.validatePassword(text)}
      isSecured={true}
      cellHeight={40}
      isMultiline={false}
      width={300}
      selectionColor={'#5D95EF'}
      autoCapitalize={'none'}
      autoCorrect={false}
      style={{ marginTop: 20, marginBottom: 100 }}
      titleStyle={{ color: '#5D95EF' }}
      textFieldStyle={{ borderColor: '#BCC4D1' }}
      textInputStyle={{ color: '#000000' }
      placeholderStyle={{ color: '#BCC4D1' }}
      invalidTextFieldStyle={{ borderColor: '#EF6C40' }}
      invalidTextInputStyle={{ color: '#FF0000' }}
      invalidHintStyle=={{ fontSize: 10 }}
      visibilityIconTintColor={"#00ff00"}
	  visibilityIconSource={require('@Images/defaultIcon.png') }
	  invisibilityIconSource={require('@Images/defaultIcon.png') }
    />
   )
}

Mask Input

Use Predefined Mask

react-native-text-field integrated react-native-masked-textfor masked text, there for react-native-text-field supports almost all types of masks that react-native-masked-text provided. Check https://www.npmjs.com/package/react-native-masked-text for more details about how to defined your maskOptions object.

To use react-native-masked-text predefined masks, assign desired predefeind mask type to textType props. Each predefiend mask type has default maskOptions object, which can be overwritten via passing maskOptions props into the Text Field instance.

<TextField
	title='Payment Amount'
	placeholder="Payment Amount"
	onInputChange={(text) => this.onInputChange(text)}
	textType={'money'}
	maskOptions={{
	    unit: '€',
	    separator: '.',
	    delimiter: ','
	}}
/>

Customize Mask

Besides using predefined masks, react-native-masked-text provide us the capability to customize masks. react-native-text-field support customizing masks as well.

To customize mask, assign 'custom' to props textType, and pass mask string into customMask props. Mask string is a string that contains '9', 'A', 'S' and '*', where '9' represents digit, 'A' represents alpha, 'S' represents alphanumeric, and '*' represents all except white space.

<TextField
	title='Customized Mask'
	placeholder="Customized Mask"
	onInputChange={(text) => this.onInputChange(text)}
	textType={'custom'} 
	customMask={'(999)-999-9999'}
/>

In the example above, the text field is masking a phone number, for example,'7788550000' as '(778)-855-0000'.

Migrating from 2.x to 3.x

In 2.x, the react-native-text-field is validating the text field content as per typing. In 3.x, validateAsTyping props were added with default value false. If you need to keep validating your text field whenever the text changes, please manually assign validateAsTyping to true. Otherwise, the validation will be executed once only when user leaves the text field.

If you are using width props of react-native-text-field, you might be just well without changing anything since the width takes higher priority than width in style props. If you notice that your horizontal margin looks not correct, please use marginLeft and marginRight in style props to adjust the margin to the left and right edge of the screen.