How can i change a stylesheet attribute outside it? React Native

Question

I made this example:

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';

export default function App() {
  const handlePress = e => {
    styles.button.borderColor = '#FF0000';
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.button} onPress={handlePress}>
        <Text style={styles.text}>Example</Text>
      </TouchableOpacity>
    </View>
  );
}

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
  }
});

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"

Answer 1

you need to change state for that, you can use useState , import it and then change the state on press:

import React, {useState} from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';

export default function App() {
  const [buttonClicked, setButtonClicked] = useState(false)
  const handlePress = e => {
    setButtonClicked(true)
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity style={buttonClicked?[styles.button, {borderColor: 'red'}]:styles.button} onPress={handlePress}>
        <Text style={styles.text}>Example</Text>
      </TouchableOpacity>
    </View>
  );
}

Answer 2

It looks like you're trying to edit the styles object when you fire the onPress event. Instead of that, you need to edit the style of the event object passed by the event handler, which will be the element in this case. The styles object is used to apply styles when the component is loaded, but after that, you want to edit the instance of the element itself.

In your handlePress function, if you console.log(e.target) , you should see the element printed to the console after the press event is triggered. You will be able to see all the attributes associated with it and one of those attributes is style. That is the style attribute that you want to change. Like this:

  let obj = e.target;
  obj.style.borderColor = '#FF0000';

A good way to see what's happening with event handlers is to just console.log the object that you are getting from the event. You will understand if you are getting the correct or incorrect object and start to see all of the things you can do with it. Events are a big world with lots of options available. When in doubt, console.log!