Package Exports

reinput

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (reinput) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Reinput

A React Native TextInput with material style 😎

Installation

npm install --save reinput

yarn add reinput

Motivation

Styling react-native inputs can be cumbersome. And most of them heavily relies onto the material design patterns. This style layer over the regular TextInput paves the way towards and easier and faster development.

Usage

import Reinput from 'reinput'

const Input = () => (
  <View>
    <Reinput label='name' />
    <Reinput error='Handles error' />
    <Reinput label='name' value='control value from outside' />
    <Reinput label='name' defaultValue='initial value' />
    <Reinput label='name' onChangeText={/* any TextInput prop */} />
  </View>
)

Props

Input

Name	Type	Default
activeColor	String
color	String	`#000000`
fontFamily	String
fontSize	Number	`15`
fontWeight	String or Number	`normal`
height	Number	`64`
marginBottom	Number	`8`
marginLeft	Number
marginRight	Number
marginTop	Number
maxHeight	Number
minHeight	Number
onBlur	Function
onChangeText	Function
onContentSizeChange	Function
onFocus	Function
paddingBottom	Number	`8`
paddingLeft	Number	`0`
paddingRight	Number	`0`
paddingTop	Number	`20`

Label

name	type	default
label	String
labelActiveColor	String	`#3f51b5`
labelActiveScale	Number	`0.8`
labelActiveTop	Number	`-18`
labelColor	String	`#757575`
labelDuration	Number	`200`

Icon

Name	Type	Default
icon	Element

Placeholder

Name	Type	Default
placeholder	String
placeholderColor	String	`#757575`

Underline

Name	Type	Default
underlineActiveColor	String	`#3f51b5`
underlineActiveHeight	Number	`2`
underlineColor	String	`#757575`
underlineDuration	Number	`200`
underlineHeight	Number	`1`

Error

Name	Type	Default
error	String
errorColor	String	`#fc1f4a`
errorFontSize	Number	`12`
errorPaddingTop	Number	`8`

And also all the TextInput properties will work.

Example

I'm working on an expo demo. So far, you can clone the project and check the example dir. It's the one of the gif ;)

Credits

Style patterns are mainly based on Material Design; properly adapted for iOS.