Question

0

631

Views

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

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'
    }
});

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-10T11:47:03.797Z

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

0

631

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

1 answers

0

Find remote jobs

Andres GPT