A React Native TextInput with material style.



npm install --save reinput

yarn add reinput


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 ;)


import Reinput from 'reinput'

const Input = () => (
    <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 */} />



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
  • Register exposes the TextInput ref component out


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


Name Type Default
icon Element
iconOverlay Element


Name Type Default
placeholder String
placeholderColor String #757575


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


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

And also all the TextInput properties will work.


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 = () => (
    label='This is not an Input'
    value='If there is no value it shows the label as placeholder'
    onPress={/* whatever callback */}


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 ;)