@hanzogui/kitchen-sink 3.0.5

package/e2e/NativePortal.test.ts

@@ -0,0 +1,113 @@
+/**
+ * Test for native portal with react-native-teleport integration
+ * Verifies that Portal/Sheet/Popover work correctly when using teleport
+ */
+
+import { by, device, element, expect, waitFor } from 'detox'
+import { navigateToTestCase } from './utils/navigation'
+
+describe('NativePortal', () => {
+  beforeAll(async () => {
+    await device.launchApp({ newInstance: true })
+  })
+
+  beforeEach(async () => {
+    await device.reloadReactNative()
+    await navigateToTestCase('NativePortalTest', 'portal-status')
+  })
+
+  it('should navigate to NativePortalTest test case', async () => {
+    // verify we're on the right screen by checking for portal status
+    await expect(element(by.id('portal-status'))).toBeVisible()
+  })
+
+  it('should show teleport as enabled', async () => {
+    // check that teleport is detected and enabled
+    const statusText = element(by.id('portal-status'))
+    await expect(statusText).toBeVisible()
+    // the status should indicate teleport is active (not "Not enabled")
+    // we can't easily check text content in detox, but visibility confirms component renders
+  })
+
+  it('should open Select with Sheet', async () => {
+    await device.disableSynchronization()
+
+    try {
+      // tap the select trigger
+      await element(by.id('native-portal-select-trigger')).tap()
+
+      // wait for select options to appear
+      await waitFor(element(by.id('native-portal-select-option-apple')))
+        .toBeVisible()
+        .withTimeout(10000)
+
+      // close by selecting an option
+      await element(by.id('native-portal-select-option-apple')).tap()
+
+      // wait for sheet to close
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+    } finally {
+      await device.enableSynchronization()
+    }
+  })
+
+  it('should open and close Popover', async () => {
+    await device.disableSynchronization()
+
+    try {
+      // tap popover trigger
+      await element(by.id('native-portal-popover-trigger')).tap()
+
+      // wait for popover content to appear
+      await waitFor(element(by.id('native-portal-popover-content')))
+        .toBeVisible()
+        .withTimeout(5000)
+
+      // verify text is visible inside popover
+      await expect(element(by.id('native-portal-popover-text'))).toBeVisible()
+
+      // close popover
+      await element(by.id('native-portal-popover-close')).tap()
+
+      // wait for popover to close
+      await new Promise((resolve) => setTimeout(resolve, 500))
+
+      // popover content should no longer be visible
+      await waitFor(element(by.id('native-portal-popover-content')))
+        .not.toBeVisible()
+        .withTimeout(3000)
+    } finally {
+      await device.enableSynchronization()
+    }
+  })
+
+  it('should open and close Sheet', async () => {
+    await device.disableSynchronization()
+
+    try {
+      // tap sheet trigger
+      await element(by.id('native-portal-sheet-trigger')).tap()
+
+      // wait for sheet frame to appear
+      await waitFor(element(by.id('native-portal-sheet-frame')))
+        .toBeVisible()
+        .withTimeout(5000)
+
+      // verify text is visible inside sheet
+      await expect(element(by.id('native-portal-sheet-text'))).toBeVisible()
+
+      // close sheet by swiping down (dismissOnSnapToBottom)
+      await element(by.id('native-portal-sheet-frame')).swipe('down', 'fast')
+
+      // wait for sheet close animation
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+
+      // sheet text should no longer be visible
+      await waitFor(element(by.id('native-portal-sheet-text')))
+        .not.toBeVisible()
+        .withTimeout(5000)
+    } finally {
+      await device.enableSynchronization()
+    }
+  })
+})

package/e2e/PointerEvents.test.ts

