openspacelabs / react-native-zoomable-view

A view component for react-native with pinch to zoom, tap to move and double tap to zoom capability.
MIT License
189 stars 57 forks source link

ERROR Warning: This synthetic event is reused for performance reasons. When get event from onLongPress props #105

Open maxcheung1996 opened 1 week ago

maxcheung1996 commented 1 week ago
<ReactNativeZoomableView
              maxZoom={30}
              onSingleTap={_ => console.log(_)}
              onLongPress={_ => console.log(_)}
              // Give these to the zoomable view so it can apply the boundaries around the actual content.
              // Need to make sure the content is actually centered and the width and height are
              // dimensions when it's rendered naturally. Not the intrinsic size.
              // For example, an image with an intrinsic size of 400x200 will be rendered as 300x150 in this case.
              // Therefore, we'll feed the zoomable view the 300x150 size.
              contentWidth={360}
              contentHeight={569.62}>
              <Image
                style={{
                  width: '100%',
                  height: '100%',
                  resizeMode: 'contain',
                }}
                source={require('../../../../../../Images/defect/floor_plan_demo.png')}
              />
              <Svg height="100%" width="100%" style={StyleSheet.absoluteFill}>
                {pins.map((pin, index) => (
                  <Circle
                    key={index}
                    cx={pin.x}
                    cy={pin.y}
                    stroke="#fff"
                    strokeWidth="2.5"
                    r="9"
                    fill={pin.color}
                    onPress={() => {
                      handlePinPress(pin);
                    }}
                  />
                ))}
              </Svg>
            </ReactNativeZoomableView>

I can catch the event if I using single tap on the image, but if I try to long press the image to get the event if will return error message:

ERROR Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property bubbles on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See https://reactjs.org/link/event-pooling for more information. ERROR Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property cancelable on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See https://reactjs.org/link/event-pooling for more information.

My current app version: "react": "^18.1.0", "react-native": "^0.70.6", "@openspacelabs/react-native-zoomable-view": "^2.1.6",