Error: Tried to modify a property that is read-only while using the useRef() hook in React Native with Typescript

https://i.sstatic.net/jhhAN.pngI'm facing an issue while attempting to utilize a useRef hook for a scrollview and pan gesture handler to share a common ref. Upon initializing the useRef() hook and passing it to both components, I encounter an error that states:

TypeError: Attempted to assign to readonly property.

I've experimented with typecasting and adding types to the useRef call without success in resolving the error. Can someone provide assistance?

Here is my component code:

[component code here]

This represents my Screen setup:

[screen code here]
javascripttypescriptreact-nativereact-hooksuse-ref

Answer №1

It is recommended to utilize createRef() over useRef() as stated in the guidance available in the official documentation.

const imagePinch = React.createRef();

return (
  <RotationGestureHandler
    simultaneousHandlers={imagePinch}
    ....

A comprehensive example can be found here in TypeScript.

Additionally, it is important to use the Animated version of components whenever possible (<Animated.View> instead of <View>, <Animated.Image> instead of <Image> etc)

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

What is the process for configuring my form to automatically send to my email upon clicking the send button?

I found this code snippet on a website and I'm trying to figure out how to make the 'Send!' button redirect users to my email address with their message, name, and email included. Can anyone help me solve this issue? I attempted to add my e ...

javascripthtmlcss

What is the best way to structure this React state container for modularity?

At my workplace, we have developed a state container hook for our React application and related packages. Before discussing what I'd like to achieve with this hook, let me provide some background information. Here is the functional code that's co ...

javascriptreactjstypescriptreact-hooks

Error message: SDL2 (emscripten) is encountering an unidentified data structure called "SDL_RendererFlip"

I have attempted to compile an SDL2 tutorial using emscripten found at this link: Text input tutorial However, I encountered the following error: error: unknown type name 'SDL_RendererFlip'; did you mean 'SDL_RendererFlags'? error: us ...

javascriptc++sdl-2emscripten

Show specific content based on which button is selected in HTML

I am working on a project where I have three buttons in HTML - orders, products, and supplier. The goal is to display different content based on which button the user clicks: orders, products, or supplier information. function showData(parameter){ i ...

javascripthtmlbutton

Retrieving text content from multiple classes with a single click event

There are numerous elements each having class names p1, p2, p3,...p14. Consequently, when attempting to extract text from the clicked class, text from all classes is retrieved! For instance, if the expected text is 80, it ends up being 808080080808080808 ...

javascriptjquery

Using both Typescript and Javascript, half of the Angular2 application is built

My current project is a large JavaScript application with the majority of code written in vanilla JavaScript for a specific platform at my workplace. I am looking to convert this into a web application that can be accessed through a browser. I believe thi ...

javascriptangulartypescript

Using JavaScript to load content with AJAX on skip links

Is there a way to prevent the error "loadWithAjax is not defined" from occurring while using the script below? addEventListener('click', function (ev) { if (ev.target.classList.contains('bpb')) { ev.preventDefault(); ...

javascriptajax

Ways to ensure your Javascript code only runs based on the specific browser

I need a Javascript code to run depending on the browser version. Specifically, if the browser is not IE or is IE 9+, one piece of Javascript should be executed. If the browser is IE8 or lower, another piece of Javascript should be executed. My attempt to ...

javascripthtmlinternet-explorer

Measuring Load Time Percentage in AngularJS Using $http Requests

I am currently utilizing Angular with my Rails application. I have a sample app and I am interested in displaying the response time required to load a response in Angular. For example, When loading a response of an array containing 100,000 elements, I w ...

javascriptruby-on-railsangularjsruby

Tips for passing TouchableOpacity props to parent component in React Native

I created a child component with a TouchableOpacity element, and I am trying to pass props like disabled to the parent component. Child component code: import React from 'react'; import {TouchableOpacity, TouchableOpacityProps} from 'react- ...

typescriptreact-native

What is the solution to fixing the error message "SyntaxError: missing ) after argument list" in JavaScript?

I wrote some code in HTML/JavaScript/PHP, and in the 3rd echo statement, I added a button that calls the deleteAttribute() function when clicked. However, I encountered an error at the 3rd echo statement with (type = "button"): "Uncaug ...

javascriptphphtml

The server at localhost responds with a CANNOT GET/ error message

This is the code snippet I've been working on: const express = require('express'); const app = express(); const bodyparser = require('body-parser'); app.use(bodyparser.urlencoded({extended: false})); app.use(bodyparser.json()); c ...

javascriptnode.jsserverlocalhost

What is the process for integrating unit tests from external sources into an Angular project following an upgrade to version 15

As of Angular v15, the require.context function has been removed from the test.ts configuration file. I used to rely on require.context to expose tests outside of the Angular project to Karma. Now that it's no longer available: const contextGlobal = ...

angulartypescriptjasminekarma-jasminekarma-runner

I am currently working on an Angular 8 project and experiencing difficulties with displaying a specific value from a JSON object in my template using an ngFor loop

Apologies if I am not familiar with all the terms, as I am mostly self-taught. I started with Udemy and then turned to Stack Overflow to tackle the more challenging aspects. This platform has been incredibly valuable and I am truly grateful for it. Now, l ...

htmltypescriptangular8

When the mouse hovers over DIV2, the background image of DIV1 will be replaced

I have a full-screen background div with the ID #background-change. Within that full-screen background, I have 3 Divs named .fullscreen-column-1, .fullscreen-column-2, etc. My goal is to change the background image of #background-change when the mouseove ...

javascriptcssbackground-image

JavaScript's native innerHTML function is unable to access the content generated by Vue

I have been struggling with extracting the content from a specific div element in my HTML code. <div id="output" ref="output_data"> <h1>{{ information }}</h1> </div> I attempted to retrieve the contents using ...

javascriptvue.jsvuejs2

My experience with jquery addClass and removeClass functions has not been as smooth as I had hoped

I have a series of tables each separated by div tags. Whenever a user clicks on a letter, I want to display only the relevant div tag contents. This can be achieved using the following jQuery code: $(".expand_button").on("click", function() { $(th ...

javascriptjqueryhtmlcss

I'm stumped trying to understand why I keep getting this syntax error. Any thoughts on how to fix it?

Our team is currently working on creating a dynamic SELECT box with autocomplete functionality, inspired by the Standard Select found at this link: We encountered an issue where the SELECT box was not populating as expected. After further investigation, ...

javascriptjqueryajax

Retrieve the text content of a datalist option by accessing the label with jQuery

Utilizing data from a Json, I am populating a data-list in html. The options are added to the data-list with both value and label text. Upon clicking an option, I aim to insert both the value and text into a form text field. While accessing the option&apo ...

javascriptjqueryhtmljsonhtml-datalist

Having trouble locating the name 'angular' in TypeScript error message

I have completed all the necessary settings, such as adding the typescript compiler in webstorm and installing tsd with npm. However, I am still encountering an error stating 'Cannot find name Angular'. tsd.json { "version": "v4", "repo": ...

angularjstypescript