Do you need a beautiful, lightweight and customizable Animated Floating Input? Here it is!

A cross-platform Animated Floating Input component with style options and smooth animation.

• Checkout the example/ folder for use example.

• OnFocus and OnDismiss animations
• Custom style for every little bit of it
• Smooth animations
• Very lightweight

Open a Terminal in the project root and run:

npm install react-native-animated-input

import React from "react";
import { View } from "react-native";
import AnimatedInput from "react-native-animated-input";

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: "center", paddingHorizontal: 20 }}>
      <AnimatedInput
        placeholder="Email"
        valid={isValid}
        errorText="Error"
        onChangeText={handleChange}
        value={email}
        styleLabel={{ fontWeight: "600" }}
        styleBodyContent={{ borderBottomWidth: 1.5 }}
      />
    </View>
  );
};
export default App;

Shows or hides the error text and color.

Sets the error text to be displayed.

Sets the color of the error highlight.

Defines the placeholder text to be shown and animated when onFocus.

Lock or unlock text input.

Defines the value of the input.

Callback function that will handle the text input.

Renders the component on the beginning of the input. i.e R$ -> R$ 200,00.

Renders the component on the end of the input. i.e Kg -> 200Kg.

Any other prop of the TextInput/ component can be used and will work properly.

Customizes the component main View.

Customizes the TextInput component.

Customizes the error to be shown.

Customizes the label/placeholder of the input.

Customizes the view that manage the component composition - sufix, prefix, animated. Be careful.

Defines the fontSize of the label on it's initial State (inactive)

Defines the fontSize of the label on it's Final State (active)

Defines the fontSize of the text input (active)