0
630
VistasHow 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'
}
});
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
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'
},
...
});
·
Juan Pablo Isaza
Denunciar
Responde la pregunta