title: How can i change a stylesheet attribute outside it? React Native
body: <p>I made this example:</p>
  
  <pre><code>import React from 'react';
  import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
  
  export default function App() {
    const handlePress = e =&gt; {
      styles.button.borderColor = '#FF0000';
    };
  
    return (
      &lt;View style={styles.container}&gt;
        &lt;TouchableOpacity style={styles.button} onPress={handlePress}&gt;
          &lt;Text style={styles.text}&gt;Example&lt;/Text&gt;
        &lt;/TouchableOpacity&gt;
      &lt;/View&gt;
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center'
    },
    button: {
      borderWidth: 10,
      borderColor: '#000000',
      borderRadius: 15,
      backgroundColor: '#8a2be2',
      width: 125,
      height: 125,
      justifyContent: 'center',
      alignItems: 'center'
    },
    text: {
      color: '#fff',
      fontSize: 25
    }
  });
  </code></pre>
  
  <p>I try to change the value of the button borderColor calling a function to do this, but an error occurred saying: "Attempted to assign to readonly property"</p>