Nativebase: Change button background color on press in

[viper1029]

Is there an way to change the color of the Button while the user is pressing it?
Currently, its possible to make it more transparent, but not change the color.

[sankhadeeproy007]

Button is wrapped around TouchableOpacity, so setting onPress background color is not possible at the moment. I recommend the use of TouchableHighlight for your desired effect.

[kuoliangkwong]

Hi, would like to change background color when button press too. Do you guys have any plan to implement using TouchableHighlight? Initially, I wanted to clone the same button using TouchableHighlight, but it seems like there are alot logics and libraries in the Button widget.

[himanshu-satija]

We have added this to our roadmap. We will implement this in future versions.

[sankhadeeproy007]

Added in latest release.

[olowe]

Please, how do I do this?

[ajuajas]

Hi @sankhadeeproy007 ,

How can i add overlay to touchable highlight

[embashgit]

import React, {
Component,
StyleSheet,
PropTypes,
View,
Text,
TouchableHighlight
} from "react-native";

export default class Home extends Component {
constructor(props) {
super(props);
this.state = { pressStatus: false };
}
_onHideUnderlay=()=> {
this.setState({ pressStatus: false });
}
_onShowUnderlay=()=> {
this.setState({ pressStatus: true });
}
render() {
return (
activeOpacity={1}
style={
this.state.pressStatus
? styles.buttonPress
: styles.button
}
onHideUnderlay={()=>this._onHideUnderlay()}
onShowUnderlay={()=>this._onShowUnderlay()}
>
style={
this.state.pressStatus
? styles.welcomePress
: styles.welcome
}
>
{this.props.text}



);
}
}

Home.propTypes = {
text: PropTypes.string.isRequired
};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
welcome: {
fontSize: 20,
textAlign: "center",
margin: 10,
color: "#000066"
},
welcomePress: {
fontSize: 20,
textAlign: "center",
margin: 10,
color: "#ffffff"
},
button: {
borderColor: "#000066",
borderWidth: 1,
borderRadius: 10
},
buttonPress: {
borderColor: "#000066",
backgroundColor: "#000066",
borderWidth: 1,
borderRadius: 10
}
});

[Takesuma]

@ajuajas Use underlayColor and activeOpacity

<TouchableHighlight onPress={() => console.log("button pressed')} activeOpacity={0.6} underlayColor="#DDDDDD"> <Text> {"press me"} </Text> </TouchableHighlight>