How to modify the overlay color in the TouchableHighlight component using an arrow function in React Native

Question

How to modify the overlay color in the TouchableHighlight component using an arrow function in React Native

With touchableHighlight, I found that I could easily modify the overlay color using the following code:

 <TouchableHighlight
                     onPress={this.toggle.bind(this)}
                     underlayColor="#f1f1f1">

However, when attempting to use an arrow function like this:

    <TouchableHighlight
                     underlayColor="#f1f1f1"
                     onPress={() => {
                     this.toggle(!this.state.modalVisible)}}>

The underlayColor does not update. Any suggestions on how I can utilize the arrow function and change the underlayColor?

javascript ios react-native

Answer 1

Answer №1

1. In the constructor or class, you have the option to use

this.state = {
underlayColor:"#f1f1f1"
}

In any other function within the component:

this.setState({underlayColor:"#f1f1f1"})

2.

<TouchableHighlight
 onPress={this.toggle.bind(this)}
 underlayColor={this.state.underlayColor}>

toggle =()=>{
 this.setState({
 underlayColor:"new color"
})
}

Answer 2

1. In the constructor or class, you have the option to use

this.state = {
underlayColor:"#f1f1f1"
}

In any other function within the component:

this.setState({underlayColor:"#f1f1f1"})

2.

<TouchableHighlight
 onPress={this.toggle.bind(this)}
 underlayColor={this.state.underlayColor}>

toggle =()=>{
 this.setState({
 underlayColor:"new color"
})
}

How to modify the overlay color in the TouchableHighlight component using an arrow function in React Native

Answer №1

Similar questions

Programmatically toggle the visibility of an ion fab button

Implementing a method to allocate rewards to individual players within a game Bank using arrays in Node.js and JavaScript

Unable to modify translation values in an existing ngx-translate object

Differentiating between ng-show and ng-if in AngularJS

Encountering a 404 error while using Angular HTML5Mode setting

The JQuery function fails to execute following a successful Ajax request

Creating a new row in a Tabulator component in React and retrieving the data

A different approach for managing lengthy API processes in Node without using the traditional "Notification URL"

challenges surrounding the use of getElementByTagName

Pass the form data to the next page with javascript in HTML

What's the best way to place the text or operator from a button into an input field?

Creating an expand and collapse animation in a `flex` accordion can be achieved even when the container size is fixed using

Navigating through nested objects in JSON when working with D3: a guide

Deactivating the Grid and its offspring in React.js MUI

Displaying the unique values based on the key attribute

Utilize a Chrome Content Script to intercept jQuery delegated event handlers and take control

Unable to successfully call a directive function from a nested child directive

Guide to ensuring every request in an Express.js application contains a cookie

I am looking to implement an animation that automatically scrolls to the bottom of a scrollable DIV when the page is loaded

Successfully received response from Ajax post - unable to display on screen