Simplified style change onPress React Native

Question

The following is a first attempt at learning to simply change the style of an element onPress in react native. Being well versed in web languages I am finding it difficult as it is not as straight forward.

For reasons as yet unknown, the element requires two clicks in order to execute.

export class NavTabItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            active: false
        }
        this.NavTabAction = this.NavTabAction.bind(this)
    }

    NavTabAction = (elem) => {
        elem.setState({active: !elem.state.active})
    }

    render() {
        return (
            <TouchableOpacity
            style={this.state.active ? styles.NavTabItemSelected : styles.NavTabItem}
            onPress={()=> {
                this.NavTabAction(this)
            }}>
                <View style={styles.NavTabIcon} />
                <Text style={styles.NavTabLabel}>{this.props.children}</Text>
            </TouchableOpacity>
     );
  }
}

Other issues:

I also have not worked out how a means of setting the active state to false for other elements under the parent on click.

Additionally, Is there a simple way to affect the style of child elements like with the web. At the moment I cannot see a means of a parent style affecting a child element through selectors like you can with CSS

eg. a stylesheet that read NavTabItemSelected Text :{ // active style for <Text> }

Answer 1

Instead of calling elem.setState or elem.state, it should be this.setState and elem.state.

NavTabAction = (elem) => {
    this.setState(prev => ({...prev, active: !prev.active}))
}

And instead of passing this in the onPress, you should just pass the function's reference.

onPress={this.NavTabAction}>

You should also remove this line because you are using arrow function

// no need to bind when using arrow functions
this.NavTabAction = this.NavTabAction.bind(this)

Additionally, Is there a simple way to affect the style of child elements like with the web

You could check styled-component, but I think that feature don't exists yet for react native. What you should do is pass props down to child components.

Answer 2

Thanks to everyone for their help with this and sorting out some other bits and pieces with the code.

The issue in question however was that the style was changing on the second click. A few hours later and I have a cause and a solution for anyone suffering from this. Should any of the far more experienced people who have answered this question believe this answer is incorrect or they have a better one, please post it but for now here is the only way I have found to fix it.

The cause:

Using setState was correctly re rendering the variables. This could both be seen in the console via console.log() and directly outputted in the render making them visible.

However, no matter what was tried, this did not update the style. Whether it was a style name from the Stylesheet or inline styles, they would update on the second click rather than the first but still to the parameters of the first. So if the first click should make a button turn from red to green, it would not do so even though the new state had rendered. However if a subsequent click should have turned the button back to red then the button would now go green (like it should have for the first click). It would then go red on the third click seemingly always one step behind the status passed to it.

Solution

To fix this, take the style off the the primary element (forgive terminology, someone edit), in my case, the TouchableOpacity element. Add in a child View element and place the styles on that View element instead along with the ternary operator and wallah.

It seems any change to status on the effective master element or container if you prefer, only takes affect after another render, not that contained in setStatus.

Final code:

export class NavTabItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            active: false
        }
    }

    NavTabAction = () => {
        this.setState({active: !this.state.active})
    }

    render() {
        this.state.active == true ? console.log("selected") : console.log("unselected")
        return (
            <TouchableOpacity onPress={this.NavTabAction}>

              // added View containing style and ternary operator

                <View style={this.state.active == true ? styles.NavTabItemSelected : styles.NavTabItem}>
                    <View style={styles.NavTabIcon} />
                    <TextCap11 style={styles.NavTabLabel}>{this.props.children}</TextCap11>
                </View>

              // End added view

            </TouchableOpacity>
     );
  }
}