Btukfyl

I've got a problem with my app. I'm trying to change style in my child component using states but unfortunately i dont get any results. I tried evrythig i know, but i dont know what is going on and why styles aren't changing at all

Here is parent :

    constructor(props) {

    super(props);

    this.state = {

        number: 1,

        cords: [



        ],

        choosenCords: [



        ],

        style: {flex:1,flexDirection:'row',backgroundColor:'red'}

    };

} 

<View style={{ marginTop: 3 }}>

  <ListItem style={this.state.style} test={this.state.test} title={item.timestamp} context={item.longtitude + " " + item.latitude} click={this.getData.bind(this, item.longtitude, item.latitude, item.timestamp)} />

</View>



getData = async(x, y, z) => {



    let tempTab = 

        tempTab.push(x)

        tempTab.push(y)

        tempTab.push(z)

        const changeTest = this.state.test * (-1)

        await this.setState({

            choosenCords: [...this.state.choosenCords, tempTab],

            style: {flex:1,flexDirection:'row',backgroundColor:'blue'}

        })

}

}
This fragment of code represent changing style onPress. "choosenCords" are changing, but "style" don't.

Here is child:

class ListItem extends Component {

constructor(props) {

    super(props);

    this.state = {

        test:this.props.test

    };

}



render() {

    return (

        <View style={this.props.style}>

            <Image

                source={require('../Images/gps.png')}

                style={{ borderWidth: 3, borderColor: '#7887AB', borderRadius: 50, marginLeft: 15, marginTop: 10 }}

            />

            <View style={{ flex: 1, flexDirection: "column", marginBottom: 15, marginLeft: 10 }}>

                <Text style={{ marginLeft: 10, fontSize: 16 }}>

                    {

                        "Timestamp: " + this.props.title

                    }

                </Text>

                <Text style={{ marginLeft: 15, fontSize: 15 }}>

                    {

                        "Cords:" + this.props.context

                    }

                </Text>

            </View>

            <TouchableHighlight

                underlayColor={'transparent'}

                onPress={

                    this.props.click

                }>

                <Image

                    source={

                        require('../Images/check.png')

                    }

                    style={{ marginRight: 20 }}

                />

            </TouchableHighlight>

        </View>

    );



}

Could someone help me with that?

You have to do like this:

const customStyle= this.state.test ? styles.custom_1: styles.custom_2



return <View

      style={[ styles.anyStyle, customStyle]} 

    />;

Define your custom style variable, set it based on state, then use it as an array for your element.

The child component does not automatically update when the state of the parent component changes. You'll need to update the state of the child component manually when the parent sends new props.

//in child component

componentDidUpdate(previousProps, previousState){

   if(previousProps.style !== this.props.style){

       //update child state here

       this.setState({style: this.props.style})

   }

}

Now instead of using "style={this.props.style}" in the child, use "style={this.state.style}"

It is happening because when you update your state, child component will not update automatically. you will get new updated value in componentWillReceiveProps() method.

your ListItem class will be like below:

  class ListItem extends Component {

    constructor(props) {

    super(props);

    this.state = {

        test:this.props.test,

        style:'' // take style into your state

    };

}

componentWillMount(){

       this.setState({style: this.props.style}) //set style 

}

componentWillReceiveProps(newProps){

     //called when you update style

   if(newProps.style !== this.props.style){

       this.setState({style: newProps.style})

   }

}

render() {

    return (

        <View style={this.state.style}> //set style for views from state

           // add your views here

        </View>

    );

}

}