react-native-animation-input

React-Native-Anim-input

Important

Please note that react-native-reanimated are needed for the library to work, so make sure they are installed in your project.

react-native-reanimated

Enhance your React Native app's user experience with the React Native Animated Text Input npm package. This powerful library seamlessly integrates animated text input components into your application, providing a sleek and dynamic way for users to interact with forms and input fields.

Result

Usage

Import library

import TextInputAnim from 'react-native-anim-input'

Basic

Single

<TextInputAnim
  onChangeText={txt => {
    setName(txt);
  }}
  value={name}
  placeholder="Name"
  backgroundColor="white"
  marginTop={30}
/>

Example

import {
  View,
  TouchableWithoutFeedback,
  KeyboardAvoidingView,
  Keyboard,
} from 'react-native';
import React, {useState} from 'react';
import TextInputAnim from 'react-native-anim-input';

const Example = () => {
  const [name, setName] = useState('');

  return (
    <View
      style={{
        flex: 1,
      }}>
      <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
        <KeyboardAvoidingView
          style={{
            flex: 1,
            alignItems: 'center',
            backgroundColor: 'white',
          }}>
          <TextInputAnim
            onChangeText={txt => {
              setName(txt);
            }}
            value={name}
            placeholder="Name"
            backgroundColor="white"
            marginTop={30}
          />
        </KeyboardAvoidingView>
      </TouchableWithoutFeedback>
    </View>
  );
};

export default Example;

Auto Check Valid Email

Property	Type	description
inputType*	string	email,Password
emailAutoChecked*	boolen	true
icons ( optional )	Array	[{uri: 'https://cdn-icons-png.flaticon.com/128/4436/4436481.png'},{uri: 'https://cdn-icons-png.flaticon.com/128/9068/9068699.png'}] or [require('./image/clear.png'),require('./image/check.png')]

Usage

  <TextInputAnim
    backgroundColor="white"
    onChangeText={txt => {
      setEmail(txt);
    }}
    value={email}
    placeholder="Email"
    inputType={'email'}
    emailAutoChecked={true}
    // icons={[
    //   {uri: 'https://cdn-icons-png.flaticon.com/128/4436/4436481.png'},
    //   {uri: 'https://cdn-icons-png.flaticon.com/128/9068/9068699.png'}
    // ]}
  />

Secure Password

Property	Type	description
inputType*	string	email,Password
visibleIcons	boolen	true
icons ( optional )	Array	[{uri: 'https://cdn-icons-png.flaticon.com/128/565/565654.png'},{uri: 'https://cdn-icons-png.flaticon.com/128/9068/9068699.png'}] or [require('./image/show.png'),require('./image/hide.png')]

Usage

  <TextInputAnim
    backgroundColor="white"
    onChangeText={txt => {
      setPassword(txt);
    }}
    value={password}
    placeholder="Password"
    inputType={'password'}
    visibleIcons={true}
    // icons={[
    //   {uri: 'https://cdn-icons-png.flaticon.com/128/565/565654.png'},
    //   {uri: 'https://cdn-icons-png.flaticon.com/128/4202/4202406.png'}
    // ]}
  />

Add Error Meessage

Property	Type	description
showErrorMessage*	boolen	true
errorMessage*	string	add your error message
clearMessage*	function	clear your error message
onBlur ( optional )	function	add your validation functionality

Example

import {
  View,
  TouchableOpacity,
  Text,
  KeyboardAvoidingView,
  TouchableWithoutFeedback,
  Keyboard,
} from 'react-native';
import React, {useRef, useState} from 'react';
import TextInputAnim from 'react-native-anim-input';

