react-native-sooji-animated-input

This package includes an animated input using Animated.

Demo :

Install :

npm i react-native-sooji-animated-input --save

Here is an example of usage in a login form :

You should import the package at the first :

import AnimatedInput from 'react-native-sooji-animated-input';

Then you can use AnimatedInput anywhere, like a TextInput component :

<AnimatedInput
    value={this.state.email} // value of input, like TextInput
    title={"Email Address"} // title of input
    onChange={(e)=>this.onChange(e.target.value,'email')} // input onChange, like onchange of TextInput
    isFirst={true} // if it is the first input of form, you can set it true
    autoCorrect={false} // read autoCorrect at the doc of TextInput
    isSecure={false} // read secureTextEntry at the doc of TextInput
    duration={250} // duration of animated title
    easing={Easing.sin} // for using custom easing you should import Easing first

    rtlTitle={false} // right to left title

    titleColor="#273654" // color of title
    inputColor="#3751FE" // color of input text

    inputBoxStyle={{opacity: 1}} // style of background box of input
    inputStyle={{opacity: 1}} // style of input
    titleStyle={{opacity: 1}} // style of title
    />
<AnimatedInput
    value={this.state.password}
    title={"Password"}
    onChange={(e)=>this.onChange(e.target.value,'password')}
    isFirst={false}
    autoCorrect={false}
    isSecure={true}
    duration={250}
    easing={Easing.sin}
    
    rtlTitle={false}

    titleColor="#273654"
    inputColor="#3751FE"

    inputBoxStyle={{opacity: 1}}
    inputStyle={{opacity: 1}}
    titleStyle={{opacity: 1}}
    />

RTL :

If you want to create rtl title you should set rtlTitle to true

RTL text input :

If you want to create rtl input you should handle inputStyle property and set textAlign or direction with custom padding.

I will handle customization of these features in the next version

Tell me your requests and problems : [email protected]