https://github.com/akshit5230/React-Native-Material-TextInput

A simple TextInput wrapper for material styling in iOS and Android
https://github.com/akshit5230/React-Native-Material-TextInput

Last synced: 17 days ago
JSON representation

A simple TextInput wrapper for material styling in iOS and Android

• Host: GitHub
• URL: https://github.com/akshit5230/React-Native-Material-TextInput
• Owner: akshit5230
• Created: 2019-05-03T08:30:16.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-05-14T06:20:30.000Z (over 5 years ago)
• Last Synced: 2024-04-29T18:23:30.876Z (8 months ago)
• Language: JavaScript
• Homepage:
• Size: 6.84 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-react-native - rn-material-textinput - A simple TextInput wrapper for material styling in iOS and Android with Customizable styles & Animated label. (Components / UI)
• awesome-react-native - rn-material-textinput - A simple TextInput wrapper for material styling in iOS and Android with Customizable styles & Animated label. (Components / UI)
• awesome-react-native - rn-material-textinput - A simple TextInput wrapper for material styling in iOS and Android with Customizable styles & Animated label. (Components / UI)

README

        
# React-Native-Material-TextInput

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

## Installation

`npm i --save rn-material-textinput`

## Usage

1. Minimalist Example

```

 this.setState({ value })}

/>

```

 

2. 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 (

      

         this.setState({ value })}

          labelStyle={{

              fontFamily: 'ProximaNova-SemiBold',

              color: '#9E9E9E',

              fontSize: 15,

          }}

          inputStyle={{

              fontFamily: 'ProximaNova-SemiBold',

              color: '#2196F3',

              fontSize: 18,

          }}

          focusedBorderBottomColor="#2196F3"

          unfocusedBorderBottomColor="#9E9E9E"

        />

      

    )

  }

}

```

## 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:

```

 this._emailInputRef = ref}

    label="EMAIL"

    value={this.props.value}

    onChangeText={(value) => this.setState({ value })}

/>

```

Use reference to focus that input

```

componentDidMount() {

  this._emailInputRef.handleFocus()

}

```