const Login = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');

  const passwordRef = useRef(null);
  const confirmPassRef = useRef(null);
  const [emailError, setEmailError] = useState('');
  const [passError, setPassError] = useState('');
  const [cpassError, setCPassError] = useState('');

  const validateEmail = () => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
      setEmailError('Invalid email address');
    } else if (email.toLowerCase() == '[e-mail]') {
      setEmailError('Email Already Exists!');
    } else {
      setEmailError('');
    }
  };

  const validatePassword = () => {
    if (password.length < 8) {
      setPassError('Password must be at least 8 characters');
    } else {
      setPassError('');
    }
  };

  const validateConfirmPassword = () => {
    if (password.length < 8) {
      setCPassError('Password must be at least 8 characters');
    } else if (password !== confirmPassword) {
      setCPassError('The password and confirmation password do not match.');
    } else {
      setCPassError('');
    }
  };

  function validation() {
    console.log('validation');
    Keyboard.dismiss();
  }

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: 'white',
      }}>
      <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
        <KeyboardAvoidingView
          style={{
            paddingVertical: 30,
            alignItems: 'center',
          }}>
          <TextInputAnim
            backgroundColor="white"
            onChangeText={txt => {
              setEmail(txt);
            }}
            value={email}
            placeholder="Email"
            returnKeyType="next"
            keyboardType="email-address"
            onSubmitEditing={() => {
              if (passwordRef.current) {
                passwordRef.current.focus();
              }
            }}
            // email auto checking
            inputType={'email'}
            emailAutoChecked={true}
            // show error message
            showErrorMessage={true}
            errorMessage={emailError}
            clearMessage={() => setEmailError('')}
            onBlur={() => validateEmail()}
          />

          <TextInputAnim
            backgroundColor="white"
            onChangeText={setPassword}
            value={password}
            placeholder="Password"
            ref={passwordRef}
            returnKeyType="next"
            onSubmitEditing={() => {
              if (confirmPassRef.current) {
                confirmPassRef.current.focus();
              }
            }}
            // hide password
            inputType={'password'}
            visibleIcons={true}
            // show error message
            showErrorMessage={true}
            errorMessage={passError}
            clearMessage={() => setPassError('')}
            onBlur={() => validatePassword()}
          />

          <TextInputAnim
            backgroundColor="white"
            onChangeText={setConfirmPassword}
            value={confirmPassword}
            placeholder="Confirm Password"
            ref={confirmPassRef}
            // hide password
            inputType={'password'}
            visibleIcons={true}
            // show error message
            showErrorMessage={true}
            errorMessage={cpassError}
            clearMessage={() => setCPassError('')}
            onSubmitEditing={() => validation()}
            onBlur={() => validateConfirmPassword()}
          />

          <TouchableOpacity
            onPress={() => validation()}
            style={{
              borderRadius: 8,
              height: 45,
              justifyContent: 'center',
              alignItems: 'center',
              borderWidth: 1,
              borderColor: 'grey',
              width: '90%',
              marginVertical: 30,
            }}>
            <Text style={{}}>Login</Text>
          </TouchableOpacity>
        </KeyboardAvoidingView>
      </TouchableWithoutFeedback>
    </View>
  );
};

export default Login;

Request Object

Property ( Required )	Type
value	string
onChangeText	function

Property ( default )	Type
height	number
width	number
onKeyPress	function
marginVertical	number
keyboardType	string
returnKeyType	string
secureTextEntry	boolen
maxLength	number
autoFocus	function
editable	boolen
onSubmitEditing	function
textAlign	string
onFocus	function
onBlur	function
backgroundColor	string
borderRadius	number
borderWidth	number
borderColor	string
fontSize	number
placeholder	string
paddingHorizontal	number
color	string
placeholderTextColor	string
activeColor	string
fontFamily	string
fontWeight	string
inputType	string
emailAutoChecked	boolen
icons	array
visibleIcons	boolen
showErrorMessage	boolen
errorMessage	string
clearMessage	function
margin	number
marginTop	number
marginBottom	number
marginLeft	number
marginRight	number

Install

Step 1

npm i react-native-anim-input

Step 2

iOS

cd ios
pod install

Key Features:

Smooth Animations:

Elevate the visual appeal of your app by incorporating smooth and elegant animations into your text input fields. Enjoy a seamless transition between states, creating a more engaging and polished user interface.

Customizable Styles:

Tailor the appearance of your text input components to match the unique aesthetic of your app. The package offers a wide range of customization options, including font styles, colors, and animation parameters, allowing you to achieve the perfect look and feel.

Responsive Design:

Ensure a consistent and responsive design across various devices and screen sizes. The React Native Animated Text Input package is built with responsiveness in mind, delivering a consistent user experience regardless of the device being used.

Intuitive API:

Simplify the integration process with an intuitive and developer-friendly API. The package's well-documented API makes it easy for developers to implement animated text inputs seamlessly, reducing development time and effort.

Keyboard Interactivity:

Enhance the user interaction with the keyboard through thoughtful animations and transitions. The package provides a set of features that enable you to create a fluid and responsive keyboard experience for users.

Accessibility:

Prioritize accessibility with the React Native Animated Text Input package. The components are designed to maintain accessibility standards, ensuring that all users, including those with disabilities, can interact with your app effectively.

Cross-Platform Compatibility:

Cross-Platform Compatibility: Develop applications for both iOS and Android platforms without compromising on performance or design. The React Native Animated Text Input package is built to seamlessly support both major mobile platforms.