@@ -0,0 +1,116 @@
+/**
+ * Native tests for pointer events
+ * Verifies touch events map correctly to pointer events on native
+ */
+
+import { by, device, element, expect } from 'detox'
+import { navigateToTestCase } from './utils/navigation'
+
+async function navigateToPointerEvents() {
+  await navigateToTestCase('PointerEventsCase', 'pointer-events-root')
+}
+
+describe('PointerEvents', () => {
+  beforeAll(async () => {
+    await device.launchApp({ newInstance: true })
+  })
+
+  beforeEach(async () => {
+    await device.reloadReactNative()
+    await navigateToPointerEvents()
+  })
+
+  it('should render the test case', async () => {
+    await expect(element(by.id('pointer-target'))).toExist()
+    await expect(element(by.id('down-count'))).toHaveText('Down: 0')
+    await expect(element(by.id('up-count'))).toHaveText('Up: 0')
+  })
+
+  it('should fire pointerDown and pointerUp on tap', async () => {
+    await element(by.id('pointer-target')).tap()
+
+    await expect(element(by.id('down-count'))).toHaveText('Down: 1')
+    await expect(element(by.id('up-count'))).toHaveText('Up: 1')
+  })
+
+  it('should fire pointerEnter on touch start', async () => {
+    await element(by.id('pointer-target')).tap()
+
+    await expect(element(by.id('enter-count'))).toHaveText('Enter: 1')
+  })
+
+  it('should fire pointerLeave on touch end', async () => {
+    await element(by.id('pointer-target')).tap()
+
+    await expect(element(by.id('leave-count'))).toHaveText('Leave: 1')
+  })
+
+  it('should fire pointerMove during drag', async () => {
+    await element(by.id('pointer-target')).longPressAndDrag(
+      300, // duration ms
+      0.2, // start x (normalized)
+      0.5, // start y (normalized)
+      element(by.id('pointer-target')),
+      0.8, // end x (normalized)
+      0.5, // end y (normalized)
+      'slow',
+      0
+    )
+
+    // should have fired at least one move event (not still 0)
+    const moveEl = element(by.id('move-count'))
+    // if move fired, text won't be "Move: 0"
+    await expect(moveEl).not.toHaveText('Move: 0')
+  })
+
+  // skipping this test because longPressAndDrag from one element to another has
+  // visibility threshold issues in Detox when the root container extends beyond viewport
+  it.skip('should fire pointerLeave when dragging off element', async () => {
+    await element(by.id('pointer-target')).longPressAndDrag(
+      500,
+      0.5,
+      0.5,
+      element(by.id('pointer-events-root')),
+      0.5,
+      0.1, // drag to top of root (outside target)
+      'slow',
+      0
+    )
+
+    await new Promise((r) => setTimeout(r, 100))
+
+    await expect(element(by.id('leave-count'))).toHaveText('Leave: 1')
+  })
+
+  it('should handle multiple tap cycles', async () => {
+    await element(by.id('pointer-target')).tap()
+    await element(by.id('pointer-target')).tap()
+    await element(by.id('pointer-target')).tap()
+
+    await expect(element(by.id('down-count'))).toHaveText('Down: 3')
+    await expect(element(by.id('up-count'))).toHaveText('Up: 3')
+    await expect(element(by.id('enter-count'))).toHaveText('Enter: 3')
+    await expect(element(by.id('leave-count'))).toHaveText('Leave: 3')
+  })
+
+  // skipping this test because the capture-target (second 200px square) is often
+  // partially off-screen and longPressAndDrag requires 100% visibility
+  // the core pointer capture functionality is tested in web tests
+  it.skip('should receive moves outside bounds when pointer is captured', async () => {
+    // drag from capture target to outside (root area)
+    // with setPointerCapture, moves should still fire even outside bounds
+    await element(by.id('capture-target')).longPressAndDrag(
+      500,
+      0.5,
+      0.5,
+      element(by.id('pointer-events-root')),
+      0.5,
+      0.05, // drag way up outside the target
+      'slow',
+      0
+    )
+
+    // should have received move events even while outside bounds
+    await expect(element(by.id('capture-move-count'))).not.toHaveText('CapMove: 0')
+  })
+})

package/e2e/PressStyleNative.noRngh.test.ts

