How to change color of an component when its pressed in React Native FlatList

Question

I have been trying to develop a list which has cards and list item from data source. I have successfully brought up the list, but what i want to achieve is that when ever user touches a Item in the list, the item's color should change.

Most importantly only one item should be selected. How to achieve this? I have grabbed the value of the data by using redux actions and reducers. But, i don't have any idea how to achieve this selection process.

My flatList code:

 <FlatList
    horizontal={true}
    data={this.qtyList}
    keyExtractor={item => item.id.toString()}
    showsHorizontalScrollIndicator={false}
    renderItem={({ item }) => (
            <TouchableHighlight 
            onPress={() => {

            }}
            >
            <Card
            containerStyle={{  borderRadius: 5 }}
            >
            <Text>
            {item.qty}
            </Text>
            </Card>
        </TouchableHighlight>
    )}
/>

Please provide step by step instructions, as i am totally a beginner. i don't want to do this with help of redux, so component level state would be great help.

Answer 1

You should store the id of the selected item in the state:

<TouchableHighlight 
  onPress={() => {
    this.setState({ itemSelected: item.id }) <== your item must have a unique id
  }}
>

Then, for example in your card component you can do:

<Card
  containerStyle={{
    borderRadius: 5,
    backgroungColor: this.state.itemSelected === item.id ? 'red', 'white',
  }}
>

In addition, you have to add extraData={this.state} to your flatlist. Here's the link to the doc

Answer 2

You need a function which sets state when the user click an item of FlatList. When the state changes, component style will change for showing selected item. And you should set extraData to FlatList for rendering when the state changes.

class Second extends React.Component {    
    constructor(props) {
        super(props);
        this.state = {
            selectedItem: null
        };
    }

    onPressHandler(id) {
        this.setState({selectedItem: id});
    }

    render() {
        return (
            <View>
                <FlatList
                    extraData={this.state.selectedItem} //Must implemented
                    horizontal={true}
                    data={qtyList}
                    keyExtractor={item => item.id.toString()}
                    showsHorizontalScrollIndicator={false}
                    renderItem={({item}) => (
                        <TouchableOpacity
                            onPress={() => this.onPressHandler(item.id)}>
                            <Card
                                containerStyle={this.state.selectedItem === item.id ? {
                                    borderRadius: 5,
                                    backgroundColor: "#000000"
                                } : {borderRadius: 5, backgroundColor: "#a1a1a1"}}>
                                <Text>{item.qty}</Text>
                            </Card>
                        </TouchableOpacity>
                    )}
                />
            </View>
        );
    }
}