change the background color of view when clicked on another view

I am new to react-native so do bear with me. I am trying to change the background color of a view element when I click on a separate view element. I have a view element named wrapper and another view element named body. What I want to achieve is to change the backgroundColor property of the view "wrapper" when I click on the view "body". How can I achieve this? What I tried below throws error Attempted to assign to readonly property. What is the proper way to do this? Thanks in advance

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import { StatusBar } from "expo-status-bar";
import {
  StyleSheet,
  View,
  TouchableHighlight
} from "react-native";

export default function App() {
  {/*Something like this*/}
  const changeBgColor = () => {
    styles.wrapper.backgroundColor = "#000000";
  };
  
  return (
    <View style={styles.wrapper}>
      <TouchableHighlight onPress={changeBgColor}>
        <View style={styles.body}>
          
        </View>
      </TouchableHighlight>
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    width: 130,
    height: 130,
    padding: "4%",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#ff0000",
  },
  body: {
    width: "100%",
    height: "100%",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#ffffff",
  },
});

<!-- end snippet -->

You can change the background color by changing the state. you have to use state for the background color; when you want to change it, you can change state by setState.

Here in your example, I have set the default background color in viewBGColor state and changed the background color state on the click button.

import { StatusBar } from "expo-status-bar";
import {useState} from 'react';
import {StyleSheet, View, TouchableHighlight} from 'react-native';

export default function App() {
  const [backgroundColor, setBackgroundColor] = useState(
    styles.wrapper.backgroundColor,
  );

  const changeBgColor = () => {
    setBackgroundColor('#000000');
  };

  return (
    <View style={[styles.wrapper, {backgroundColor: backgroundColor}]}>
      <TouchableHighlight onPress={changeBgColor} style={styles.body}>
        <View />
      </TouchableHighlight>
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    width: 130,
    height: 130,
    padding: '4%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ff0000',
  },
  body: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffff',
  },
});