import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
const ColorButton = ({ colorName, onPress, isSelected }) => {
return (
<TouchableOpacity onPress={onPress}>
<View style={[styles.colorButton, isSelected && styles.selectedColorButton]}>
<Text style={[styles.colorButtonText, isSelected && styles.selectedColorText]}>
{colorName.toUpperCase()}
</Text>
</View>
</TouchableOpacity>
);
};
const App = () => {
const colorNames = ['red', 'green', 'blue', 'yellow'];
const [selectedColor, setSelectedColor] = useState('');
return (
<View style={styles.container}>
{colorNames.map((color, index) => (
<ColorButton
key={index}
colorName={color}
isSelected={color === selectedColor}
onPress={() => setSelectedColor(color)}
/>
))}
<Text style={styles.selectedColorText}>Selected Color: {selectedColor}</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
colorButton: {
backgroundColor: 'transparent',
borderWidth: 2,
borderColor: 'black',
padding: 10,
margin: 5,
},
selectedColorButton: {
borderColor: 'blue',
fontWeight: 'bold',
},
colorButtonText: {
textTransform: 'uppercase',
},
selectedColorText: {
marginTop: 20,
fontSize: 20,
fontWeight: 'bold',
},
});
export default App;
|