@dynatrace/react-native-plugin 2.321.1 → 2.323.1

package/README.md

@@ -32,8 +32,8 @@ If you want to start using this plugin and are not a Dynatrace customer yet, hea
 ## Agent Versions
 This agent versions are configured in this plugin:
 
-* Android Agent: 8.321.1.1009
-* iOS Agent: 8.321.1.1007
+* Android Agent: 8.323.1.1002
+* iOS Agent: 8.323.1.1009
 
 ## Quick Setup
 
@@ -83,6 +83,7 @@ This agent versions are configured in this plugin:
 * [Maven Central in top-level gradle file](#maven-central-in-top-level-gradle-file)
 * [Configuration of standalone React Native project](#configuration-of-standalone-react-native-project)
 * [Instrumentation Overhead](#instrumentation-overhead)
+* [Typescript Setup for dtActionName and dtActionIgnore](#typescript-setup-for-dtactionignore-and-dtactionname)
 
 ## Troubleshooting
 * [Documentation](#dynatrace-documentation)
@@ -681,11 +682,7 @@ export default TouchableHighlightScreen;
 
 This example shows two *TouchableHighlight*, which will fire the *onPress()* function when pressed. The property `dtActionIgnore="true"` will prevent the monitoring of one of them. This means that the onPress will still be executed but we will no longer create a user action which is wrapping the button click. 
 
-If you want to set this property and use typescript you can use the following workaround: 
-
-```ts
-<TouchableHighlight {...{ "dtActionIgnore": "true" }}><Text>TouchableHighlight that will be ignored</Text></TouchableHighlight>
-```
+>*Attention:* If you are using Typescript and want to set this property with type-safety, look [here](#typescript-setup-for-dtactionignore-and-dtactionname).
 ## NPX Commands
 
 The following npx commands are available for the plugin:
@@ -1128,20 +1125,18 @@ ios: {
 
 ## Using dtActionName to change the name of the action
 
-We check for a property named `dtActionName` when creating an action. If `dtActionName` exists, this will be used for the action name above every other option listed in the previous section. Examples: 
-
-Typescript:
-```ts
-<TouchableHighlight {...{ "dtActionName": "CustomActionName" }}><Text>Custom Action Name</Text></TouchableHighlight>
-```
+We check for a property named `dtActionName` when creating an action. If `dtActionName` exists, this will be used for the action name above every other option listed in the previous section. Example: 
 
-JavaScript:
 ```js
-<TouchableHighlight dtActionName="CustomActionName"><Text>Custom Action Name</Text></TouchableHighlight>
+<TouchableHighlight dtActionName="CustomActionName">
+  <Text>Custom Action Name</Text>
+</TouchableHighlight>
 ```
 
 *Note:* [actionNamePrivacy](#plugin-startup) has no impact on using dtActionName. dtActionName will always be used.
 
+>*Attention:* If you are using Typescript and want to set this property with type-safety, look [here](#typescript-setup-for-dtactionignore-and-dtactionname).
+
 ## How does Dynatrace automatically report crashes?
  
 In general, Dynatrace always closes the session when a crash occurs. Usually a crash is when the application gets fully terminated. In React Native, we also see fatal errors in the JavaScript part as a full crash even though the native application is still alive. When this happens we will end the session. This is due to visibility reasons and may change in the future. The automated crash reporting will be (automatically) put in place by the transformer at the very beginning of the application. Using a custom error handler afterwards will not interfere with our crash handler.
@@ -1424,6 +1419,24 @@ When using auto-instrumenation through our plugin, here are some examples of the
 | Android              | Default new app         | 0.74.3         | 50.7 MB         | 50.9 MB        | 0.2 MB         |
 | iOS                  | Default new app         | 0.74.3         | 28.1 MB         | 36.5 MB        | 8.4 MB         |
 
+## Typescript Setup for dtActionIgnore and dtActionName
+
+We are using module augmentation to augment the IntrinsicAttributes Interface in the JSX namespace in the React module with dtActionName and dtActionIgnore. The IntrinsicAttributes Interface in the JSX namespace contains properties that you can pass to every JSX element, thus, in short, you can use dtActionName and dtActionIgnore with full type-safety on every JSX element if you follow the setup below.
+
+In general, ambient/global type declarations in packages like @dynatrace/react-native-plugin in your node_modules are visible and thus available to you for type checking in at least these cases:
+
+1. You import any type from a .ts or .d.ts file located in our package anywhere in your project. For instance, if you do `import { Dynatrace } from '@dynatrace/react-native-plugin'` anywhere in your project, Typescript will consider our Types and the module augmentation will work.
+
+2. You update your `tsconfig.json` to include our types, which will also make the module augmentation work:
+```json
+  "compilerOptions": {
+    "types": [
+      "@dynatrace/react-native-plugin"
+    ]
+  }
+```  
+We recommend the second option, since it works independent of whether you import anything from `@dynatrace/react-native-plugin`. We simply show the first option in case you wonder why `dtActionName` and `dtActionIgnore` are available on JSX elements despite not having added any configuration.
+
 ## Troubleshooting and applicable restrictions
 
 >**Attention:** If you think something is not working the way it should, ALWAYS try to reset the cache of metro first before starting a support case. You can do this via the CLI *react-native start --reset-cache*. If it still does not work feel free to open a support case.
@@ -1464,6 +1477,11 @@ If you are struggling with a problem, submit a support ticket to Dynatrace (supp
 <br/><br/>
 ## Changelog
 
+2.323.1
+* Updated Android (8.323.1.1002) & iOS Agent (8.323.1.1009)
+* Fixing Touchable/Text instrumentation for React Native 0.81+
+* Added [module augmentation of React](#typescript-setup-for-dtactionignore-and-dtactionname) to allow using dtActionName and dtActionIgnore type-safely on every JSX Element
+
 2.321.1
 * Updated Android (8.321.1.1009) & iOS Agent (8.321.1.1007)
 * Auto startup fixed for React Native v0.80 and higher

package/android/build.gradle

@@ -72,7 +72,7 @@ repositories {
 }
 
 dependencies {
-	implementation 'com.dynatrace.agent:agent-android:8.321.1.1009'
+	implementation 'com.dynatrace.agent:agent-android:8.323.1.1002'
     implementation "com.facebook.react:react-native:${safeExtGet('reactNative', '+')}"
 }
   

package/files/plugin.gradle

@@ -1,4 +1,4 @@
 // TEMPLATE: plugin-gradle.template
 dependencies {
-	classpath 'com.dynatrace.tools.android:gradle-plugin:8.321.1.1009'
+	classpath 'com.dynatrace.tools.android:gradle-plugin:8.323.1.1002'
 }

package/instrumentation/jsx/CreateElement.js

@@ -16,7 +16,7 @@ const createElement = (type, props, ...children) => {
             return _createElement(ClassComponent_1.DynatraceClassComponent, {}, _createElement(type, props, ...children));
         }
         else {
-            (0, ElementHelper_1.modifyElement)(type, props, ...children);
+            (0, ElementHelper_1.modifyElement)(type, props);
         }
     }
     return _createElement(type, props, ...children);

package/instrumentation/jsx/ElementHelper.js

@@ -2,11 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isDtActionIgnore = exports.modifyElement = exports.instrumentCreateElement = void 0;
 const Types_1 = require("../model/Types");
-const TypesUtil_1 = require("../model/TypesUtil");
 const Dynatrace_1 = require("../../lib/core/Dynatrace");
-const ConsoleLogger_1 = require("../../lib/core/logging/ConsoleLogger");
 const Picker_1 = require("./components/Picker");
-const Touchable_1 = require("./components/Touchable");
 const RefreshControl_1 = require("./components/RefreshControl");
 const Switch_1 = require("./components/Switch");
 const FunctionalComponent_1 = require("./components/FunctionalComponent");
@@ -27,7 +24,7 @@ const instrumentCreateElement = (reactModule) => {
                     return reactCreateElement(ClassComponent_1.DynatraceClassComponent, {}, reactCreateElement(type, props, ...children));
                 }
                 else {
-                    (0, exports.modifyElement)(type, props, ...children);
+                    (0, exports.modifyElement)(type, props);
                 }
             }
             return reactCreateElement(type, props, ...children);
@@ -35,7 +32,7 @@ const instrumentCreateElement = (reactModule) => {
     }
 };
 exports.instrumentCreateElement = instrumentCreateElement;
-const modifyElement = (type, props, ...children) => {
+const modifyElement = (type, props) => {
     if (props != null) {
         if (type._dtInfo.type === Types_1.Types.RefreshControl &&
             props.onRefresh != null) {
@@ -45,17 +42,6 @@ const modifyElement = (type, props, ...children) => {
             props.onValueChange != null) {
             (0, Switch_1.SwitchHelper)(Dynatrace_1.Dynatrace).attachOnValueChange(props);
         }
-        else if (type._dtInfo.type === Types_1.Types.Button ||
-            type._dtInfo.type === Types_1.Types.Text ||
-            type._dtInfo.type === Types_1.Types.Pressable ||
-            (0, TypesUtil_1.isTypeTouchable)(type._dtInfo.type)) {
-            if (props.onPress != null) {
-                props.onPress = (0, Touchable_1.TouchableHelper)(Dynatrace_1.Dynatrace, new ConsoleLogger_1.ConsoleLogger('TouchableHelper')).attachOnPress(false, props, children, type._dtInfo.type);
-            }
-            if (props.onLongPress != null) {
-                props.onLongPress = (0, Touchable_1.TouchableHelper)(Dynatrace_1.Dynatrace, new ConsoleLogger_1.ConsoleLogger('TouchableHelper')).attachOnPress(true, props, children, type._dtInfo.type);
-            }
-        }
         else if (props.onValueChange != null &&
             type._dtInfo.type === Types_1.Types.Picker) {
             (0, Picker_1.PickerHelper)(Dynatrace_1.Dynatrace).attachOnValueChange(props);

package/instrumentation/jsx/IDynatraceProperties.js

@@ -1,9 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isDynatraceIgnored = exports.isDynatraceNaming = void 0;
-const isDynatraceNaming = (properties) => properties.dtActionName !== undefined;
-exports.isDynatraceNaming = isDynatraceNaming;
-const isDynatraceIgnored = (properties) => (properties.dtActionIgnore !== undefined &&
-    properties.dtActionIgnore === true) ||
-    properties.dtActionIgnore === 'true';
-exports.isDynatraceIgnored = isDynatraceIgnored;

package/instrumentation/jsx/JsxDevRuntime.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const ReactDevRuntime = require("react/jsx-dev-runtime");
 const Types_1 = require("../model/Types");
 const FunctionalComponent_1 = require("./components/FunctionalComponent");
 const ClassComponent_1 = require("./components/ClassComponent");
 const ElementHelper_1 = require("./ElementHelper");
-const ReactDevRuntime = require("react/jsx-dev-runtime");
 try {
     const jsxDEV = (...args) => {
         if (args[0] !== undefined &&
@@ -38,12 +38,7 @@ try {
                     return ReactDevRuntime.jsxDEV(ClassComponent_1.DynatraceClassComponent, wrapperProps);
                 }
             }
-            if (Array.isArray(args[1].children)) {
-                (0, ElementHelper_1.modifyElement)(args[0], args[1], ...args[1].children);
-            }
-            else {
-                (0, ElementHelper_1.modifyElement)(args[0], args[1], args[1].children);
-            }
+            (0, ElementHelper_1.modifyElement)(args[0], args[1]);
         }
         return ReactDevRuntime.jsxDEV(...args);
     };

package/instrumentation/jsx/JsxRuntime.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const ReactRuntime = require("react/jsx-runtime");
 const Types_1 = require("../model/Types");
 const FunctionalComponent_1 = require("./components/FunctionalComponent");
 const ClassComponent_1 = require("./components/ClassComponent");
 const ElementHelper_1 = require("./ElementHelper");
-const ReactRuntime = require("react/jsx-runtime");
 const instrumentJsxCall = (jsxFunction) => (...args) => {
     if (args[0] !== undefined &&
         args[0]._dtInfo !== undefined &&
@@ -37,12 +37,7 @@ const instrumentJsxCall = (jsxFunction) => (...args) => {
                 return jsxFunction(ClassComponent_1.DynatraceClassComponent, wrapperProps);
             }
         }
-        if (Array.isArray(args[1].children)) {
-            (0, ElementHelper_1.modifyElement)(args[0], args[1], ...args[1].children);
-        }
-        else {
-            (0, ElementHelper_1.modifyElement)(args[0], args[1], args[1].children);
-        }
+        (0, ElementHelper_1.modifyElement)(args[0], args[1]);
     }
     return jsxFunction(...args);
 };

package/instrumentation/jsx/components/ComponentUtil.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getNameFromComponent = void 0;
+exports.isDynatraceIgnored = exports.isDynatraceNaming = exports.getNameFromComponent = void 0;
 const getNameFromComponent = (props) => {
     if (props !== undefined && props.children !== undefined) {
         let child;
@@ -31,3 +31,14 @@ const getNameFromComponent = (props) => {
     }
 };
 exports.getNameFromComponent = getNameFromComponent;
+const isDynatraceNaming = (properties) => typeof properties === 'object' &&
+    properties !== null &&
+    'dtActionName' in properties &&
+    typeof properties.dtActionName === 'string';
+exports.isDynatraceNaming = isDynatraceNaming;
+const isDynatraceIgnored = (properties) => typeof properties === 'object' &&
+    properties !== null &&
+    'dtActionIgnore' in properties &&
+    (properties.dtActionIgnore === true ||
+        properties.dtActionIgnore === 'true');
+exports.isDynatraceIgnored = isDynatraceIgnored;

package/instrumentation/jsx/components/Picker.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PickerHelper = void 0;
-const IDynatraceProperties_1 = require("../IDynatraceProperties");
+const ComponentUtil_1 = require("./ComponentUtil");
 const PickerHelper = (Dynatrace) => ({
     attachOnValueChange: (pickerProps) => {
-        if ((0, IDynatraceProperties_1.isDynatraceIgnored)(pickerProps)) {
+        if ((0, ComponentUtil_1.isDynatraceIgnored)(pickerProps)) {
             return;
         }
         const origOnValueChange = pickerProps.onValueChange;
@@ -31,7 +31,7 @@ const PickerHelper = (Dynatrace) => ({
 exports.PickerHelper = PickerHelper;
 const isPickerItemProps = (props) => props.label !== undefined;
 const _findActionName = (pickerProps) => {
-    if ((0, IDynatraceProperties_1.isDynatraceNaming)(pickerProps)) {
+    if ((0, ComponentUtil_1.isDynatraceNaming)(pickerProps)) {
         return pickerProps.dtActionName;
     }
     else if (pickerProps.accessibilityLabel != null) {

package/instrumentation/jsx/components/RefreshControl.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RefreshControlHelper = void 0;
-const IDynatraceProperties_1 = require("../IDynatraceProperties");
+const ComponentUtil_1 = require("./ComponentUtil");
 const RefreshControlHelper = (Dynatrace) => ({
     attachOnRefresh: (refreshControlProps) => {
-        if ((0, IDynatraceProperties_1.isDynatraceIgnored)(refreshControlProps)) {
+        if ((0, ComponentUtil_1.isDynatraceIgnored)(refreshControlProps)) {
             return;
         }
         const origOnRefresh = refreshControlProps.onRefresh;
@@ -29,7 +29,7 @@ const RefreshControlHelper = (Dynatrace) => ({
 });
 exports.RefreshControlHelper = RefreshControlHelper;
 const _findActionName = (refreshControlProps) => {
-    if ((0, IDynatraceProperties_1.isDynatraceNaming)(refreshControlProps)) {
+    if ((0, ComponentUtil_1.isDynatraceNaming)(refreshControlProps)) {
         return refreshControlProps.dtActionName;
     }
     else if (refreshControlProps.accessibilityLabel != null) {

package/instrumentation/jsx/components/Switch.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwitchHelper = void 0;
-const IDynatraceProperties_1 = require("../IDynatraceProperties");
+const ComponentUtil_1 = require("./ComponentUtil");
 const ConfigurationHandler_1 = require("../../../lib/core/configuration/ConfigurationHandler");
 const SwitchHelper = (Dynatrace) => ({
     attachOnValueChange: (switchProps) => {
-        if ((0, IDynatraceProperties_1.isDynatraceIgnored)(switchProps)) {
+        if ((0, ComponentUtil_1.isDynatraceIgnored)(switchProps)) {
             return;
         }
         const origOnValueChange = switchProps.onValueChange;
@@ -13,7 +13,7 @@ const SwitchHelper = (Dynatrace) => ({
         if (origOnValueChange != null) {
             switchProps.onValueChange = (value) => {
                 const useGenericName = nameOfAction == null ||
-                    (!(0, IDynatraceProperties_1.isDynatraceNaming)(switchProps) &&
+                    (!(0, ComponentUtil_1.isDynatraceNaming)(switchProps) &&
                         ConfigurationHandler_1.ConfigurationHandler.isActionNamePrivacyEnabled());
                 const finalNameOfAction = useGenericName
                     ? `Touch on Switch to ${value}`
@@ -44,7 +44,7 @@ const SwitchHelper = (Dynatrace) => ({
 });
 exports.SwitchHelper = SwitchHelper;
 const _findActionName = (switchProps) => {
-    if ((0, IDynatraceProperties_1.isDynatraceNaming)(switchProps)) {
+    if ((0, ComponentUtil_1.isDynatraceNaming)(switchProps)) {
         return switchProps.dtActionName;
     }
     else if (switchProps.accessibilityLabel != null) {

package/instrumentation/libs/community/gesture-handler/Touchables.js

@@ -1,40 +1,10 @@
 "use strict";
-var _a, _b, _c, _d;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RectButton = exports.TouchableWithoutFeedback = exports.TouchableNativeFeedback = exports.TouchableHighlight = exports.TouchableOpacity = void 0;
-const Types_1 = require("../../../model/Types");
-const gestureHandler = require('react-native-gesture-handler');
-if (gestureHandler !== undefined) {
-    if (typeof gestureHandler.TouchableOpacity !== 'object') {
-        exports.TouchableOpacity = (_a = class TouchableOpacity extends (gestureHandler.TouchableOpacity) {
-            },
-            _a._dtInfo = { type: Types_1.Types.TouchableOpacityGestureHandler },
-            _a);
-    }
-    if (typeof gestureHandler.TouchableHighlight !== 'object') {
-        exports.TouchableHighlight = (_b = class TouchableHighlight extends (gestureHandler.TouchableHighlight) {
-            },
-            _b._dtInfo = { type: Types_1.Types.TouchableHighlightGestureHandler },
-            _b);
-    }
-    if (typeof gestureHandler.TouchableNativeFeedback !== 'object') {
-        exports.TouchableNativeFeedback = (_c = class TouchableNativeFeedback extends (gestureHandler.TouchableNativeFeedback) {
-            },
-            _c._dtInfo = {
-                type: Types_1.Types.TouchableNativeFeedbackGestureHandler,
-            },
-            _c);
-    }
-    if (typeof gestureHandler.TouchableWithoutFeedback === 'object') {
-        exports.TouchableWithoutFeedback = Object.assign({ _dtInfo: { type: Types_1.Types.TouchableWithoutFeedbackGestureHandler } }, gestureHandler.TouchableWithoutFeedback);
-    }
-    if (typeof gestureHandler.RectButton !== 'object') {
-        exports.RectButton = (_d = class RectButton extends gestureHandler.RectButton {
-            },
-            _d._dtInfo = { type: Types_1.Types.RectButtonGestureHandler },
-            _d);
-    }
-    else {
-        exports.RectButton = Object.assign({ _dtInfo: { type: Types_1.Types.RectButtonGestureHandler } }, gestureHandler.RectButton);
-    }
-}
+const GestureHandler = require("react-native-gesture-handler");
+const withOnPressMonitoring_1 = require("../../withOnPressMonitoring");
+exports.TouchableOpacity = (0, withOnPressMonitoring_1.withOnPressMonitoring)(GestureHandler.TouchableOpacity, 'Touchable');
+exports.TouchableHighlight = (0, withOnPressMonitoring_1.withOnPressMonitoring)(GestureHandler.TouchableHighlight, 'Touchable');
+exports.TouchableNativeFeedback = (0, withOnPressMonitoring_1.withOnPressMonitoring)(GestureHandler.TouchableNativeFeedback, 'Touchable');
+exports.TouchableWithoutFeedback = (0, withOnPressMonitoring_1.withOnPressMonitoring)(GestureHandler.TouchableWithoutFeedback, 'Touchable');
+exports.RectButton = (0, withOnPressMonitoring_1.withOnPressMonitoring)(GestureHandler.RectButton, 'Button');

package/instrumentation/libs/react-native/Touchables.js

@@ -1,51 +1,12 @@
 "use strict";
-var _a, _b, _c, _d;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Pressable = exports.Text = exports.TouchableWithoutFeedback = exports.TouchableNativeFeedback = exports.TouchableHighlight = exports.TouchableOpacity = exports.Button = void 0;
 const ReactNative = require("react-native");
-const React = require("react");
-const Types_1 = require("../../model/Types");
-exports.Button = React.forwardRef((props, ref) => (React.createElement(ReactNative.Button, Object.assign({ title: props.title }, props, { ref: ref }))));
-exports.Button._dtInfo = { type: Types_1.Types.Button };
-if (typeof ReactNative.TouchableOpacity === 'object') {
-    exports.TouchableOpacity = Object.assign({ _dtInfo: { type: Types_1.Types.TouchableOpacity } }, ReactNative.TouchableOpacity);
-}
-else {
-    exports.TouchableOpacity = (_a = class TouchableOpacity extends (ReactNative.TouchableOpacity) {
-        },
-        _a._dtInfo = { type: Types_1.Types.TouchableOpacity },
-        _a);
-}
-if (typeof ReactNative.TouchableHighlight === 'object') {
-    exports.TouchableHighlight = Object.assign({ _dtInfo: { type: Types_1.Types.TouchableHighlight } }, ReactNative.TouchableHighlight);
-}
-else {
-    exports.TouchableHighlight = (_b = class TouchableHighlight extends (ReactNative.TouchableHighlight) {
-        },
-        _b._dtInfo = { type: Types_1.Types.TouchableHighlight },
-        _b);
-}
-if (typeof ReactNative.TouchableNativeFeedback === 'object') {
-    exports.TouchableNativeFeedback = Object.assign({ _dtInfo: { type: Types_1.Types.TouchableNativeFeedback } }, ReactNative.TouchableNativeFeedback);
-}
-else {
-    exports.TouchableNativeFeedback = (_c = class TouchableNativeFeedback extends (ReactNative.TouchableNativeFeedback) {
-        },
-        _c._dtInfo = { type: Types_1.Types.TouchableNativeFeedback },
-        _c);
-}
-exports.TouchableWithoutFeedback = React.forwardRef((props, ref) => (React.createElement(ReactNative.TouchableWithoutFeedback, Object.assign({}, props, { ref: ref }))));
-exports.TouchableWithoutFeedback._dtInfo = {
-    type: Types_1.Types.TouchableWithoutFeedback,
-};
-if (typeof ReactNative.Text === 'object') {
-    exports.Text = Object.assign({ _dtInfo: { type: Types_1.Types.Text } }, ReactNative.Text);
-}
-else {
-    exports.Text = (_d = class Text extends ReactNative.Text {
-        },
-        _d._dtInfo = { type: Types_1.Types.Text },
-        _d);
-}
-exports.Pressable = React.forwardRef((props, ref) => (React.createElement(ReactNative.Pressable, Object.assign({}, props, { ref: ref }))));
-exports.Pressable._dtInfo = { type: Types_1.Types.Pressable };
+const withOnPressMonitoring_1 = require("../withOnPressMonitoring");
+exports.Button = (0, withOnPressMonitoring_1.withOnPressMonitoring)(ReactNative.Button, 'Button');
+exports.TouchableOpacity = (0, withOnPressMonitoring_1.withOnPressMonitoring)(ReactNative.TouchableOpacity, 'Touchable');
+exports.TouchableHighlight = (0, withOnPressMonitoring_1.withOnPressMonitoring)(ReactNative.TouchableHighlight, 'Touchable');
+exports.TouchableNativeFeedback = (0, withOnPressMonitoring_1.withOnPressMonitoring)(ReactNative.TouchableNativeFeedback, 'Touchable');
+exports.TouchableWithoutFeedback = (0, withOnPressMonitoring_1.withOnPressMonitoring)(ReactNative.TouchableWithoutFeedback, 'Touchable');
+exports.Text = (0, withOnPressMonitoring_1.withOnPressMonitoring)(ReactNative.Text, 'Text');
+exports.Pressable = (0, withOnPressMonitoring_1.withOnPressMonitoring)(ReactNative.Pressable, 'Pressable');

package/instrumentation/libs/withOnPressMonitoring.js

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findTouchableName = exports.chooseTouchableName = exports.wrapOnPress = exports.withOnPressMonitoring = void 0;
+const ReactNative = require("react-native");
+const React = require("react");
+const ConsoleLogger_1 = require("../../lib/core/logging/ConsoleLogger");
+const ConfigurationHandler_1 = require("../../lib/core/configuration/ConfigurationHandler");
+const Dynatrace_1 = require("../../lib/core/Dynatrace");
+const ComponentUtil_1 = require("../jsx/components/ComponentUtil");
+const Logger = new ConsoleLogger_1.ConsoleLogger('TouchableHelper');
+function withOnPressMonitoring(Component, fallbackName) {
+    return React.forwardRef((props, ref) => {
+        const { onPress, onLongPress } = props;
+        const touchableName = (0, exports.chooseTouchableName)(props, fallbackName);
+        const dynatraceIgnored = (0, ComponentUtil_1.isDynatraceIgnored)(props);
+        const propsWithoutRef = Object.assign(Object.assign(Object.assign({}, props), (!dynatraceIgnored &&
+            onPress && {
+            onPress: (0, exports.wrapOnPress)(onPress, touchableName),
+        })), (!dynatraceIgnored &&
+            onLongPress && {
+            onLongPress: (0, exports.wrapOnPress)(onLongPress, touchableName),
+        }));
+        const propsWithRef = Object.assign(Object.assign({}, propsWithoutRef), { ref });
+        return React.createElement(Component, Object.assign({}, propsWithRef));
+    });
+}
+exports.withOnPressMonitoring = withOnPressMonitoring;
+const wrapOnPress = (onPress, touchableName) => {
+    return (...args) => {
+        if (!ConfigurationHandler_1.ConfigurationHandler.isConfigurationAvailable()) {
+            Logger.info('React Native plugin has not been started yet! Touch will not be reported!');
+            onPress(...args);
+        }
+        else {
+            const action = Dynatrace_1.Dynatrace.enterAutoAction(`Touch on ${touchableName}`);
+            let isSync = true;
+            try {
+                const returnValue = onPress(...args);
+                if (returnValue instanceof Promise) {
+                    isSync = false;
+                    return Promise.resolve(returnValue).finally(() => {
+                        action.leaveAction();
+                    });
+                }
+            }
+            finally {
+                if (isSync) {
+                    action.leaveAction();
+                }
+            }
+        }
+    };
+};
+exports.wrapOnPress = wrapOnPress;
+const chooseTouchableName = (props, fallbackName) => {
+    if (props.dtActionName) {
+        return props.dtActionName;
+    }
+    if (ConfigurationHandler_1.ConfigurationHandler.isConfigurationAvailable() &&
+        ConfigurationHandler_1.ConfigurationHandler.isActionNamePrivacyEnabled()) {
+        return fallbackName;
+    }
+    return (0, exports.findTouchableName)(props) || fallbackName;
+};
+exports.chooseTouchableName = chooseTouchableName;
+const findTouchableName = (props) => {
+    if ('title' in props) {
+        return props.title;
+    }
+    if (props.accessibilityLabel !== undefined) {
+        return props.accessibilityLabel;
+    }
+    if (typeof props.children === 'function') {
+        return findTouchableNameRecursive(props.children({ pressed: false }));
+    }
+    return findTouchableNameRecursive(props.children);
+};
+exports.findTouchableName = findTouchableName;
+function findTouchableNameRecursive(node) {
+    if (typeof node === 'string') {
+        return node;
+    }
+    if (isReactNodeIterable(node)) {
+        for (const child of node) {
+            const result = findTouchableNameRecursive(child);
+            if (result !== null)
+                return result;
+        }
+    }
+    if (React.isValidElement(node)) {
+        if (isReactNativeImage(node)) {
+            const uri = getUriFromSource(node.props.source);
+            return uri ? 'Image Button: ' + uri : 'Image Button';
+        }
+        if (isCustomIcon(node)) {
+            return node.props.name;
+        }
+        if (hasReactNodeChildren(node))
+            return findTouchableNameRecursive(node.props.children);
+    }
+    return null;
+}
+function getUriFromSource(source) {
+    if (typeof source === 'object' &&
+        'uri' in source &&
+        source.uri !== undefined) {
+        return source.uri;
+    }
+    return null;
+}
+const isReactNodeIterable = (node) => typeof node === 'object' && node !== null && Symbol.iterator in node;
+const isReactNativeImage = (element) => element.type === ReactNative.Image;
+const isCustomIcon = (element) => typeof element.type === 'function' &&
+    element.type.name === 'Icon' &&
+    typeof element.props === 'object' &&
+    element.props !== null &&
+    'name' in element.props &&
+    typeof element.props.name === 'string';
+const hasReactNodeChildren = (element) => typeof element.props === 'object' &&
+    element.props !== null &&
+    'children' in element.props;

package/instrumentation/model/Types.js

@@ -5,19 +5,7 @@ var Types;
 (function (Types) {
     Types[Types["FunctionalComponent"] = 0] = "FunctionalComponent";
     Types[Types["ClassComponent"] = 1] = "ClassComponent";
-    Types[Types["Button"] = 2] = "Button";
-    Types[Types["TouchableOpacity"] = 3] = "TouchableOpacity";
-    Types[Types["TouchableHighlight"] = 4] = "TouchableHighlight";
-    Types[Types["TouchableNativeFeedback"] = 5] = "TouchableNativeFeedback";
-    Types[Types["TouchableWithoutFeedback"] = 6] = "TouchableWithoutFeedback";
-    Types[Types["Text"] = 7] = "Text";
-    Types[Types["Picker"] = 8] = "Picker";
-    Types[Types["Pressable"] = 9] = "Pressable";
-    Types[Types["TouchableOpacityGestureHandler"] = 10] = "TouchableOpacityGestureHandler";
-    Types[Types["TouchableHighlightGestureHandler"] = 11] = "TouchableHighlightGestureHandler";
-    Types[Types["TouchableNativeFeedbackGestureHandler"] = 12] = "TouchableNativeFeedbackGestureHandler";
-    Types[Types["TouchableWithoutFeedbackGestureHandler"] = 13] = "TouchableWithoutFeedbackGestureHandler";
-    Types[Types["RectButtonGestureHandler"] = 14] = "RectButtonGestureHandler";
-    Types[Types["RefreshControl"] = 15] = "RefreshControl";
-    Types[Types["Switch"] = 16] = "Switch";
+    Types[Types["Picker"] = 2] = "Picker";
+    Types[Types["RefreshControl"] = 3] = "RefreshControl";
+    Types[Types["Switch"] = 4] = "Switch";
 })(Types = exports.Types || (exports.Types = {}));

package/instrumentation/model/TypesUtil.js

@@ -1,48 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getNameForType = exports.isTypeTouchable = exports.isTypeGestureHandlerTouchable = exports.isTypeReactNativeTouchable = void 0;
+exports.getNameForType = void 0;
 const Types_1 = require("./Types");
-const isTypeReactNativeTouchable = (type) => type === Types_1.Types.TouchableHighlight ||
-    type === Types_1.Types.TouchableNativeFeedback ||
-    type === Types_1.Types.TouchableOpacity ||
-    type === Types_1.Types.TouchableWithoutFeedback;
-exports.isTypeReactNativeTouchable = isTypeReactNativeTouchable;
-const isTypeGestureHandlerTouchable = (type) => type === Types_1.Types.TouchableHighlightGestureHandler ||
-    type === Types_1.Types.TouchableNativeFeedbackGestureHandler ||
-    type === Types_1.Types.TouchableOpacityGestureHandler ||
-    type === Types_1.Types.TouchableWithoutFeedbackGestureHandler ||
-    type === Types_1.Types.RectButtonGestureHandler;
-exports.isTypeGestureHandlerTouchable = isTypeGestureHandlerTouchable;
-const isTypeTouchable = (type) => (0, exports.isTypeGestureHandlerTouchable)(type) || (0, exports.isTypeReactNativeTouchable)(type);
-exports.isTypeTouchable = isTypeTouchable;
 const getNameForType = (type) => {
     switch (type) {
-        case Types_1.Types.Button:
-        case Types_1.Types.RectButtonGestureHandler:
-            return 'Button';
-        case Types_1.Types.Text:
-            return 'Text';
-        case Types_1.Types.TouchableHighlight:
-        case Types_1.Types.TouchableNativeFeedback:
-        case Types_1.Types.TouchableOpacity:
-        case Types_1.Types.TouchableWithoutFeedback:
-        case Types_1.Types.TouchableHighlightGestureHandler:
-        case Types_1.Types.TouchableNativeFeedbackGestureHandler:
-        case Types_1.Types.TouchableOpacityGestureHandler:
-        case Types_1.Types.TouchableWithoutFeedbackGestureHandler:
-            return 'Touchable';
-        case Types_1.Types.Pressable:
-            return 'Pressable';
+        case Types_1.Types.FunctionalComponent:
+            return 'Functional Component';
+        case Types_1.Types.ClassComponent:
+            return 'Class Component';
         case Types_1.Types.Picker:
             return 'Picker';
         case Types_1.Types.RefreshControl:
             return 'Refresh Control';
         case Types_1.Types.Switch:
             return 'Switch';
-        case Types_1.Types.ClassComponent:
-            return 'Class Component';
-        case Types_1.Types.FunctionalComponent:
-            return 'Functional Component';
         default:
             return 'Undefined';
     }