Updating the style of a child view in a ScrollView in React Native - react-native

Question

I have a horizontal scrollview inside which I'm adding childviews which has button inside it . All i want to do is to highlight the selected child and dim the others(essentially update the style). I am able to update the selected child's style using state , but how do i update rest of the children of scrollview ? I have tried using refs, multiple states but none worked.
Can anyone please provide with some pointers as in how to go about it ?
Thanks ..!!

Answer 1

You should make the component that owns the child views be responsible for specifying whether they are highlighted or dimmed. That way all of the logic for choosing which child should be highlighted is in one place in your code, and you have to only re-render the owner component when the user taps one of the children.
To detect touch events on each child, wrap them in a TouchableWithoutFeedback component.
class OwnerComponent extends React.Component {
state = {
selectedChildIndex: null,
};
render() {
return (
<ScrollView>
<TouchableWithoutFeedback
onPressIn={() => {
this.setState({ selectedChildIndex: 0);
}}
onPressOut={() => {
this.setState({ selectedChildIndex: null);
}}
style={styles.touchableContainer}>
<View style={this.getChildStyle(0)} />
</TouchableWithoutFeedback>
<TouchableWithoutFeedback
onPressIn={() => {
this.setState({ selectedChildIndex: 1);
}}
onPressOut={() => {
this.setState({ selectedChildIndex: null);
}}
style={styles.touchableContainer}>
<View style={this.getChildStyle(1)} />
</TouchableWithoutFeedback>
</ScrollView>
);
}
getChildStyle(childIndex) {
// No child is selected
if (this.state.selectedChildIndex === null) {
return null;
}
return (this.state.selectedChildIndex === childIndex) ?
styles.highlightedChild :
styles.dimmedChild;
}
}
let styles = StyleSheet.create({
touchableContainer: {
flexGrow: 1,
},
highlightedChild: {
backgroundColor: 0xf0f0f0;
},
dimmedChild: {
opacity: 0.7,
},
});