@@ -0,0 +1,191 @@
+/**
+ * Native press style tests WITHOUT gesture handler (usePressability fallback)
+ *
+ * This test runs with RNGH disabled via launch args to verify that press handling
+ * works correctly when falling back to RN's usePressability.
+ */
+
+import { by, device, element, expect, waitFor } from 'detox'
+import * as fs from 'fs'
+import * as assert from 'assert'
+import { PNG } from 'pngjs'
+import { navigateToTestCase } from './utils/navigation'
+import { getDominantColor, isBlueish, formatRGB } from './utils/colors'
+
+async function navigateToPressStyleNative() {
+  await navigateToTestCase('PressStyleNative', 'color-test-pressable')
+  // navigateToTestCase re-enables sync, but we need it disabled for no-RNGH tests
+  // because the RNManualRecognizer gesture blocks Detox synchronization in CI
+  await device.disableSynchronization()
+}
+
+describe('PressStyleNative (no RNGH)', () => {
+  beforeAll(async () => {
+    // launch with RNGH disabled
+    await device.launchApp({
+      newInstance: true,
+      launchArgs: { disableGestureHandler: true },
+    })
+    // disable synchronization for the entire suite - without RNGH, there's a
+    // RNManualRecognizer gesture that stays in "Possible" state which blocks Detox
+    await device.disableSynchronization()
+  })
+
+  afterAll(async () => {
+    await device.enableSynchronization()
+  })
+
+  beforeEach(async () => {
+    // use launchApp instead of reloadReactNative — on RN 0.83, reloadReactNative
+    // doesn't work reliably when RNGH is disabled (JS run loop stays busy)
+    await device.launchApp({
+      newInstance: true,
+      launchArgs: { disableGestureHandler: true },
+    })
+    await device.disableSynchronization()
+    // wait for app to stabilize after launch
+    await new Promise((resolve) => setTimeout(resolve, 1500))
+    await navigateToPressStyleNative()
+  })
+
+  it('should render the test case screen', async () => {
+    await waitFor(element(by.id('color-test-pressable')))
+      .toBeVisible()
+      .withTimeout(5000)
+    await waitFor(element(by.id('animated-color-test-pressable')))
+      .toBeVisible()
+      .withTimeout(5000)
+  })
+
+  describe('pressStyle without transition', () => {
+    it('should fire pressIn and pressOut events on tap', async () => {
+      await waitFor(element(by.id('simple-press-in-count')))
+        .toHaveText('In: 0')
+        .withTimeout(5000)
+      await waitFor(element(by.id('simple-press-out-count')))
+        .toHaveText('Out: 0')
+        .withTimeout(5000)
+
+      await element(by.id('color-test-pressable')).tap()
+      await new Promise((resolve) => setTimeout(resolve, 300))
+
+      await waitFor(element(by.id('simple-press-in-count')))
+        .toHaveText('In: 1')
+        .withTimeout(5000)
+      await waitFor(element(by.id('simple-press-out-count')))
+        .toHaveText('Out: 1')
+        .withTimeout(5000)
+    })
+
+    it('should not be stuck in pressed state after tap', async () => {
+      await element(by.id('color-test-pressable')).tap()
+      await new Promise((resolve) => setTimeout(resolve, 300))
+      await waitFor(element(by.id('simple-is-pressed')))
+        .toHaveText('Pressed: NO')
+        .withTimeout(5000)
+    })
+
+    it('should show blue background at rest', async () => {
+      await new Promise((resolve) => setTimeout(resolve, 300))
+      const restScreenshot = await element(by.id('color-test-pressable')).takeScreenshot(
+        'color-test-rest-norngh'
+      )
+      const color = getDominantColor(restScreenshot)
+      assert.ok(isBlueish(color), `Expected blue at rest, got ${formatRGB(color)}`)
+    })
+
+    it('should unpress when finger drags off element', async () => {
+      await waitFor(element(by.id('simple-press-in-count')))
+        .toHaveText('In: 0')
+        .withTimeout(5000)
+      await waitFor(element(by.id('simple-press-out-count')))
+        .toHaveText('Out: 0')
+        .withTimeout(5000)
+
+      await element(by.id('color-test-pressable')).longPressAndDrag(
+        500,
+        0.5,
+        0.5,
+        element(by.id('press-style-native-root')),
+        0.5,
+        0.1,
+        'slow',
+        100
+      )
+
+      await new Promise((resolve) => setTimeout(resolve, 400))
+
+      await waitFor(element(by.id('simple-press-in-count')))
+        .toHaveText('In: 1')
+        .withTimeout(5000)
+      await waitFor(element(by.id('simple-press-out-count')))
+        .toHaveText('Out: 1')
+        .withTimeout(5000)
+      await waitFor(element(by.id('simple-is-pressed')))
+        .toHaveText('Pressed: NO')
+        .withTimeout(5000)
+    })
+
+    it('should return to blue after drag off', async () => {
+      await element(by.id('color-test-pressable')).longPressAndDrag(
+        500,
+        0.5,
+        0.5,
+        element(by.id('press-style-native-root')),
+        0.5,
+        0.1,
+        'slow',
+        100
+      )
+
+      await new Promise((resolve) => setTimeout(resolve, 400))
+
+      const afterScreenshot = await element(by.id('color-test-pressable')).takeScreenshot(
+        'color-test-after-drag-norngh'
+      )
+      const color = getDominantColor(afterScreenshot)
+      assert.ok(isBlueish(color), `Expected blue after drag off, got ${formatRGB(color)}`)
+    })
+  })
+
+  describe('pressStyle with transition (animation driver)', () => {
+    it('should fire pressIn and pressOut events on animated pressable', async () => {
+      await waitFor(element(by.id('animated-press-in-count')))
+        .toHaveText('In: 0')
+        .withTimeout(5000)
+      await waitFor(element(by.id('animated-press-out-count')))
+        .toHaveText('Out: 0')
+        .withTimeout(5000)
+
+      await element(by.id('animated-color-test-pressable')).tap()
+      await new Promise((resolve) => setTimeout(resolve, 300))
+
+      await waitFor(element(by.id('animated-press-in-count')))
+        .toHaveText('In: 1')
+        .withTimeout(5000)
+      await waitFor(element(by.id('animated-press-out-count')))
+        .toHaveText('Out: 1')
+        .withTimeout(5000)
+    })
+
+    it('should not be stuck in pressed state after tap (animated)', async () => {
+      await element(by.id('animated-color-test-pressable')).tap()
+      await new Promise((resolve) => setTimeout(resolve, 300))
+      await waitFor(element(by.id('animated-is-pressed')))
+        .toHaveText('Pressed: NO')
+        .withTimeout(5000)
+    })
+
+    it('should show blue background at rest (animated)', async () => {
+      await new Promise((resolve) => setTimeout(resolve, 300))
+      const restScreenshot = await element(
+        by.id('animated-color-test-pressable')
+      ).takeScreenshot('animated-color-test-rest-norngh')
+      const color = getDominantColor(restScreenshot)
+      assert.ok(
+        isBlueish(color),
+        `Expected blue at rest (animated), got ${formatRGB(color)}`
+      )
+    })
+  })
+})

