dont share state between reusable component react native - react-native

Question

Im creating a reusable Text component with a onFocus and onBlur animation, but when I put this in a form; the focus and blur event triggers the animation for every Input in the form... can you help me to avoid this behavior?
Here is the code if you need more details, but I think this is very clear
import React, { Component } from 'react';
import { TextInput, View, Text, Animated, StyleSheet } from 'react-native';
const animatedPlaceholder = new Animated.Value(30);
class Input extends Component {
constructor(props) {
super(props);
this.state = {
id: '',
isFocused: false,
textLength: 0
};
}
secureTextEntry = this.props.secureTextEntry || false;
autoCapitalize = this.props.autoCapitalize || 'sentences';
keyboardType = this.props.keyboardType || 'default';
focus = () => {
this.setState({isFocused: true});
Animated.timing(animatedPlaceholder, {
toValue: 0,
duration: 300
}).start();
}
blur = () => {
this.setState({isFocused: false});
Animated.timing(animatedPlaceholder, {
toValue: 30,
duration: 300
}).start();
}
render() {
return(
<View {...this.props}>
<Animated.Text style={
this.state.isFocused ? styles.usedValue : styles.emptyValue
} > {this.props.placeholder} </Animated.Text>
<TextInput
onFocus={this.focus}
onBlur={this.blur}
autoCapitalize={this.autoCapitalize}
secureTextEntry={this.secureTextEntry}
keyboardType={this.keyboardType}
style={
styles.textInput
}
/>
</View>
);
}
}
export default Input;

Answer 1

I didn't quite got your question, but i created a component which animates the place holder when its focused, animated back if value is empty,
check this snack example https://snack.expo.io/#ashwith00/frowning-cookie
Code
import React, { Component } from 'react';
import { TextInput, View, Text, Animated, StyleSheet } from 'react-native';
export default class Input extends Component {
constructor(props) {
super(props);
this.state = {
id: '',
isFocused: false,
textLength: 0,
};
this.animatedPlaceholder = new Animated.Value(0);
}
secureTextEntry = this.props.secureTextEntry || false;
autoCapitalize = this.props.autoCapitalize || 'sentences';
keyboardType = this.props.keyboardType || 'default';
focus = () => {
Animated.timing(this.animatedPlaceholder, {
toValue: -40,
duration: 300,
}).start();
};
blur = () => {
if (!this.props.value) {
Animated.timing(this.animatedPlaceholder, {
toValue: 0,
duration: 300,
}).start();
}
};
render() {
const {value, onChangeText} = this.props;
return (
<View style={[ {
justifyContent: 'center'
}]}>
<Animated.Text
style={{
position: 'absolute',
transform: [{translateY: this.animatedPlaceholder}]
}}>
{' '}
{this.props.placeholder}{' '}
</Animated.Text>
<TextInput
value={value}
onChangeText={onChangeText}
onFocus={this.focus}
onBlur={this.blur}
autoCapitalize={this.autoCapitalize}
secureTextEntry={this.secureTextEntry}
keyboardType={this.keyboardType}
style={styles.textInput}
/>
</View>
);
}
}
const styles = StyleSheet.create({
usedValue: {} ,
emptyValue: {},
textInput: {
alignSelf: 'stretch',
height: 50,
borderWidth: 0.4
}
})