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?

javascriptiosreact-native

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The error message "[Insecure URL]" was triggered at line 85 of angular.min.js in the AngularJS framework

Looking for some assistance with Angular as I have limited knowledge. It was working fine on localhost, but after upgrading from PHP5 to PHP7, I encountered this error: angular.min.js:85 Error: [$sce:insecurl] http://errors.angularjs.org/1.2.13/$sce/inse ...

javascriptphpangularjs

I wish to substitute a form field with a different one once the value of another field matches a specific condition

The issue I'm facing is that the field disappears once "US" is chosen and does not revert back to the options when another choice is made. teacher_signup.html {% block content %} <h2>Sign Up As Teacher</h2> <form method="post> ...

javascriptjqueryhtmldjangoforms

Theme not being rendered properly following the generation of a dynamic component in Angular

I am currently working on an Angular 9 application and I have successfully implemented a print functionality by creating components dynamically. However, I have encountered an issue where the CSS properties defined in the print-report.component.scss file a ...

javascriptangulartypescript

Which one is better: JSON in PHP or JSON in Javascript?

In my current project, I am working on a website that utilizes a PHP function to retrieve JSON data and present it on the webpage. However, I have noticed that when the page loads, it freezes until the response is successfully fetched, creating a visual di ...

phpjavascriptjson

Is there a way to incorporate a computed value into a table prop while working with Element UI?

In my frontend development, I am utilizing vuejs along with element ui. I am faced with the task of rendering a table that includes dates in unix format. To make these dates more user-friendly, I have incorporated moment.js to convert them into a readable ...

javascriptvue.jselement-ui

The Gulp task abruptly terminates before the Stream has a chance to trigger the "end" event

const gulpJasmine = require('gulp-jasmine'); const gulpDebug = require('gulp-debug'); function runTest(platform, testType) { const timer = startTimer(); console.log('started!'); return gulp.src('./src/**/_test/**/ ...

javascriptnode.jsgulpstreaming

Tips for validating a string in a URL with Selenium IDE

When I click on a tab on my website, it triggers an AJAX service call where the URL contains parameters related to the data being loaded after the tab is clicked. The data is displayed as horizontal tiles one below the other, with 4 tiles being loaded pe ...

javascriptajaxseleniumintegration-testingselenium-ide

What is the best way to incorporate multiple variables in a MySQL query when using Node.js?

I'm facing a challenge where I need to input student data into a table using the parent key as a foreign key. The parent information is included in the same JSON object, with an array of students inside it. My goal is to retrieve the parent Id from th ...

javascriptmysqljsonnode.jsserver-side

Learn the technique in Vue to separate a string using commas and store the values in an array

As a Ruby enthusiast, I am delving into the world of Vue. In my project, users can input multiple styleCodes separated by commas. I aim to store these styleCodes in an array for flexible length calculations. See my code snippet below: <template> &l ...

javascriptvue.js

Issues encountered with invoking function in CodeIgniter controller through Ajax

Running a codeigniter website with an add to cart functionality. When the user clicks the add to cart button, the product is successfully added to the cart after the page reloads. The controller code for this feature is as follows: public function buy($ ...

javascriptphpjqueryajaxcodeigniter

Troubleshooting issue: Click function not responding inside Bootstrap modal

Below is the JavaScript code for my click function $(".addPizza").on("click", function(event) { event.preventDefault(); console.log("hello") let userId = $("#userId").attr("data-id"); let pizzaRecipe = $('#pizza-recipe').val().trim(); ...

javascriptjqueryajaxbootstrap-4

Sending files through ajax with php

Hey there! I've been working on uploading files using Ajax and PHP, following a tutorial. Here's the code I have so far: upload.js: var handleUpload = function (event){ event.preventDefault(); event.stopPropagation(); var fileInput= document.ge ...

javascriptphpajax

Transforming a file with a node module that lacks a .js class into a browseable format

I am currently working on browserifying my module. One of the dependencies I have is on this https://www.npmjs.com/package/chilkat_win32. It is present in my node_modules folder and here is how the structure looks: https://i.stack.imgur.com/uw9Pg.png Upo ...

javascriptnode.jsnpmbrowserifynpm-install

Utilize Javascript to input text into a webform

I am working on creating a bot that simulates user input for the WattsApp web website. When I manually type a message into the website, it enables a button that allows me to send the message. However, when my script runs, it finds the input box, changes t ...

javascripthtml

Disabling the ripple effect on the primary action in React Material lists: A Step-by-Step

I was attempting to include two action buttons at the opposite ends of a list component. https://i.stack.imgur.com/juv8F.gif When clicking on the secondary action (delete icon on the right), the ripple effect is confined to just the icon. On the othe ...

javascriptcssreactjsmaterial-uimakestyles

Is there a way to insert a dot after every two digits in a text field using Javascript upon keypress?

When inputting a 4-digit number (e.g. 1234) in my text field with value format 00.00, I want it to automatically adjust to the 12.34 format. How can I achieve this behavior using JavaScript on keyup event? ...

javascriptjqueryhtmlcss

WebStorm displays all imported items as unused in a TypeScript backend project

https://i.stack.imgur.com/J0yZw.png It appears that the image does not display correctly for files with a .ts extension. Additionally, in .tsx files, it still does not work. In other projects using WebStorm, everything works fine, but those projects are o ...

javascripttypescriptexpressnestjswebstorm

Having trouble locating the bootstrap import statement

Currently, I am working on a project in Angular where I have defined two styles in the angular.json file - styles.css and node_modules/bootstrap/dist/css/bootstrap.min.css. After running ng serve, it shows that it compiled successfully. However, upon ins ...

javascriptangulartypescripttwitter-bootstrap-3

When trying to pass context to the interactive node shell, an error message may appear stating "TypeError: sandbox argument must be converted to a context"

I am trying to initiate an interactive node shell with pre-initialized objects. But when I use the code below, it gives me an error: var repl = require('repl') var x = 11, y = 21 var con = {} con.x = x con.y = y repl.start('> &apo ...

javascriptnode.js

Utilizing deferred to ensure that one function completes before triggering a refresh

In my JavaScript code, I have an ajax call that receives a GUID from the server-side code in the response. After getting the GUID successfully, it is used to make a call to an iframe. The ultimate goal is to refresh the page once the iframe has completed i ...

javascriptjqueryajaxiframejquery-deferred