How to change the view color after pressing the TouchableHighlight?

In my scenario, I am having UI within render like below code. Here, whenever I am pressing the touchableHighlight then I need to change the color in multiple different mode. Here, Multiple TouchableHighlight I have loaded into grid component but below actions should happen only on which is user pressing that particular TouchableHighlight.

• By Default It should be view radius white and inside circle gray
• When I am pressing the the TouchableHighlight component radiuscolor need to change, If tapping goes long time then need to change radius color red
• If my server responded then need to change radius green.

How to achieve above modes in touchableHighlight?

My CodeBelow

<View style={{                    alignItems: "center",                    height: 67,                    width: 68,                    borderRadius: 40,                    borderWidth: 3,                    backgroundColor: Colors.WHITE,                    borderColor: this.state.borderRadiusColor,                  }}><TouchableHighlight                     onPress={()=>{                      let value = item.text ? 0 : 1;                      this.SwitchToggle(value, item.valueParam);                     }}                     underlayColor={Colors.WHITE}                     // style={this.state.buttonNumber == index ? SwitchingStyles.switchButtonPressed : SwitchingStyles.switchButtonOff}                     style={SwitchingStyles.switchButtonOff}                     onHideUnderlay={this._onHideUnderlay.bind(this)}                     onShowUnderlay={this._onShowUnderlay.bind(this)}><Text></Text></TouchableHighlight></View>