@shariq_ahmed/rn_textinput v1.0.22

React Native Customized TextInput

A Customized TextInput component for React Native that has the feature of placehoder being either hoverable or not. When the cursor is focused on the TextInput the outline border color of TextInput will changed to developer specifed color. This component minimizes the effor of UI Design for TextInput Component.

Demo :

Changelogs :

• v 1.0.22
  • Added zIndex to they styles of hoverd label text
• v 1.0.21
  • Fixed code issues in the below examples.
• v 1.0.20
  • Performance Enhancement.
  • Included example code with screenshots and Gif's for better understanding.
• v 1.0.4
  • Change the label font color to border color when cursor is placed inside the text.
• v 1.0.3
  • Updated ReadMe file.
• v 1.0.2
  • Bug Fixes and Code Optimization
• v 1.0.1
  • Removed required field from containerStyle prop.
  • Added required field.
• v 1.0.0
  • React Native Customized TextInput package deployment.

Installation :

npm install @shariq_ahmed/rn_textinput
                or
yarn add @shariq_ahmed/rn_textinput

Importing NPM Package

import { RN_TextInput } from '@shariq_ahmed/rn_textinput'

Examples :

Example 1 :

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { RN_TextInput } from '@shariq_ahmed/rn_textinput'

class App extends Component {
  constructor() {
    super();
    this.state = {
      username: '',
      nickname: '',
    }
  }
  
  updateUsername = (text) => {
    this.setState({ username: text })
  }

  updateNickname = (text) => {
    this.setState({ nickname: text })
  }
  
  render(){
      return(
        <View style={styles.container}>
             <RN_TextInput
                containerStyle={styles.containerStyles}
                labelType='placeHolder'
                required={true}
                textInputStyles={styles.textInputStyles}
                placeHolder={'Username'}
                placeholderTextColor={'darkslategray'}
                labelStyles={styles.labelStyles}
                onFocusStyles={styles.onFocusStyles}
                value={this.state.username}
                onChangeText={(text) => this.updateUsername(text)}
            />
            
            <RN_TextInput
                containerStyle={styles.containerStyles}
                labelType='placeHolder'
                required={false}
                textInputStyles={styles.textInputStyles}
                placeHolder={'Nickname'}
                placeholderTextColor={'darkslategray'}
                labelStyles={styles.labelStyles}
                onFocusStyles={styles.onFocusStyles}
                value={this.state.nickname}
                onChangeText={(text) => this.updateNickname(text)}
            />
        </View>
      )
  }
}
  
const styles = StyleSheet.create({
    container: { flex: 1, justifyContent: 'center', backgroundColor: '#F7F5EB' },
    containerStyles: { borderRadius: 9, borderWidth: 1.20, marginTop: 4, marginHorizontal: 5, borderColor: '#760933' },
    textInputStyles: { height: 42.5, fontSize: 15 },
    labelStyles: { backgroundColor: '#F7F5EB', fontSize: 14 },
    onFocusStyles: { borderColor: '#0000FF' }
})
  
export default App;

Explanation :

In the above code the prop labelType is set to value placeHolder and the prop required is set to true for field Username , since the prop required is set to true an *Asterisk () is added after the label/placeholder i.e Username .

For Nickname component the prop required is set to false , therefore it depicts the field is not mandatory and *Asterisk ()* won’t be included after the label/placeholder.

The prop onFocusStyles changes the borderColor of the component when the cursor is placed inside the component.

The prop textInputStyles sets the styles such as its height, width etc..

Example 2 :

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { RN_TextInput } from '@shariq_ahmed/rn_textinput'

class App extends Component {
  constructor() {
    super();
    this.state = {
      username: '',
      nickname: '',
    }
  }
  
  updateUsername = (text) => {
    this.setState({ username: text })
  }

  updateNickname = (text) => {
    this.setState({ nickname: text })
  }
  
  render(){
      return(
        <View style={styles.container}>
             <RN_TextInput
                containerStyle={styles.containerStyles}
                labelType=’’
                required={true}
                textInputStyles={styles.textInputStyles}
                placeHolder={'Username'}
                placeholderTextColor={'darkslategray'}
                labelStyles={styles.labelStyles}
                onFocusStyles={styles.onFocusStyles}
                value={this.state.username}
                onChangeText={(text) => this.updateUsername(text)}
            />
            
            <RN_TextInput
                containerStyle={styles.containerStyles}
                labelType=’’
                required={false}
                textInputStyles={styles.textInputStyles}
                placeHolder={'Nickname'}
                placeholderTextColor={'darkslategray'}
                labelStyles={styles.labelStyles}
                onFocusStyles={styles.onFocusStyles}
                value={this.state.nickname}
                onChangeText={(text) => this.updateNickname(text)}
            />
        </View>
      )
  }
}

const styles = StyleSheet.create({
    container: { flex: 1, justifyContent: 'center', backgroundColor: '#F7F5EB' },
    containerStyles: { borderRadius: 9, borderWidth: 1.20, marginTop: 4, marginHorizontal: 5, borderColor: '#760933' },
    textInputStyles: { height: 42.5, fontSize: 15 },
    labelStyles: { backgroundColor: '#F7F5EB', fontSize: 14 },
    onFocusStyles: { borderColor: '#0000FF' }
})
  
export default App;

Explanation :

In the above code the prop labelType is set to ‘’ so the placeHolder won't be displayed inside the component and only the label will be displayed.

Example 3 :

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { RN_TextInput } from '@shariq_ahmed/rn_textinput'

class App extends Component {
  constructor() {
    super();
    this.state = {
      username: '',
      nickname: '',
    }
  }
  
  updateUsername = (text) => {
    this.setState({ username: text })
  }

