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.

We also expose a ReinputButton. Check the docs ;)

Demo

Wanna try before? Here's an interactive Expo snack. Otherwise, you can clone the repo and run the /example folder. It's the same, tho.

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
register	Function	noop
textAlign	String	left

• Register exposes the TextInput ref component out

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
iconOverlay	Element

Placeholder

Name	Type	Default
placeholder	String
placeholderColor	String	#757575
placeholderVisibility	boolean	undefined

How placeholderVisibility works?

{
    Always: 1,
    Never: null,
    OnFocus: true,
    OnBlur: false,
}

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
errorStyle	TextStyle
errorStyle.fontSize	Number	12
errorStyle.paddingTop	Number	4
errorStyle.paddingBottom	Number	4

And also all the TextInput properties will work.

ReinputButton

We also expose a component that looks like an Input but it's a button so accepts onPress prop. We do following the material design guidelines.

Props are the same as the Input but it also accepts an onPress and doesn't have hooks for focus/blur events.

import { ReinputButton } from "reinput"

const Input = () => (
  <ReinputButton
    label="This is not an Input"
    value="If there is no value it shows the label as placeholder"
    onPress={/* whatever callback */}
  />
)

Credits

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