From 593a87b1693b119c259428d97bb54676dff79c54 Mon Sep 17 00:00:00 2001
From: Scott Agirs <scott@ijs.to>
Date: Tue, 9 Jan 2024 16:39:12 +0200
Subject: [PATCH] feat(selectors): add `isWebView`

---
 docs/selectors.md         |  1 +
 index.d.ts                |  5 ++++-
 src/components/views.js   | 11 +++++++++++
 src/lib/buildSelectors.js |  1 +
 src/lib/selectors.js      |  1 +
 src/lib/types.js          |  7 +++++++
 6 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/docs/selectors.md b/docs/selectors.md
index 5b174ac..d1e4d9a 100644
--- a/docs/selectors.md
+++ b/docs/selectors.md
@@ -14,6 +14,7 @@ Available selectors:
 | isConsole          | bool    | returns true if device type is `console`                                               |
 | isEmbedded         | bool    | returns true if device type is `embedded`                                              |
 | isAndroid          | bool    | returns true if os type is `Android`                                                   |
+| isWebView          | bool    | returns true if is WebView `mobile`                                                |
 | isWinPhone         | bool    | returns true if os type is `Windows Phone`                                             |
 | isIOS              | bool    | returns true if os type is `iOS`                                                       |
 | isChrome           | bool    | returns true if browser is `Chrome`                                                    |
diff --git a/index.d.ts b/index.d.ts
index c53a8c4..a133963 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -32,6 +32,7 @@ declare module "react-device-detect" {
   export import isChromium = ReactDeviceDetect.isChromium;
   export import isMobileOnly = ReactDeviceDetect.isMobileOnly;
   export import isAndroid = ReactDeviceDetect.isAndroid;
+  export import isWebView = ReactDeviceDetect.isWebView;
   export import isWinPhone = ReactDeviceDetect.isWinPhone;
   export import isIOS = ReactDeviceDetect.isIOS;
   export import isChrome = ReactDeviceDetect.isChrome;
@@ -188,8 +189,10 @@ declare namespace ReactDeviceDetect {
   export const isChromium: boolean;
 
   export const isMobileOnly: boolean;
-
+  
   export const isAndroid: boolean;
+  
+  export const isWebView: boolean;
 
   export const isWinPhone: boolean;
 
diff --git a/src/components/views.js b/src/components/views.js
index d9943c6..dc78361 100644
--- a/src/components/views.js
+++ b/src/components/views.js
@@ -9,6 +9,7 @@ import {
   isSmartTV,
   isMobileOnly,
   isWearable,
+  isWebView,
   isConsole,
   isTablet,
 } from '../lib/selectors';
@@ -119,6 +120,16 @@ export const ConsoleView = ({ renderWithFragment, children, ...props }) => {
   ) : null;
 };
 
+export const WebView = ({ renderWithFragment, children, ...props }) => {
+  return isWebView ? (
+    renderWithFragment ? (
+      <Fragment>{children}</Fragment>
+    ) : (
+      <div {...props}>{children}</div>
+    )
+  ) : null;
+};
+
 export const WearableView = ({ renderWithFragment, children, ...props }) => {
   return isWearable ? (
     renderWithFragment ? (
diff --git a/src/lib/buildSelectors.js b/src/lib/buildSelectors.js
index 3c61fa1..721a948 100644
--- a/src/lib/buildSelectors.js
+++ b/src/lib/buildSelectors.js
@@ -16,6 +16,7 @@ export function buildSelectorsObject(options) {
     isBrowser: types.isBrowserType(device),
     isDesktop: types.isBrowserType(device),
     isAndroid: types.isAndroidType(os),
+    isWebView: types.isWebViewType(),
     isWinPhone: types.isWinPhoneType(os),
     isIOS: types.isIOSType(os) || types.getIPad13(),
     isChrome: types.isChromeType(browser),
diff --git a/src/lib/selectors.js b/src/lib/selectors.js
index 4954c0b..04d5da0 100644
--- a/src/lib/selectors.js
+++ b/src/lib/selectors.js
@@ -15,6 +15,7 @@ export const isBrowser = types.isBrowserType(UAHelper.device);
 export const isDesktop = types.isBrowserType(UAHelper.device);
 export const isAndroid = types.isAndroidType(UAHelper.os);
 export const isWinPhone = types.isWinPhoneType(UAHelper.os);
+export const isWebView = types.isWebViewType();
 export const isIOS = types.isIOSType(UAHelper.os) || types.getIPad13();
 export const isChrome = types.isChromeType(UAHelper.browser);
 export const isFirefox = types.isFirefoxType(UAHelper.browser);
diff --git a/src/lib/types.js b/src/lib/types.js
index 15cc1cc..0c11cae 100644
--- a/src/lib/types.js
+++ b/src/lib/types.js
@@ -54,6 +54,13 @@ export const isElectronType = () => {
 };
 export const isEdgeChromiumType = (ua) => typeof ua === 'string' && ua.indexOf('Edg/') !== -1;
 
+export const isWebViewType = () => {
+  const nav = getNavigatorInstance();
+  const ua = nav && nav.userAgent ? nav.userAgent : '';
+
+  return /WebView|(iPhone|iPod|iPad)(?!.*Safari)/i.test(ua);
+};
+
 export const getIOS13 = () => {
   const nav = getNavigatorInstance();
   return (