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

Time:11-13

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?

enter image description here

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'
    }
});
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

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'
    },
    ...
});
  • Related