How can I change the color of selected item in flatlist in React Native?

November 12, 2021

I’m new to React Native. The alphabet is located at the top of the screen in the application. When any letter is clicked, the clicked letter appears on the screen. I want the color of the clicked letter to be different from the colors of other letters in flatlist. How can I do that?

Codes:

import React, { useState } from 'react'
import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native'

const WordPage = () => {

    const [selectedLetter, setSelectedLetter] = useState("A")

    const alphabet = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K",
        "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]

    const _renderAlphabet = ({ item }) => {
        return (
            <TouchableOpacity onPress={() => { setSelectedLetter(item) }}>
                <View style={styles.alphabetContainer}>
                    <Text style={styles.alphabetText}>{item}</Text>
                </View>
            </TouchableOpacity>
        )
    }

    return (
        <View style={styles.container}>
            <View>
                <FlatList
                    data={alphabet}
                    renderItem={_renderAlphabet}
                    horizontal
                />
            </View>
            <Text style={styles.text}>{selectedLetter}</Text>
        </View>
    )
}

export default WordPage

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    alphabetContainer: {
        width: 24,
        height: 24,
        marginLeft: 14,
        marginTop: 14,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'green'
    },
    alphabetText: {
        fontSize: 18,
        color: 'white',
    },
    text: {
        fontSize: 100,
        justifyContent: 'center',
        alignSelf: 'center'
    }
});

>Solution :

You can create a custom style for selected items and apply it conditionally.

const _renderAlphabet = ({ item }) => {
    return (
        <TouchableOpacity onPress={() => { setSelectedLetter(item) }}>
            <View style={item === selectedLetter ? styles.alphabetContainerSelected: styles.alphabetContainer}>
                <Text style={styles.alphabetText}>{item}</Text>
            </View>
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({
    ...
    alphabetContainer: {
        width: 24,
        height: 24,
        marginLeft: 14,
        marginTop: 14,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'green'
    },
    alphabetContainerSelected: {
        width: 24,
        height: 24,
        marginLeft: 14,
        marginTop: 14,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'red'
    },
    ...
});