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
; <Input label="User name" value=userName onChangeText= activeColor='green' activeLabelColor='green' containerStyle= marginVertical: 20 onBlur= !userName ? : 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