react-native-reanimated-text-input

React Native text input component with a floating label - using react-native-reanimated.

Peer Dependancies

react-native-reanimated 

Demo

Installation

yarn add react-native-reanimated-text-input

or

npm install --save react-native-reanimated-text-input

Usage

import Input from 'react-native-reanimated-text-input';

 <Input
          label={"User name"}
          value={userName}
          onChangeText={(t) => setUserName(t)}
          activeColor={'green'}
          activeLabelColor={'green'}
          containerStyle={{ marginVertical: 20 }}
          onBlur={() => !userName ? setUsernameError('User name is mandotory') : null}
          error={usernameError}
 />

Prop-types

Prop name	Type
error	string - error text to display if any error available
errorColor	color - color to decorate text input border and error text
errorTextStyle	Text style - styles to override error text styles
textInputStyle	Input style - style obj to oveerride text input styles
containerStyle	View style - style to override textinput container (EG: padding , margins)
labelTextStyle	Text style - styles to override label(placeholder) text style
isKeyboardInput	boolean - default true, if false this will not open keboard, instead give a callback via onPress if this is false
onPress	function - function to execute onPress in isKeyboardInput = true
labelTextColor	color - default label(placeholder) color if labelTextStyle is not set
activeLabelColor	color - default label(placeholder) color if labelTextStyle is not set and label is floaing on top(text input is active)
activeColor	color - border color when the text input is active
{...props}	TextInput props - All react native text input props

Example

checkout example/test directory and findout a react-native app.

yarn android

or

yarn ios