Update child components based on parent state - reactjs

Question

I'm new to react, I'm running into what I'm pretty sure is a common problem with a common solution but, because I'm new to the idea of React, I have no idea how to solve it.
Using the following as an example, how can I get my children to re-render whenever the TouchableWithoutFeedback callbacks are called? (Don't tell me to use a different component, this idea can be applied to lots of parent-child relationships - when something happens on a parent, re-render the children).
<TouchableWithoutFeedback
onPressIn={() => { /* what do I do here */ }}
onPressOut={() => { /* what do I do here */ }}
>
<View
style={{
backgroundColor: /* if touchable is highlighted black, otherwise white */
}}
>
<Text
style={{
color: /* if selected, then white, otherwise, black */
}}
>
Some Text
</Text>
</View>
</TouchableWithoutFeedback>
It seems a bit verbose to have to write custom components (so I can just call setState() every time I need this kind of functionality, do I really have to?)

Answer 1

Your onPressIn() and onPressOut() methods should update the state of your component. When a component's state is changed, the render() method is called and the component is re-rendered. If the component's children's properties have changed due to the update in state, then they will be re-rendered as well.
In your specific case you should do the following:
Add a state to your component. Somewhere in the component definition add state = { pressed: false }
Update the state with your onPress methods and use the state when setting the properties of your component's children:
<TouchableWithoutFeedback
onPressIn={() => { this.setState({pressed: true}) }}
onPressOut={() => { this.setState({pressed: false}) }}
>
<View
style={{
backgroundColor: (this.state.pressed) ? 'black' : 'white'
}}
>
<Text
style={{
color: (this.state.pressed) ? 'white' : 'black'
}}
>
Some Text
</Text>
</View>
</TouchableWithoutFeedback>
The above was tested in React Native 0.48 on an Android device.

Answer 2

As a rough example you would update the state on those callbacks and pass it as prop to your children components in the render method.
For example :
this.state = { isHighlighted: false }; // inside the parent component constructor
render() {
const { isHighlighted } = this.state;
return (
<div>
<FirstChild style={{ backgroundColor: isHighlighted ? 'black' : 'white' }}>
<SecondChild style={{ color: isHighlighted ? 'white' : 'black' }}>Some text</SecondChild>
</FirstChild>
</div>
);
}
and the callbacks would be :
onPressIn={() => { this.setState({ isHighlighted: true }) }}
onPressOut={() => { this.setState({ isHighlighted: false }) }}
If you would want to have style through nested components you would have to :
a) keep passing them as props
b) hold your state in a store (https://github.com/reactjs/redux)

Answer 3

In your constructor :
this.state={pressedIn:false,onPressOut:false}
Then
<TouchableWithoutFeedback
onPressIn={() => { this.setState({pressedIn:true,pressedOut:false}}
onPressOut={() => { {this.setState({pressedOut:true,pressedIn:false}}
>
<View
style={{
backgroundColor: this.state.pressedIn? "someColor":"SomeOtherColor"
}}
>
<Text
style={{
color: this.state.onPressOut? "someColor":"SomeOtherColor"
}}
>
Some Text
</Text>
</View>
</TouchableWithoutFeedback>