  updateNickname = (text) => {
    this.setState({ nickname: text })
  }
  
  render(){
      return(
        <View style={styles.container}>
             <RN_TextInput
                containerStyle={styles.containerStyles}
                labelType=’placeHolder’
                required={true}
                textInputStyles={styles.textInputStyles}
                placeHolder={'Username'}
                placeholderTextColor={'darkslategray'}
                labelStyles={styles.labelStyles}
                onFocusStyles={styles.onFocusStyles}
                value={this.state.username}
                onChangeText={(text) => this.updateUsername(text)}
            />
            
            <RN_TextInput
                containerStyle={styles.containerStyles}
                labelType=’placeHolder’
                required={false}
                textInputStyles={styles.textInputStyles}
                placeHolder={'Nickname'}
                placeholderTextColor={'darkslategray'}
                labelStyles={styles.labelStyles}
                onFocusStyles={styles.onFocusStyles}
                value={this.state.nickname}
                onChangeText={(text) => this.updateNickname(text)}
            />
        </View>
      )
  }
}

const styles = StyleSheet.create({
    container: { flex: 1, justifyContent: 'center', backgroundColor: '#F7F5EB' },
    containerStyles: { borderRadius: 9, borderWidth: 1.20, marginTop: 4, marginHorizontal: 5, borderColor: '#760933' },
    textInputStyles: { height: 42.5, fontSize: 15 },
    labelStyles: { backgroundColor: '#F7F5EB', fontSize: 14 },
    onFocusStyles: { borderColor: '#0000FF' }
})
  
export default App;

Explantion :

The above code shows the use of prop containerStyle , where borderWidth : 1.20 adds borders to top, left, right , bottom of the component.

Example 4 :

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { RN_TextInput } from '@shariq_ahmed/rn_textinput'

class App extends Component {
  constructor() {
    super();
    this.state = {
      username: '',
      nickname: '',
    }
  }
  
  updateUsername = (text) => {
    this.setState({ username: text })
  }

  updateNickname = (text) => {
    this.setState({ nickname: text })
  }
  
  render(){
      return(
        <View style={styles.container}>
             <RN_TextInput
                containerStyle={styles.containerStyles}
                labelType=’placeHolder’
                required={true}
                textInputStyles={styles.textInputStyles}
                placeHolder={'Username'}
                placeholderTextColor={'darkslategray'}
                labelStyles={styles.labelStyles}
                onFocusStyles={styles.onFocusStyles}
                value={this.state.username}
                onChangeText={(text) => this.updateUsername(text)}
            />
            
            <RN_TextInput
                containerStyle={styles.containerStyles}
                labelType=’placeHolder’
                required={false}
                textInputStyles={styles.textInputStyles}
                placeHolder={'Nickname'}
                placeholderTextColor={'darkslategray'}
                labelStyles={styles.labelStyles}
                onFocusStyles={styles.onFocusStyles}
                value={this.state.nickname}
                onChangeText={(text) => this.updateNickname(text)}
            />
        </View>
      )
  }
}

const styles = StyleSheet.create({
    container: { flex: 1, justifyContent: 'center', backgroundColor: '#F7F5EB' },
    containerStyles: { borderRadius: 9, borderBottomWidth: 1.20, marginTop: 4, marginHorizontal: 5, borderColor: '#760933' },
    textInputStyles: { height: 42.5, fontSize: 15 },
    labelStyles: { backgroundColor: '#F7F5EB', fontSize: 14 },
    onFocusStyles: { borderColor: '#0000FF' }
  })
  
export default App;

Explantion :

The above code shows the use of prop containerStyle , where borderBottomWidth : 1.20 adds border to bottom of the component.

Example 5 :

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { RN_TextInput } from '@shariq_ahmed/rn_textinput'

class App extends Component {
  constructor() {
    super();
    this.state = {
      username: '',
      nickname: '',
    }
  }
  
  updateUsername = (text) => {
    this.setState({ username: text })
  }

  updateNickname = (text) => {
    this.setState({ nickname: text })
  }
  
  render(){
      return(
        <View style={styles.container}>
             <RN_TextInput
                containerStyle={styles.containerStyles}
                labelType=’’
                required={true}
                textInputStyles={styles.textInputStyles}
                placeHolder={'Username'}
                placeholderTextColor={'darkslategray'}
                labelStyles={styles.labelStyles}
                onFocusStyles={styles.onFocusStyles}
                value={this.state.username}
                onChangeText={(text) => this.updateUsername(text)}
            />
            
            <RN_TextInput
                containerStyle={styles.containerStyles}
                labelType=’’
                required={false}
                textInputStyles={styles.textInputStyles}
                placeHolder={'Nickname'}
                placeholderTextColor={'darkslategray'}
                labelStyles={styles.labelStyles}
                onFocusStyles={styles.onFocusStyles}
                value={this.state.nickname}
                onChangeText={(text) => this.updateNickname(text)}
            />
        </View>
      )
  }
} 
  
const styles = StyleSheet.create({
    container: { flex: 1, justifyContent: 'center', backgroundColor: '#F7F5EB' },
    containerStyles: { borderRadius: 9, borderBottomWidth: 1.20, borderLeftWidth: 1.20 ,marginTop: 4, marginHorizontal: 5, borderColor: '#760933' },
    textInputStyles: { height: 42.5, fontSize: 15 },
    labelStyles: { backgroundColor: '#F7F5EB', fontSize: 14 },
    onFocusStyles: { borderColor: '#0000FF' }
})
  
export default App;

Explantion :

The above code shows the use of prop containerStyle , where borderBottomWidth : 1.20 and borderLeftWidth:1.20 adds borders to the left and bottom of the component.

Properties :

Available Props Description :

containerStyle :

labelStyles :

onFocusStyles :