The React Native WebView is having trouble opening links on Android devices

There seems to be an issue with the React Native WebView component on Android where links are not opening, while on iOS it works perfectly without any hitches. When trying to open links on Android, nothing happens upon clicking and no errors are shown. However, using the React Native Hyperlink component works fine. Can anyone suggest a solution to this problem?

const IS_IOS = Platform.OS === 'ios';

// Script for handling link clicks and postMessage functionality
...

export class AutoHeightWebView extends React.Component<Props, State> {
  // Methods and functions for handling WebView component
  ...
}
androidtypescriptreact-nativereact-native-webview

Answer №1

After experiencing an issue where links were not opening on Android while using the postMessage method with an argument, I discovered a solution. By removing the * from the second argument, the links now function properly on Android:

    var links = document.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++) {
        links[i].onclick = function (e) {
            e.preventDefault();
            window.ReactNativeWebView.postMessage(e.currentTarget.getAttribute("href"));
        }
    }

    var links = document.getElementsByTagName('img');
    for (var i = 0; i < links.length; i++) {
        links[i].onclick = function (e) {
            e.preventDefault();
            window.ReactNativeWebView.postMessage(e.currentTarget.getAttribute("src"), '');
        }
    }
}

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

Issue with FormControlLabel not properly implementing disableCloseOnSelect in Material UI v5 Autocomplete

I'm currently working on developing a wrapper for the MUI Autocomplete component. If you want to see my progress, feel free to check out my codesandbox link: here To keep things simple for demonstration purposes, I've significantly simplified t ...

reactjstypescriptmaterial-ui

Events bound to JSX elements created in an array map are not being triggered by React

My current task involves working on a compact react + typescript (1.6) application designed for editing slideshows. The functionality of the app is straightforward. A sidebar on the left displays all existing slides, and upon clicking, a canvas appears on ...

javascriptreactjstypescript

How can we update the information in the initial observable using data from a separate observable, taking into consideration specific conditions in Angular with RxJS?

Encountered a scenario where I need to fetch data from an API (e.g. cars via getCars()) that returns Observables and then get additional data by car model (e.g. features via getFeatures(model)) in order to replace the features data for each car. In relati ...

angulartypescriptrxjs

Retrieve information on the user who is currently signed in

I am currently working on obtaining admin rights for a user, which can be either true or false. It seems that I am not able to retrieve the details of the current logged-in user. The code snippet provided below loops through all users in the firebase tab ...

javaandroidfirebasefirebase-realtime-database

Unable to retrieve location information from Google Maps

I attempted to retrieve location details such as locality, country, and postal code from Google Maps using latitude and longitude coordinates. Unfortunately, the code I used resulted in null data: Edit: public void onLocationChanged(Location location) { ...

androidgoogle-mapsgeolocation

Why don't inline style changes implemented by JavaScript function properly on mobile browsers like Chrome, Dolphin, and Android?

View the jsFiddle here Issue on PC/Windows browser: When performing action, h1 header "gif" disappears and video starts playing. Problem on mobile devices: The gif does not disappear as expected but the video still plays indicating that JavaScript is fun ...

javascriptandroidcssmobile

Fulfill the promise once the callback has been triggered

In my code, I am working on preventing the method _saveAddress from being executed multiple times. To achieve this, I have created a promise for the method. const [pressEventDisabled, setPressEventDisabled] = useState(false); <TouchableOpacity style={s ...

javascriptreactjstypescriptreact-nativeasync-await

The function setImageMatrix() failed to function properly

Having trouble with the code I wrote in MainActivity.java - it's not working as expected. protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); this.activeBar = ( ...

android

What is the best method to display a tooltip for a disabled radio button within a set of radio buttons?

Is there a way to disable a specific radio button based on a condition and display a tooltip only for that disabled button? https://i.stack.imgur.com/niZK1.png import {Tooltip} from '@mui/material'; <Tooltip titl ...

javascriptreactjstypescriptmaterial-ui

There are no matching overloads in React for this call

Below is an error message in the code. It seems to be related to the usage of <IHistorical[]> in useQuery, but unfortunately, I haven't found a solution for it yet. Overload 1 of 2, '(props: Props | Readonly<Props>): ReactApexChart& ...

reactjstypescript

ERROR: The value property is undefined and cannot be read in a ReactJS component

Can someone help me with the error I'm encountering in the handleChange function? I'm not sure what the issue could be. const [testState, setTestState] = useState({ activeStep:0, firstName: '', lastName: '&apos ...

javascriptreactjsreact-nativematerial-ui

Custom "set attribute" feature in TypeScript

One issue I faced was resolved by creating the function shown below : function setProperty<T extends Record<string, string>>(obj: T, key: keyof T) { obj[key] = "hello"; } However, when I tried to compile the code, I encountered an ...

typescriptgenericstypescript-generics

"Any ideas on resolving the unexpected JSON exception org.json. Ran into an index out of range issue. Suggestions

Can someone assist me with resolving this error? I have 43 items in my ListView, but why am I encountering index 4338? I tried the solution provided here: JSONArray Exception : Index 50 out of range [0..50). Is there any limit on JsonArray. Despite making ...

androidjsonlistview

Triggering createEffect in SolidJS with an external dependency: A guide

Is there a way to use an external dependency to trigger the createEffect function in Solid, similar to React's useEffect dependency array? I am trying to execute setShowMenu when there is a change in location.pathname. const location = useLocation() ...

javascriptreactjstypescriptsolid-js

Tips for utilizing an object key containing a dash ("-") within it

Here is an example of the object structure: { approved_for_syndication: 1 caption: "" copyright: "" media-metadata: (3) [{…}, {…}, {…}] subtype: "photo" } How can I properly a ...

javascriptreactjstypescript

What is the process of customizing a Button component from Ant Design using styled components and TypeScript?

I'm trying to customize a Button from Ant Design using TypeScript and styled-components to give it a personalized style. However, I haven't been successful in achieving the desired result. I have experimented with various tests but none of them ...

reactjstypescriptstyled-componentsantd

Issue with iOS 10: Changes to class not reflected in CSS/styles

Currently, I am utilizing Ionic with Angular to develop an application for Android and iOS. Surprisingly, everything functions smoothly on Android, but there seems to be an issue with iOS. I am employing a class change on an element using ng-class. I can ...

ioscssangulartypescriptionic-framework

Ways to create a versatile function for generating TypedArrays instances

I'm working on a function that looks like this: export function createTypedArray<T extends TypedArray>( arg : { source : T, arraySize : number } ) : T { if( arg.source instanceof Int32Array ) { return new Int32Array( arg.arraySize ); } ...

typescriptgenerics

Tips for utilizing ion-img within an Ionic 3 application?

I am currently developing an app using Ionic 3 that includes a large number of images spread across different pages. Initially, I used the default HTML image tag to display these images. However, this approach caused lag in the app's performance and a ...

androidangulartypescriptionic-frameworkionic3

Create a TypeScript function that can be called and has an extended prototype definition

I am seeking to create a callable function foo() (without using the new operator) that will also include a property foo.bar(). The JavaScript implementation would be as follows: function foo() { // ... } foo.prototype.bar = function bar() { // .. ...

javascripttypescriptinterface