package/e2e/PressStyleNative.test.ts

@@ -0,0 +1,231 @@
+/**
+ * Detox E2E tests for native press style behaviors
+ *
+ * Tests verify:
+ * 1. Press events fire correctly (onPressIn/onPressOut)
+ * 2. Press state doesn't get stuck after tap or drag-off
+ * 3. Both non-animated and animated (transition) pressables work
+ * 4. Actual pixel colors are verified via screenshots
+ */
+
+import { by, device, element, expect, waitFor } from 'detox'
+import * as fs from 'fs'
+import * as assert from 'assert'
+import { PNG } from 'pngjs'
+import { navigateToTestCase } from './utils/navigation'
+
+// helper to get the dominant color from a PNG screenshot
+// samples pixels from the center region to avoid edges/text
+function getDominantColor(screenshotPath: string): { r: number; g: number; b: number } {
+  const data = fs.readFileSync(screenshotPath)
+  const png = PNG.sync.read(data)
+
+  // sample the center 50% of the image to avoid edges and text
+  const startX = Math.floor(png.width * 0.25)
+  const endX = Math.floor(png.width * 0.75)
+  const startY = Math.floor(png.height * 0.25)
+  const endY = Math.floor(png.height * 0.75)
+
+  let totalR = 0,
+    totalG = 0,
+    totalB = 0,
+    count = 0
+
+  for (let y = startY; y < endY; y++) {
+    for (let x = startX; x < endX; x++) {
+      const idx = (png.width * y + x) * 4
+      totalR += png.data[idx]
+      totalG += png.data[idx + 1]
+      totalB += png.data[idx + 2]
+      count++
+    }
+  }
+
+  return {
+    r: Math.round(totalR / count),
+    g: Math.round(totalG / count),
+    b: Math.round(totalB / count),
+  }
+}
+
+// check if a color is predominantly blue (for $blue10)
+function isBlueish(color: { r: number; g: number; b: number }): boolean {
+  // blue should have high B, low R, and low-medium G
+  return color.b > 100 && color.b > color.r && color.b > color.g
+}
+
+// TODO: These tests are flaky on iOS simulator - press events don't fire reliably
+// Need to investigate press event handling in simulator environment
+describe.skip('PressStyleNative', () => {
+  beforeAll(async () => {
+    await device.launchApp({ newInstance: true })
+  })
+
+  beforeEach(async () => {
+    await device.reloadReactNative()
+    await navigateToPressStyleNative()
+  })
+
+  it('should render the test case screen', async () => {
+    await expect(element(by.id('color-test-pressable'))).toBeVisible()
+    await expect(element(by.id('animated-color-test-pressable'))).toBeVisible()
+  })
+
+  describe('pressStyle without transition', () => {
+    it('should fire pressIn and pressOut events on tap', async () => {
+      await expect(element(by.id('simple-press-in-count'))).toHaveText('In: 0')
+      await expect(element(by.id('simple-press-out-count'))).toHaveText('Out: 0')
+
+      await element(by.id('color-test-pressable')).tap()
+
+      await expect(element(by.id('simple-press-in-count'))).toHaveText('In: 1')
+      await expect(element(by.id('simple-press-out-count'))).toHaveText('Out: 1')
+    })
+
+    it('should not be stuck in pressed state after tap', async () => {
+      await element(by.id('color-test-pressable')).tap()
+      await new Promise((resolve) => setTimeout(resolve, 100))
+      await expect(element(by.id('simple-is-pressed'))).toHaveText('Pressed: NO')
+    })
+
+    it('should show blue background at rest', async () => {
+      const restScreenshot = await element(by.id('color-test-pressable')).takeScreenshot(
+        'color-test-rest'
+      )
+
+      const color = getDominantColor(restScreenshot)
+      assert.ok(
+        isBlueish(color),
+        `Expected blue at rest, got RGB(${color.r}, ${color.g}, ${color.b})`
+      )
+    })
+
+    it('should unpress when finger drags off element', async () => {
+      await expect(element(by.id('simple-press-in-count'))).toHaveText('In: 0')
+      await expect(element(by.id('simple-press-out-count'))).toHaveText('Out: 0')
+
+      await element(by.id('color-test-pressable')).longPressAndDrag(
+        500,
+        0.5,
+        0.5,
+        element(by.id('press-style-native-root')),
+        0.5,
+        0.1,
+        'slow',
+        100
+      )
+
+      await new Promise((resolve) => setTimeout(resolve, 200))
+
+      await expect(element(by.id('simple-press-in-count'))).toHaveText('In: 1')
+      await expect(element(by.id('simple-press-out-count'))).toHaveText('Out: 1')
+      await expect(element(by.id('simple-is-pressed'))).toHaveText('Pressed: NO')
+    })
+
+    it('should return to blue after drag off', async () => {
+      await element(by.id('color-test-pressable')).longPressAndDrag(
+        500,
+        0.5,
+        0.5,
+        element(by.id('press-style-native-root')),
+        0.5,
+        0.1,
+        'slow',
+        100
+      )
+
+      await new Promise((resolve) => setTimeout(resolve, 200))
+
+      const afterDragScreenshot = await element(
+        by.id('color-test-pressable')
+      ).takeScreenshot('color-test-after-drag')
+
+      const color = getDominantColor(afterDragScreenshot)
+      assert.ok(
+        isBlueish(color),
+        `Expected blue after drag off, got RGB(${color.r}, ${color.g}, ${color.b})`
+      )
+    })
+
+    it('should handle multiple press-drag-off cycles', async () => {
+      await expect(element(by.id('simple-press-in-count'))).toHaveText('In: 0')
+      await expect(element(by.id('simple-press-out-count'))).toHaveText('Out: 0')
+
+      for (let i = 0; i < 3; i++) {
+        await element(by.id('color-test-pressable')).longPressAndDrag(
+          500,
+          0.5,
+          0.5,
+          element(by.id('press-style-native-root')),
+          0.5,
+          0.1,
+          'slow',
+          100
+        )
+        await new Promise((resolve) => setTimeout(resolve, 200))
+      }
+
+      await expect(element(by.id('simple-press-in-count'))).toHaveText('In: 3')
+      await expect(element(by.id('simple-press-out-count'))).toHaveText('Out: 3')
+      await expect(element(by.id('simple-is-pressed'))).toHaveText('Pressed: NO')
+    })
+  })
+
+  describe('pressStyle with transition (animation driver)', () => {
+    it('should fire pressIn and pressOut events on animated pressable', async () => {
+      await expect(element(by.id('animated-press-in-count'))).toHaveText('In: 0')
+      await expect(element(by.id('animated-press-out-count'))).toHaveText('Out: 0')
+
+      await element(by.id('animated-color-test-pressable')).tap()
+      await new Promise((resolve) => setTimeout(resolve, 100))
+
+      await expect(element(by.id('animated-press-in-count'))).toHaveText('In: 1')
+      await expect(element(by.id('animated-press-out-count'))).toHaveText('Out: 1')
+    })
+
+    it('should not be stuck in pressed state after tap (animated)', async () => {
+      await element(by.id('animated-color-test-pressable')).tap()
+      await new Promise((resolve) => setTimeout(resolve, 100))
+      await expect(element(by.id('animated-is-pressed'))).toHaveText('Pressed: NO')
+    })
+
+    it('should show blue background at rest (animated)', async () => {
+      await new Promise((resolve) => setTimeout(resolve, 100))
+      const restScreenshot = await element(
+        by.id('animated-color-test-pressable')
+      ).takeScreenshot('animated-color-test-rest')
+
+      const color = getDominantColor(restScreenshot)
+      assert.ok(
+        isBlueish(color),
+        `Expected blue at rest (animated), got RGB(${color.r}, ${color.g}, ${color.b})`
+      )
+    })
+
+    it('should unpress when finger drags off animated element', async () => {
+      await expect(element(by.id('animated-press-in-count'))).toHaveText('In: 0')
+      await expect(element(by.id('animated-press-out-count'))).toHaveText('Out: 0')
+
+      await element(by.id('animated-color-test-pressable')).longPressAndDrag(
+        500,
+        0.5,
+        0.5,
+        element(by.id('press-style-native-root')),
+        0.5,
+        0.1,
+        'slow',
+        100
+      )
+
+      await new Promise((resolve) => setTimeout(resolve, 100))
+
+      await expect(element(by.id('animated-press-in-count'))).toHaveText('In: 1')
+      await expect(element(by.id('animated-press-out-count'))).toHaveText('Out: 1')
+      await expect(element(by.id('animated-is-pressed'))).toHaveText('Pressed: NO')
+    })
+  })
+})
+
+async function navigateToPressStyleNative() {
+  await navigateToTestCase('PressStyleNative', 'color-test-pressable')
+}