This is a very straight forward exploration of how I did animated inputs in my react native form. The demo is given below:
So I have basically three text inputs which I need to animate one after another. I used react native animated modules to do this kind of animation.
In animated modules there is a method called stagger which helps to animate components one after another with successive delays. I just needed to pass my array inputs to this method to implement this animation. The whole code is given below:
// Creating arrays to hold the animation arrays
const arr = [];
for (var i = 0; i < 3; i++) {
arr.push(i)
};
// Inputs configs
const inputs = [
{
placeholder: 'Full Name',
},
{
placeholder: 'Email Address',
},
{
placeholder: 'Password',
}
];
export default class App extends React.Component {
constructor(props) {
super(props);
this.animatedInputValue = [];
arr.forEach((value) => {
this.animatedInputValue[value] = new Animated.Value(0)
});
}
componentDidMount() {
// creating array animations
const inputAnimations = arr.map((item) => {
return Animated.timing(
this.animatedInputValue[item],
{
toValue: 1,
duration: 1500,
}
);
});
// Animate each element after 1000 miliseconds
Animated.stagger(1000, inputAnimations).start();
}
render() {
const animatedInputs = inputs.map((a, i) => {
return (
<Animated.View
key={i}
style={{
opacity: this.animatedInputValue[i], // attaching animations to the input opacity
}}
>
<TextInput
style={[{ borderColor: '#fff', borderBottomWidth: 1, padding: 5, marginBottom: 30 }]}
selectionColor="#fff"
placeholder={a.placeholder}
placeholderTextColor="#fff"
/>
</Animated.View>
);
});
return (
<LinearGradient
colors={['#642B73', '#C6426E']}
style={{
position: 'absolute',
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center'
}}
>
<View style={{ width: '100%', paddingHorizontal: 25 }}>
{animatedInputs}
</View>
</LinearGradient>
);
}
}
Top comments (0)