onPress not working on web

[mehimanshupatil]

onpress is not working for version of react-native-web 0.13.0 and above.

reproducible example
codesandbox
change react-native-web Version below 0.13.0 and it works

[codeion]

Any suggestions on how to fix/patch Warning: Unknown event handler property onStartShouldSetResponder.

[rsml]

@mehimanshupatil I'm using react-native-web 0.13.18 and I was able to get all of these props to work:

onClick
onFocus
onMouseDown
onMouseEnter
onMouseLeave
onMouseMove
onMouseOut
onMouseOver
onMouseUp

Specifically I used them on a <Rect> nested in a <G>

[mehimanshupatil]

Hello, @rsml
My query is regarding onPress handler. The event you mentioned also works for me.

[SmartArray]

I second this.

We might approach it with the following mapping:

onPress: onClick
onPressIn: onMouseDown
onPressOut: onMouseUp
onStartShouldSetResponder: onFocus
onResponderTerminationRequest: null (does not exist)
onResponderGrant: null (does not exist)
onResponderMove: onMouseMove
onResponderRelease: onMouseUp
onResponderTerminate: onBlur

What are your thoughts?

I was wondering about these, because I thought react-native-web implemented those mappings already?

necolas/react-native-web#1568

How can we marry react-native-svg off to their mappings? I would make no sense to reimplement those...?

[ManAnRuck]

i have the same issue and a easy workaround until it is fixed:

npm i --save-dev babel-plugin-rename-jsx-attribute

.babelrc

{
  "presets": ["react"],
  "plugins": [
    [
      "rename-jsx-attribute",
      {
        "attributes": {
          "onPress": "onClick"
        }
      }
    ]
  ]
}

[MorningK]

I solved this problem by explicitly declaring onPress and onClick methods at the same time
<Rect onPress={() => onSelectRobot(id)} onClick={() => onSelectRobot(id)} key={robot-${id}} x={x} y={y} origin={${x + width / 2}, ${y + height / 2}} transform={transform} width={width} height={height} fill={color} />

[ThePVY]

Hi, sorry for such a simple question, but how are you make onClick prop (and others web props) work on Rect, because onClick does not even exist in available props for Rect for me (there are only native events props, such as onPress, onPressIn, etc.)?

[Joeao]

Hi, sorry for such a simple question, but how are you make onClick prop (and others web props) work on Rect, because onClick does not even exist in available props for Rect for me (there are only native events props, such as onPress, onPressIn, etc.)?

onClick will work if you do as @MorningK suggested, but you'll get a type error.

[arthurhamon]

Hi,

I encounter the same error using an icon wrapped inside TouchableWithoutFeedback I managed to remove the warning replacing it with the new react-native Pressable wrapper.

Hope it will help some of you

[kxtsn]

i have the same issue and a easy workaround until it is fixed:

npm i --save-dev babel-plugin-rename-jsx-attribute

.babelrc

{
  "presets": ["react"],
  "plugins": [
    [
      "rename-jsx-attribute",
      {
        "attributes": {
          "onPress": "onClick"
        }
      }
    ]
  ]
}

Hello, this works perfectly, however I only require the onClick on SVG related libraries. Do you know if there is anyway to specify?

[iam-yan]

Hi, sorry for such a simple question, but how are you make onClick prop (and others web props) work on Rect, because onClick does not even exist in available props for Rect for me (there are only native events props, such as onPress, onPressIn, etc.)?

One workaround is to declare a type merging.
For example:

import "react-native-svg";
import { TouchableProps } from "react-native-svg";

declare module "react-native-svg" {
  interface GProps {
    onClick?: TouchableProps["onPress"];
  }
}

cc: @ThePVY

[manuelmhtr]

Is this related? akveo/react-native-ui-kitten#1801

[oliviercperrier]

Still an issue: Warning: Unknown event handler property onStartShouldSetResponder. It will be ignored.

Anybody found a workaround?

Any plan on getting this fixed?

[NateDiamond]

I'm still unable to use onPress for a react-native-svg component on web. Here's my dependencies:

"react-native-svg": "^15.3.0",
"react-native-web": "~0.19.6", // Installs 0.19.10

and here's my code:

import Svg, { Circle, G } from "react-native-svg";

function X({x, y, r, onPress}) {
  return (
      <G>
        <Circle cx={x} cy={y} r={r} fill="black" onPress={() => onPress && onPress()}/>
      </G>
    );
}

function Y() {
  return (
    <Svg viewBox={`0 0 100 100`}>
        <X x={5} y={5} r={5} onPress={()=>console.log('hi')}/>
    </Svg>
  );
}

I'm seeing the following warning: "Unknown event handler property onStartShouldSetResponder. It will be ignored."

[ed-bennett-dodimead]

Has there been any update on this? I'm seeing the same issue on expo 51.

[bohdanprog]

Hello @ed-bennett-dodimead,
Can you provide an example of how we can reproduce that?
Thank you

[ed-bennett-dodimead]

So I just set up a new tamagui repo following the quick start: npm create tamagui@latest --template expo-router, then added an <Eye onPress={() => console.log("pressed")} /> component (I tried with a few different icons and saw the same thing on all of them) to the index page from the @tamagui/lucide-icons library and I'm seeing the same errors in the console when I start the web version. This is how we're using it in our project, but we are seeing the same errors with *.svg files we're importing as components via react-native-svg-transformer too.

Edit: same errors can be seen in a project with fewer dependencies: run npx create-expo-app@latest, followed by npx install react-native-svg, and add to index.tsx this snippet from the codesandbox in the original post: <Svg xmlns="http://www.w3.org/2000/svg" width="275" height="200" viewBox="0 0 275 200" > <G fill="none" strokeWidth="10"> <Rect width="300" height="100" style={{ fill: "rgb(0,0,255)", strokeWidth: 3, stroke: "rgb(0,0,0)" }} onPress={() => { alert("hooray it works"); }} /> </G> </Svg>

[horakjakub]

Plus one from me, I also used expo with router

[bohdanprog]

Hello @ed-bennett-dodimead @horakjakub,
IDK why it doesn't work but I created a simple example.
Everything worked well.

[ed-bennett-dodimead]

Hello @ed-bennett-dodimead @horakjakub, IDK why it doesn't work but I created a simple example. Everything worked well.

That's interesting, I cloned yours and I see all the same console errors, except the click handler does seem to fire properly. I'm not sure how to go about testing that further.

[bohdanprog]

@ed-bennett-dodimead
here is the recording from my screen :)
It had some errors but, on click worked well.
Here is PR with implementing handling web events.
https://github.com/user-attachments/assets/e863861a-0875-44e9-a69c-f3b5cbd9df42