fix(example-app): 🐛 fix web focus issues

Author: crstnmac

example/src/modules/forms/InputScreen.tsx

@@ -1,5 +1,5 @@
 import React, { SetStateAction, useCallback, useRef, useState } from "react";
-import { Keyboard, TouchableWithoutFeedback } from "react-native";
+import { Keyboard, Platform, TouchableWithoutFeedback } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   Box,
@@ -42,7 +42,24 @@ export const InputScreen = () => {
 
   return (
     <Box style={tailwind.style("flex-1 justify-center bg-white-900")}>
-      <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
+      {Platform.OS === "ios" || Platform.OS === "android" ? (
+        <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
+          <Box
+            style={tailwind.style("flex-1 px-2 justify-center items-center")}
+          >
+            <Input
+              size={selectedSize}
+              placeholder={"Placeholder"}
+              variant={selectedVariant}
+              prefix={prefix}
+              suffix={suffix}
+              ref={inputRef}
+              editable={!isDisabled}
+              invalid={isInvalid}
+            />
+          </Box>
+        </TouchableWithoutFeedback>
+      ) : (
         <Box style={tailwind.style("flex-1 px-2 justify-center items-center")}>
           <Input
             size={selectedSize}
@@ -55,7 +72,7 @@ export const InputScreen = () => {
             invalid={isInvalid}
           />
         </Box>
-      </TouchableWithoutFeedback>
+      )}
       <Box
         style={tailwind.style(
           `rounded-t-lg shadow-lg bg-gray-100 justify-end px-2 pt-2 pb-[${

example/src/modules/forms/TextAreaScreen.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef, useState } from "react";
-import { Keyboard } from "react-native";
+import { Keyboard, Platform } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   Box,
@@ -40,7 +40,22 @@ export const TextAreaScreen = () => {
 
   return (
     <Box style={tailwind.style("flex-1 justify-center bg-white-900")}>
-      <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
+      {Platform.OS === "ios" || Platform.OS === "android" ? (
+        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+          <Box style={tailwind.style("flex-1 px-2 justify-center")}>
+            <TextArea
+              placeholder={"Type Something...."}
+              size={size}
+              variant={hasvariant}
+              loading={isLoading}
+              invalid={isInvalid}
+              suffix={suffix}
+              editable={!isDisabled}
+              ref={textAreaRef}
+            />
+          </Box>
+        </TouchableWithoutFeedback>
+      ) : (
         <Box style={tailwind.style("flex-1 px-2 justify-center")}>
           <TextArea
             placeholder={"Type Something...."}
@@ -53,7 +68,8 @@ export const TextAreaScreen = () => {
             ref={textAreaRef}
           />
         </Box>
-      </TouchableWithoutFeedback>
+      )}
+
       <Box
         style={tailwind.style(
           `rounded-t-lg shadow-lg bg-gray-100 justify-end px-2 pt-2 pb-[${