Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#1,509 1 comentario 0 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 1 día

@cdn34dd ya está trabajando en esto.

Desde el 22/10/2026.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
25/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
javascript, react-native, typescript
Área
backend, mobile

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
146
Forks
67
Merge medio
1 d 21 h
PR fusionados (30 d)
19

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de DataDog/dd-sdk-reactnative

Todos los issues de DataDog/dd-sdk-reactnative

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.