title: Focus style for TextInput in react-native
body: <p>In React Native, how do you change the style of a <code>textInput</code> when it gets focus? Say I have something like</p>
  
  <pre><code>class MyInput extends Component {
      render () {
          return &lt;TextInput style={styles.textInput} /&gt;;
      }
  };
  
  const stylesObj = {
      textInput: {
          height: 50,
          fontSize: 15,
          backgroundColor: 'yellow',
          color: 'black',
      }
  };
  const styles = StyleSheet.create(stylesObj);
  </code></pre>
  
  <p>And I want to change the background color on focus to <code>green</code>.</p>
  
  <p><a href="https://facebook.github.io/react-native/docs/stylesheet.html#content" rel="noreferrer">This documentation</a> leads me to believe that the solution is something like </p>
  
  <pre><code>class MyInput extends Component {
      constructor (props) {
          super(props);
          this.state = {hasFocus: false};
      }
  
      render () {
          return (&lt;TextInput
              style={this.state.hasFocus ? styles.focusedTextInput : styles.textInput}
              onFocus={this.setFocus.bind(this, true)}
              onBlur={this.setFocus.bind(this, false)}
          /&gt;);
      }
  
      setFocus (hasFocus) {
          this.setState({hasFocus});
      }
  };
  
  const stylesObj = {
      textInput: {
          height: 50,
          fontSize: 15,
          backgroundColor: 'yellow',
          color: 'black',
      }
  };
  const styles = StyleSheet.create({
      ...stylesObj,
      focusedTextInput: {
          ...stylesObj,
          backgroundColor: 'green',
      }
  });
  </code></pre>
  
  <p>Ignoring potential mistakes in the styles structuring, would this be considered correct way to handle it? It seems very verbose to me.</p>