react-native-text-input-interactive

Fully customizable, animated text input for React Native with beautiful and elegant design.

Installation

Add the dependency:

npm i react-native-text-input-interactive

Zero Dependency!

import InteractiveTextInput from "react-native-text-input-interactive";

<InteractiveTextInput onChangeText={(text: string) => {}} />

You can checkout the example project ?
There is advanced usage on example.

Simply run

should work of the example project.

TextInput and Icon is fully customizable thanks to prop-drilling, you can use any TextInput props.

Property	Type	Default	Description
mainColor	string	#2a41cb	change the main animated color
originalColor	string	transparent	change the original/default animated color
animatedPlaceholderTextColor	string	#757575	change the placeholder text animated color
ImageComponent	Component	Image	set your own image component such as; `FastImage`
IconComponent	Component	TouchableOpacity	set your own icon component such as; react-native-bounceable
enableIcon	boolean	false	set the true for using the right sided icon
enableIcon	boolean	false	set the true for using the right sided icon
iconImageSource	ImageSourcePropType	undefined	set the icon image
onIconPress	Function	undefined	set your own logic for the icon button functionality when the icon is pressed
style	ViewStyle	default	set or override the style object for the main container
textInputStyle	TextStyle	default	set or override the style object for the text input itself
iconContainerStyle	ViewStyle	default	set or override the style object for the icon container
iconImageStyle	ImageStyle	default	set or override the style object for the icon image style
buttonText	string	undefined	change the button's text
ImageComponent	Image	default	set your own component instead of default react-native Image component

Example mobile design is heavily inspired by Firman Praadita
Thank you so much for this inspiration :)