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;