title: how to focus / blur event on button list react native
body: <p>I'm trying to emulate focus/ blur event in react native with no success. I have two components, Home and Button. In home i render a list of buttons(category1, category2 and category3).
  Here is my code:</p>
  
  <p>---HOME COMPONENT----</p>
  
  <pre><code>state = {
      categories: ['category1', 'category2', 'category3']
  };
  
  renderCategories() {
      return this.state.categories.map((category, index) =&gt; (
          &lt;Button onPress={() =&gt; this.getCategories(category)} key={index}&gt;
              {category}
          &lt;/Button&gt;
      ));
  }
  
  render() {
      return (
          &lt;View&gt;
              &lt;ScrollView horizontal showsHorizontalScrollIndicator={false} style={{marginBottom: 5}}&gt;
                  {this.renderCategories()}
              &lt;/ScrollView&gt;
          &lt;/View&gt;
  
      )
  }
  </code></pre>
  
  <p>---BUTTON COMPONENT---</p>
  
  <pre><code>class Button extends Component {
      constructor(props) {
          super(props);
          this.state = { pressStatus: false };
      }
  
      _onHideUnderlay() {
          this.setState({ pressStatus: false });
          console.log('unpressed')
      }
      _onShowUnderlay() {
          this.setState({ pressStatus: true });
          console.log('pressed')
      }
  
      render () {
  
          const {buttonStyle, buttonPressedStyle, textStyle} = styles;
          return (
              &lt;TouchableHighlight onPress={this.props.onPress}
                                  underlayColor={'#fff000'}
                                  activeOpacity={1}
                                  style={[buttonStyle, this.state.pressStatus ? {backgroundColor: '#fff000'} : {backgroundColor: '#1D36FF'}]}
                                  // onHideUnderlay={this._onHideUnderlay.bind(this)}
                                  onShowUnderlay={this._onShowUnderlay.bind(this)}&gt;
                  &lt;Text style={textStyle}&gt;
                      {this.props.children}
                  &lt;/Text&gt;
              &lt;/TouchableHighlight&gt;
          );
      }
  
  
  }
  
  const styles = {
      buttonStyle: {
          marginTop:10,
          paddingTop:15,
          paddingBottom:25,
          marginLeft:10,
          // marginRight:10,
          paddingLeft: 15,
          paddingRight: 15,
          backgroundColor:'rgba(99,99,99,0.99)',
          borderRadius:10,
          borderWidth: 1,
          borderColor: '#fff'
      },
      buttonPressedStyle: {
          marginTop:10,
          paddingTop:15,
          paddingBottom:25,
          marginLeft:10,
          // marginRight:10,
          paddingLeft: 15,
          paddingRight: 15,
          backgroundColor:'rgba(15,15,15,0.99)',
          borderRadius:10,
          borderWidth: 1,
          borderColor: '#fff'
      },
      textStyle: {
          color:'#fff',
          textAlign:'center',
          fontSize: 16
      },
  };
  </code></pre>
  
  <p>This code works partially. When i click first button(category1) it changes the background color as expected, but when i click second button(category2) then the button category1 should take the initial style(lost focus).</p>
  
  <p>Please help. Thanks</p>