React-Native -> Couldn't change style using state - react-native

Question

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?

Answer 1

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.

Answer 2

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

Answer 3

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