How to Change Color of Button on Press in React Native

React Native - Change button color on focus

from react-native docs :

When running on Android TV the Android framework will automatically
apply a directional navigation scheme based on the relative position
of focusable elements in your views. The Touchable mixin has code
added to detect focus changes and use existing methods to style the
components properly and initiate the proper actions when the view is
selected using the TV remote, so TouchableWithoutFeedback,
TouchableHighlight, TouchableOpacity, and TouchableNativeFeedback will
work as expected. In particular:

onFocus will be executed when the touchable view goes into focus
onBlur will be executed when the touchable view goes out of focus
onPress will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote.

so adding onfocus on TouchableOpacity should work for you the reason it is not you need some changes in AndroidManifest.xml to activate android tv mode

  <!-- Add custom banner image to display as Android TV launcher icon -->
<application
...
android:banner="@drawable/tv_banner"
>
...
<intent-filter>
...
<!-- Needed to properly create a launch intent when running on Android TV -->
<category android:name="android.intent.category.LEANBACK_LAUNCHER"/>
</intent-filter>
...
</application>

also, you can use tvParallaxProperties and hasTVPreferredFocus to show the initial focus but it has limited effects

    <TouchableHighlight
hasTVPreferredFocus
tvParallaxProperties={{ magnification: 1.2 }}
>
<Text>Button</Text>
</TouchableHighlight>

https://reactnative.dev/docs/touchableopacity#tvparallaxproperties-android

How to change the background color of a button in an app created with react native on iOS?

We mostly use touchable Opacity as a button in React Native app because we have no deeper access to React Native button that's why.

Below is the use of Button made with Touchable Opacity

import React from 'react';
import { Text, StyleSheet, TouchableOpacity } from 'react-native';
import colors from '../../constants/colors';

const Button = props => { // normalText | whiteTheme
const style = props.normalText ? { fontWeight: 'bold', fontSize: 15, fontFamily: undefined } : {}
return (
<TouchableOpacity style={{ ...styles.button, ...props.style, backgroundColor: props.whiteTheme ? colors.secondary : colors.primary }} onPress={props.onPress}>
<Text style={{ ...styles.text, color: props.whiteTheme ? colors.primary : colors.secondary, ...style, ...props.textStyle }} numberOfLines={1} adjustsFontSizeToFit={true}>
{props.title}
</Text>
</TouchableOpacity>
);
}

export default Button;

const styles = StyleSheet.create({
button: {
backgroundColor: colors.secondary,
height: 40,
borderRadius: 6,
justifyContent: 'center',
alignItems: 'center'
},
text: {
color: colors.primary,
fontSize: 17.5,
fontFamily: 'bold'
},
});

I hope you got it!

change color when button is pressed and deselect other options

You can set a single variable and set the colour based on that. There is no need for multiple states. I added a callback function which can be used by the parent component to get this update.

const EmojiInput = (props) => {
const [selected, setSelected] = React.useState(0);

const onItemSelected=emoji=>{
setSelected(emoji);
if(props.callback){
props.callback(emoji);
}
};

return (
<View style={styles.emojiView}>
<TouchableOpacity onPress={() => onItemSelected(1)}>
<FontAwesome5 name="angry" size={40} color={selected==1?'red':'grey'} />
</TouchableOpacity>
<TouchableOpacity onPress={() => onItemSelected(2)}>
<Entypo name="emoji-sad" size={40} color={selected==2?'red':'grey'} />
</TouchableOpacity>
<TouchableOpacity onPress={() => onItemSelected(3)}>
<Entypo name="emoji-neutral" size={40} color={selected==3?'red':'grey'} />
</TouchableOpacity>
<TouchableOpacity onPress={() => onItemSelected(4)}>
<Entypo name="emoji-happy" size={40} color={selected==4?'red':'grey'} />
</TouchableOpacity>
<TouchableOpacity onPress={() => onItemSelected(5)}>
<FontAwesome5 name="laugh-beam" size={40} color={selected==5?'red':'grey'} />
</TouchableOpacity>
</View>
);
};

react native paper : i want to change button's color when i press react native paper's button

I think you can't change color chaning after pressed without changing the color of whole button.
What you can do is wrap the button in independent clickable function like TouchableOpacity, TouchableWithoutFeedback or another custom from web.

There is a little example what I mean to do:

<TouchableOpacity>
<Button icon="camera" mode="contained">
Press me
</Button>
</TouchableOpacity>

Change a button color by using onPress on React Native

You should keep track of the color in the component state. As a side, make sure to understand what the keyword this really means. Do a console.log(this) and see it for yourself.

Anyway, you can

(1) set the initial state in the constructor;

(2) access value from the state using this.state.someProp

then (3) adjust the state later using this.setState({ someProp: someValue }).

1) Initial State

constructor(props) {
super(props);

this.state = {
buttonColor: 'red'; // default button color goes here
};
}

2) Accessing the State &
3) Setting New State

onButtonPress = () => {
this.setState({ buttonColor: 'someNewColor' });
}

render() {
// ...
return (
{/* ... */}
<Button
color={this.state.buttonColor}
onPress={onButtonPress}
/>
)

Note some parts of the code were omitted to focus on the question at hand.

How to change color of button on press in React Native?

You have to declare newProjects inside state.

Code:

constructor(props) {
super(props);
this.state = {
newProjects=''
};
}

AND change your nulll check to this.

 <View style={!checked ? styles.defaultButtonTab :styles.buttonTab }>

How to change only the active button background color [React-Native]

You are always setting the active button to the first one. Also, I would use an array to render the buttons. I would do something like this:

class App extends Component {
constructor(props){
super(props)
this.state = {
selected: null
}
}

handlePress = (item) => {
this.setState({ selected: item })
}

render() {
return (
<View>
{[...Array(3).keys()].map((item) => {
return (
<TouchableOpacity key={item} style={[styles.Btn, {backgroundColor: this.state.selected === item ? "green" : "white" }]} onPress={() => this.handlePress(item)}>
<Text style={styles.BtnText}>Button {item + 1}</Text>
</TouchableOpacity>
)
})}
</View>
);
}
}

Can we change button color of Swiper module in React Native?

Yes you can, there is props called buttonWrapperStyle which is nothing but a style.

You can even change style of specific left/right button by using nextButton or prevButton props

nextButton={()=><Text style={styles.buttonText}>Next</Text>}

Find more in detail from here https://github.com/leecade/react-native-swiper#control-buttons



Related Topics



Leave a reply



Submit