React Native Animated Inputs

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>
	);
	}
	}

view raw gistfile1.txt hosted with ❤ by GitHub