Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Babel plugin: an undefined `onLongPress` becomes a function, so `Pressable` drops `onPress` after a long press

Đang mở
  • Có gì không ổn?
#1,509 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 2 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
25/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
javascript, react-native, typescript
Lĩnh vực
backend, mobile

Hướng nghiên cứu

The issue identifies generated Babel output and the handler transformation in the React Native Babel plugin, but gives no source file or test path. Start by locating the transformation that wraps handlers passed by reference and the tests covering its generated output. Done means an undefined handler remains undefined and the regression is covered; the reporter says they already have a fix ready and plan to open a PR.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

bug
Describe the bug

When a tracked handler is passed by reference and its value is undefined at runtime (for example an optional prop), the babel plugin still replaces it with a wrapper function. The component therefore always receives a defined handler.

For Pressable this changes behavior. React Native's Pressability skips onPress on release when onLongPress != null and the press was held longer than delayLongPress (500ms by default). Because the plugin wraps onLongPress even when it is undefined, every press held for more than 500ms no longer calls onPress, even though the app never set a long-press handler.

This is related to #1226. The fix for it (#1243, released in 3.3.0) added optional chaining (onLongPress?.(...args)), which stops the crash, but the prop itself is still always a function.

Generated output (3.5.0, unchanged in 3.11.0 and on develop):

onLongPress: (...args) => {
  if (DdBabelInteractionTracking.getInstance()) return DdBabelInteractionTracking.getInstance().wrapRumAction(onLongPress, "TAP", { /* ... */ })(...args);
  else return onLongPress?.(...args);
}
Reproduction steps
import { Pressable, Text } from 'react-native';

const Button = ({ onPress, onLongPress }: { onPress: () => void; onLongPress?: () => void }) => (
  <Pressable onPress={onPress} onLongPress={onLongPress}>
    <Text>Press me</Text>
  </Pressable>
);

// Usage: no onLongPress is passed
<Button onPress={() => console.log('pressed')} />
  1. Enable @datadog/mobile-react-native-babel-plugin in babel.config.js.
  2. Tap the button: pressed is logged.
  3. Press and hold the button for more than 500ms, then release: nothing is logged.
  4. Remove the babel plugin (or pass {...(onLongPress ? { onLongPress } : {})} instead of onLongPress={onLongPress}): the long press logs pressed again.
SDK logs

N/A (no error is thrown; onPress is silently not called).

Expected behavior

A handler that is undefined at runtime stays undefined, so the component behaves the same with and without the plugin. For example:

onLongPress: onLongPress != null ? (...args) => { /* RUM wrapper */ } : undefined
Affected SDK versions

@datadog/mobile-react-native-babel-plugin 3.5.0 (also present in 3.11.0 and develop), with @datadog/mobile-react-native 3.9.0

Latest working SDK version

N/A (since the babel plugin started wrapping handlers by reference)

Did you confirm if the latest SDK version fixes the bug?

Yes

Integration Methods

NPM

React Native Version

0.86.3 (New Architecture, Hermes)

Package.json Contents

No response

iOS Setup

No response

Android Setup

No response

Device Information

iOS Simulator, iPhone 17 Pro Max

Other relevant information

Any tracked component that changes behavior based on whether a handler is set is affected the same way (for Pressable, onLongPress is the visible case). I have a fix ready and will open a PR referencing this issue.

Ngôn ngữ chính
TypeScript
Star
146
Fork
67
Merge trung bình
2 ngày 14 giờ
Pull request đã merge (30 ngày)
22

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của DataDog/dd-sdk-reactnative

Tất cả issue của DataDog/dd-sdk-reactnative

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.