title: dont share state between reusable component react native
body: <p>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?</p>
  <p>Here is the code if you need more details, but I think this is very clear</p>
  <pre><code>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 = () =&gt; {
   this.setState({isFocused: true});
   Animated.timing(animatedPlaceholder, {
    toValue: 0,
    duration: 300
   }).start();
  }
  
  blur = () =&gt; {
   this.setState({isFocused: false});
  
    Animated.timing(animatedPlaceholder, {
      toValue: 30,
      duration: 300
    }).start();
  
  }
  
  render() {
   return(
    &lt;View {...this.props}&gt;
      &lt;Animated.Text style={
        this.state.isFocused ? styles.usedValue : styles.emptyValue
      } &gt; {this.props.placeholder} &lt;/Animated.Text&gt;
      &lt;TextInput
        onFocus={this.focus}
        onBlur={this.blur}
        autoCapitalize={this.autoCapitalize}
        secureTextEntry={this.secureTextEntry}
        keyboardType={this.keyboardType}
          style={
            styles.textInput
          }
        /&gt;
    &lt;/View&gt;
  );
  }
  }
  </code></pre>
  <pre><code>export default Input;
  </code></pre>