Skip to content

akshit5230/React-Native-Material-TextInput

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

React-Native-Material-TextInput

A simple TextInput wrapper for material styling in iOS and Android. Customizable styles 👍. Animated label 👍.

Installation

npm i --save rn-material-textinput

Usage

  1. Minimalist Example
<CustomTextInput
    label="EMAIL"
    value={this.state.value}
    onChangeText={(value) => this.setState({ value })}
/>
  1. Full example
import React from 'react';
import {
  View
} from 'react-native';
import CustomTextInput from 'rn-material-textinput';

export default class MyExample extends React.Component {

  state = {
    value: ""
  }
  
  render() {
    return (
      <View style = {{
        padding: 10
      }}>
        <CustomTextInput
          label="EMAIL"
          value={this.state.value}
          onChangeText={(value) => this.setState({ value })}
          labelStyle={{
              fontFamily: 'ProximaNova-SemiBold',
              color: '#9E9E9E',
              fontSize: 15,
          }}
          inputStyle={{
              fontFamily: 'ProximaNova-SemiBold',
              color: '#2196F3',
              fontSize: 18,
          }}
          focusedBorderBottomColor="#2196F3"
          unfocusedBorderBottomColor="#9E9E9E"
        />
      </View>
    )
  }
}

Props

Name Usage Example Value
label define the placeholder label for the input which animated upwards when focused "USERNAME"
value provide value variable and set this with onChangeText {this.state.value}
unfocusedBorderBottomColor provide custom color for bottom border when not focused "#DDDDDD"
focusedBorderBottomColor provide custom color for bottom border when focused "#DDFFFF"
labelStyle give styling to label text { fontSize: 15, color: "#dsdsdd", fontFamily: "Nunito-Bold"}
inputStyle give styling to input text { fontSize: 18, color: "#dsgfgd", fontFamily: "Nunito-Bold"}

Functions

Name Usage Example
handleFocus() fuction to focus the input programmatically this._emailInputRef.handleFocus()
handleBlur() fuction to unfocus the input programmatically this._emailInputRef.handleBlur()

You can provide other props available to TextInput component. For example secureTextEntry={true}, keyboardType="number-pad", returnKeyLabel="next"

Programmatically focusing on input

In cases such as prefilled values in the input, you need to focus the inputs to animate the label upwards. To do this, save reference of the CustomTextInput component and use handleFocus() and handleBlur() functions. For example:

<CustomTextInput
    ref={(ref) => this._emailInputRef = ref}
    label="EMAIL"
    value={this.props.value}
    onChangeText={(value) => this.setState({ value })}
/>

Use reference to focus that input

componentDidMount() {
  this._emailInputRef.handleFocus()
}

About

A simple TextInput wrapper for material styling in iOS and Android

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published