[zoontek]

Summary

Shape handles presses by mixing in Touchable.Mixin, a private and deprecated API of react-native. react-native cannot delete Touchable while this library uses it.

From packages/react-native/index.js at v0.87.0:

// `Touchable` has been removed from the public API types, but remains
// re-exported at runtime here because of a hanging `react-native-svg` call
// site (fbsource).
// TODO(huntie): Remove this re-export once `react-native-svg` is updated.

How it is implemented

src/lib/SvgTouchableMixin.ts now holds its own copy of the press state machine, ported from Touchable.Mixin. Same states, same signals, same transition table, same method names, so the callers are unchanged. It only depends on the gesture responder system, which is public API.

Two differences with the original implementation:

• No Android tap sound on press. SoundManager has no public export.
• Measurement calls measure() on the granted responder node, falling back to the instance root ref, instead of UIManager.measure.

The mixin is also fully typed now, so the // @ts-expect-error: Mixin is not typed is gone.

Areas impacted

Press props on every shape element: onPress, onPressIn, onPressOut, onLongPress, delayPressIn, delayPressOut, delayLongPress, pressRetentionOffset, hitSlop, disabled, and the user supplied onResponder* overrides.

Plus the config needed to type check the new test file:

• tsconfig.json includes __tests__ and e2e, and lists types explicitly
• new tsconfig.build.json, narrowed back to src, used by the bob typescript target so test globals never reach the published types
• devDependency bumps: @types/jest, new @types/react-test-renderer, react-native-builder-bob

Test Plan

What's required for testing (prerequisites)?

yarn install at the repo root, then yarn install in the example app.

What are the steps to reproduce (after prerequisites)?

__tests__/touchable.test.tsx is new. Its 19 cases cover handler attachment, press order, delayPressIn / delayPressOut / delayLongPress, the 500ms long press threshold, long press cancelling onPress, the 10px movement cancel, leaving and re-entering the press rect, the default retention offset, hitSlop, disabled, user supplied responder handlers, termination, and timer cleanup on unmount.

yarn jest __tests__/touchable.test.tsx
yarn lint
yarn tsc

Then check the TouchEvents example screen, which covers onPress on Circle, onLongPress on Rect, onPressIn / onPressOut with delayPressIn={0}, and onPress on G and Text:

cd apps/fabric-example && yarn ios # or yarn android

Compatibility

OS	Implemented
iOS	✅
MacOS	✅
Android	✅

The change is JavaScript only and shared by every platform. No native code is touched.

Checklist

• I have tested this on a device and a simulator
• I added documentation in README.md
• I updated the typed files (typescript)
• I added a test for the API in the __tests__ folder

Demos

demo.ios.mov

demo.android.mov

[jakex7]

Looks good to me, thank you! I'll re-introduce Android tap sound on press in a followup PR