feat: add disableViewFlattening

Author: V3RON

packages/babel-preset/src/collapsible-plugin.ts

@@ -0,0 +1,37 @@
+import type { PluginObj, types as BabelTypes, NodePath } from '@babel/core';
+
+const collapsiblePlugin = ({
+	types: t,
+}: typeof import('@babel/core')): PluginObj => {
+	return {
+		name: 'react-native-harness-collapsible-plugin',
+		visitor: {
+			JSXOpeningElement(path: NodePath<BabelTypes.JSXOpeningElement>) {
+				const { node } = path;
+
+				// 1. Check if the tag is named "View"
+				if (t.isJSXIdentifier(node.name) && node.name.name === 'View') {
+					// 2. Check if 'collapsable' is already defined to avoid overriding explicit props
+					const hasCollapsable = node.attributes.some(
+						(attr) =>
+							t.isJSXAttribute(attr) &&
+							t.isJSXIdentifier(attr.name) &&
+							attr.name.name === 'collapsable'
+					);
+
+					if (!hasCollapsable) {
+						// 3. Inject collapsable={true}
+						node.attributes.push(
+							t.jsxAttribute(
+								t.jsxIdentifier('collapsable'),
+								t.jsxExpressionContainer(t.booleanLiteral(true))
+							)
+						);
+					}
+				}
+			},
+		},
+	};
+};
+
+export default collapsiblePlugin;

packages/babel-preset/src/preset.ts

@@ -1,4 +1,5 @@
 import resolveWeakPlugin from './resolve-weak-plugin';
+import collapsiblePlugin from './collapsible-plugin';
 import path from 'path';
 
 const getIstanbulPlugin = (): string | [string, object] | null => {
@@ -20,6 +21,7 @@ const getIstanbulPlugin = (): string | [string, object] | null => {
 export const rnHarnessPlugins = [
   '@babel/plugin-transform-class-static-block',
   resolveWeakPlugin,
+  process.env.RN_HARNESS_VIEW_FLATTENING === 'false' ? collapsiblePlugin : null,
   getIstanbulPlugin(),
 ].filter((plugin) => plugin !== null);
 

packages/config/src/types.ts

@@ -46,6 +46,15 @@ export const ConfigSchema = z
       .min(100, 'Crash detection interval must be at least 100ms')
       .default(500),
 
+    disableViewFlattening: z
+      .boolean()
+      .optional()
+      .default(false)
+      .describe(
+        'Disable view flattening in React Native. This will set collapsable={true} for all View components ' +
+        'to ensure they are not flattened by the native layout engine.'
+      ),
+
     coverage: z
       .object({
         root: z
@@ -55,7 +64,7 @@ export const ConfigSchema = z
             'Root directory for coverage instrumentation in monorepo setups. ' +
             'Specifies the directory from which coverage data should be collected. ' +
             'Use ".." for create-react-native-library projects where tests run from example/ ' +
-            'but source files are in parent directory. Passed to babel-plugin-istanbul\'s cwd option.'
+            "but source files are in parent directory. Passed to babel-plugin-istanbul's cwd option."
           ),
       })
       .optional(),

packages/jest/src/setup.ts

@@ -74,6 +74,10 @@ export const setup = async (globalConfig: JestConfig.GlobalConfig) => {
     }
   }
 
+  if (harnessConfig.disableViewFlattening) {
+    process.env.RN_HARNESS_VIEW_FLATTENING = 'false';
+  }
+
   logTestRunHeader(selectedRunner);
   const harness = await getHarness(
     harnessConfig,