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

Question

I have added Text inside touchableopacity now when user clicks on touchableopacity I want to change color of that button from default gray color to blue color see screenshot below. Now initially checked={this.state.newProjects} newProjects is not present inside state variable so onclick it should create new variable so that checked prop becomes true and then color changes. So I need to toggle button color onpress each time. Below code is not working. I am trying to create samething -> https://codesandbox.io/s/k3lzwo27z5 but in react native.

Code:

constructor(props) {
        super(props);
        this.state = {

        };
    }

    handleClick = e => {
    this.setState({
        [e.target.name]: !this.state[e.target.name]
    });
};

<TouchableOpacity onPress={this.handleClick('newProjects')}>
                        <Filterbutton name="New Projects" checked={this.state.newProjects}/>
                    </TouchableOpacity>

Filterbuttonjs:

const Filterbutton = ({name, checked}) => (
    <View style={checked ? styles.buttonTab : styles.defaultButtonTab}>
        <Text style={styles.buttonContent}>{name}</Text>
    </View>
)

export default Filterbutton;

const styles = StyleSheet.create({
    defaultButtonTab: {
        justifyContent: 'center',
        alignItems: 'center',
        maxWidth: 150,
        height: 30,
        padding: 10,
        borderRadius: 13,
        borderStyle: "solid",
        borderWidth: 1.3,
        borderColor: "rgba(131, 143, 158, 0.7)",
        marginRight: 10,
        marginTop: 10
    },
    buttonTab: {
        justifyContent: 'center',
        alignItems: 'center',
        maxWidth: 150,
        height: 30,
        padding: 10,
        borderRadius: 13,
        borderStyle: "solid",
        borderWidth: 1.3,
        borderColor: "#1994fc",
        marginRight: 10,
        marginTop: 10
    },

Screenshot:

Refer to my answer here: https://stackoverflow.com/a/64764528/9496077 — Ankush Chauhan, Nov 10 '20 at 07:30

score 3 · Answer 1 · answered Feb 13 '19 at 08:04

3

The color of button should be defined on <Text> instead of

<View>
  <Text style={[styles.text, checked ? styles.btnChecked : '']}>{name}</Text>
</View>

answered Feb 13 '19 at 08:04

Vu Luu

792
5
16

score 1 · Accepted Answer · answered Feb 18 '19 at 05:48

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 }>

score 0 · Answer 3 · answered Feb 13 '19 at 08:07

This is where you have a problem:

onPress={this.handleClick('newProjects')}

onPress takes a function, not returned value of an executed function. by doing this: this.handleClick('newProjects') you have an execution here. onPress executes the function name given. This is not how you call your own function. I know it's confusing but please try to bear with me here:

onPress={this.handleClick}

This will invoke your function on a click/tap but it's actually the default function it suppose to execute. At this point your handleCLick would look like:

handleClick = (e) => {
  //do stuff
}

But in any case if you want to send some value from the component level better way to do would be:

onPress={(v) => this.handleClick(yourValue)}

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

3 Answers3

Linked