implemented specific code for each platform

__tests__/Controller.js

@@ -1,6 +1,6 @@
 import React, { forwardRef, useImperativeHandle } from 'react'
 import { render, cleanup } from '@testing-library/react-native'
-import { View } from 'react-native'
+import { TextInput, View } from 'react-native'
 import Container from '../src/Container'
 import Controller from '../src/Controller'
 import {
@@ -45,7 +45,7 @@ describe('Controller testing suite | handling different use cases of the Control
     })
   })
 
-  describe('Handling Touches', () => {
+  describe('Handling Presses', () => {
     test("Controller presses does not trigger Container's", () => {
       const onContainerPress = jest.fn(() => {})
       const onControllerPress = jest.fn(() => {})
@@ -57,7 +57,7 @@ describe('Controller testing suite | handling different use cases of the Control
             testID='ctrlr#1'
             onPress={onControllerPress}
           >
-            <View />
+            <TextInput />
           </Controller>
         </Container>
       )
@@ -85,6 +85,43 @@ describe('Controller testing suite | handling different use cases of the Control
       expect(onContainerPress).toHaveBeenCalled()
       expect(onControllerPress).toHaveBeenCalledTimes(0)
     })
+
+    test('Controller press followed by Container press', () => {
+      const onContainerPress = jest.fn(() => {})
+      const onControllerPress = jest.fn(() => {})
+
+      const { getByTestId } = render(
+        <Container testID='cntr#1' onPress={onContainerPress}>
+          <Controller testID='ctrlr#1' onPress={onControllerPress}>
+            <View />
+          </Controller>
+        </Container>
+      )
+      events.tap(getByTestId('ctrlr#1'))
+      expect(onControllerPress).toHaveBeenCalled()
+      expect(onContainerPress).toHaveBeenCalledTimes(0)
+
+      events.tap(getByTestId('cntr#1'))
+      expect(onContainerPress).toHaveBeenCalled()
+    })
+    test('Container press followed by Controller press', () => {
+      const onContainerPress = jest.fn(() => {})
+      const onControllerPress = jest.fn(() => {})
+
+      const { getByTestId } = render(
+        <Container testID='cntr#1' onPress={onContainerPress}>
+          <Controller testID='ctrlr#1' onPress={onControllerPress}>
+            <View />
+          </Controller>
+        </Container>
+      )
+      events.tap(getByTestId('cntr#1'))
+      expect(onContainerPress).toHaveBeenCalled()
+      expect(onControllerPress).toHaveBeenCalledTimes(0)
+
+      events.tap(getByTestId('ctrlr#1'))
+      expect(onControllerPress).toHaveBeenCalled()
+    })
   })
 
   describe('Subscription Related', () => {
@@ -159,6 +196,9 @@ describe('Controller testing suite | handling different use cases of the Control
       expect(getFocused()).toBeUndefined()
       events.tap(getByTestId('ctrlr'))
       expect(onFocus).toHaveBeenCalled()
+      expect(getFocusedId()).not.toBeNull()
+      expect(getFocused()).not.toBeNull()
+      expect(getFocusedId()).toBeDefined()
       expect(getFocused()).toBeDefined()
     })
 

src/Container.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback } from 'react'
-import { View, ViewProps, GestureResponderEvent } from 'react-native'
+import React, { useCallback, useMemo } from 'react'
+import { View, ViewProps, GestureResponderEvent, Platform } from 'react-native'
 import isFunction from 'lodash.isfunction'
 import { blur } from './ref'
 
@@ -11,14 +11,22 @@ type Props = ViewProps & {
 const Container = ({ children, onPress, ...props }: Props) => {
   const onContainerPress = useCallback(
     (_: GestureResponderEvent) => {
-      if (isFunction(onPress)) onPress()
       blur()
+      if (isFunction(onPress)) onPress()
     },
     [onPress]
   )
 
+  const responderHandler = useMemo(
+    () =>
+      Platform.select({
+        default: { onTouchStart: onContainerPress },
+        web: { onResponderRelease: onContainerPress }
+      }),
+    [onContainerPress]
+  )
   return (
-    <View {...props} onResponderRelease={onContainerPress}>
+    <View {...props} {...responderHandler}>
       {children}
     </View>
   )

src/Controller.tsx

@@ -1,6 +1,6 @@
-import React, { useRef, useCallback } from 'react'
+import React, { useRef, useCallback, useMemo } from 'react'
 
-import { View, ViewProps } from 'react-native'
+import { Platform, View, ViewProps } from 'react-native'
 import uniqueId from 'lodash.uniqueid'
 import set from 'lodash.set'
 import focuses, { blur } from './ref'
@@ -61,11 +61,20 @@ function Controller<C>({
     if (isFunction(onFocus)) onFocus()
   }, [isFocusable, onFocus])
 
+  const responderHandler = useMemo(
+    () =>
+      Platform.select({
+        default: { onTouchStart: onPress },
+        web: { onResponderRelease: onPress }
+      }),
+    [onPress]
+  )
+
   return (
     <View
       {...props}
       onStartShouldSetResponder={_onStartShouldSetResponderCapture}
-      onResponderRelease={onPress}
+      {...responderHandler}
     >
       {React.cloneElement(children as any, { ref: refSetter })}
     </View>

src/utils.ts

@@ -6,6 +6,7 @@ import { fireEvent } from '@testing-library/react-native'
  */
 const tap = (node: any) => {
   const memoizedProps = Object.keys(node._fiber.memoizedProps)
+  if (memoizedProps.includes('onTouchStart')) fireEvent(node, 'onTouchStart')
   if (memoizedProps.includes('onResponderRelease'))
     fireEvent(node, 'onResponderRelease')
   if (memoizedProps.includes('onPress')) fireEvent.press(node)