From 6f1d3b2b2d2e7012d2531b2ed5542ba32d5cb146 Mon Sep 17 00:00:00 2001
From: kris <kris@dorg.tech>
Date: Fri, 26 Jan 2024 16:49:35 +0500
Subject: [PATCH] using Platform.select for valid web/native overflow
 properties

---
 packages/app/src/components/DonorsList/DonorsList.tsx      | 7 +++++--
 packages/app/src/components/Dropdown.tsx                   | 7 +++++--
 packages/app/src/components/Layout/Layout.tsx              | 7 +++++--
 packages/app/src/components/StewardsList/StewardsList.tsx  | 7 +++++--
 .../app/src/components/TransactionList/TransactionList.tsx | 7 +++++--
 packages/app/src/components/modals/ApproveSwapModal.tsx    | 7 +++++--
 .../app/src/components/modals/CompleteDonationModal.tsx    | 7 +++++--
 packages/app/src/components/modals/ErrorModal.tsx          | 7 +++++--
 packages/app/src/components/modals/StopDonationModal.tsx   | 7 +++++--
 packages/app/src/components/modals/SwitchModal.tsx         | 7 +++++--
 packages/app/src/components/modals/ThankYouModal.tsx       | 7 +++++--
 11 files changed, 55 insertions(+), 22 deletions(-)

diff --git a/packages/app/src/components/DonorsList/DonorsList.tsx b/packages/app/src/components/DonorsList/DonorsList.tsx
index d4c113f6..e3bd9935 100644
--- a/packages/app/src/components/DonorsList/DonorsList.tsx
+++ b/packages/app/src/components/DonorsList/DonorsList.tsx
@@ -1,4 +1,4 @@
-import { StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 import { DonorCollective } from '../../models/models';
 import { DonorsListItem } from './DonorsListItem';
 import { useMemo } from 'react';
@@ -41,7 +41,10 @@ const styles = StyleSheet.create({
     width: '100%',
     maxHeight: 400,
     // @ts-ignore
-    overflow: 'auto',
+    overflow: Platform.select({
+      native: 'scroll',
+      default: 'auto',
+    }),
   },
 });
 
diff --git a/packages/app/src/components/Dropdown.tsx b/packages/app/src/components/Dropdown.tsx
index 57922241..b9a70941 100644
--- a/packages/app/src/components/Dropdown.tsx
+++ b/packages/app/src/components/Dropdown.tsx
@@ -1,4 +1,4 @@
-import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Image, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { useState } from 'react';
 import { Colors } from '../utils/colors';
 import { InterSemiBold, InterSmall } from '../utils/webFonts';
@@ -113,7 +113,10 @@ const styles = StyleSheet.create({
     height: 'auto',
     maxHeight: 400,
     // @ts-ignore
-    overflowY: 'auto',
+    overflowY: Platform.select({
+      native: 'scroll',
+      default: 'auto',
+    }),
     backgroundColor: Colors.white,
     paddingTop: 10,
     paddingBottom: 10,
diff --git a/packages/app/src/components/Layout/Layout.tsx b/packages/app/src/components/Layout/Layout.tsx
index 8a37da0c..185e2a86 100644
--- a/packages/app/src/components/Layout/Layout.tsx
+++ b/packages/app/src/components/Layout/Layout.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import Header from '../Header/Header';
-import { ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native';
+import { Platform, ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native';
 import ImpactButton from '../ImpactButton';
 import { useLocation } from 'react-router-native';
 import { Colors } from '../../utils/colors';
@@ -68,7 +68,10 @@ const styles = StyleSheet.create({
     paddingBottom: 90,
     height: '100vh',
     // @ts-ignore
-    overflowY: 'auto',
+    overflowY: Platform.select({
+      native: 'scroll',
+      default: 'auto',
+    }),
   },
 });
 
diff --git a/packages/app/src/components/StewardsList/StewardsList.tsx b/packages/app/src/components/StewardsList/StewardsList.tsx
index d356c22a..6f0cc632 100644
--- a/packages/app/src/components/StewardsList/StewardsList.tsx
+++ b/packages/app/src/components/StewardsList/StewardsList.tsx
@@ -1,4 +1,4 @@
-import { Image, Text, View, StyleSheet } from 'react-native';
+import { Image, Text, View, StyleSheet, Platform } from 'react-native';
 import { InterRegular, InterSemiBold } from '../../utils/webFonts';
 import { Colors } from '../../utils/colors';
 import { StewardsListItem } from './StewardsListItem';
@@ -109,7 +109,10 @@ const styles = StyleSheet.create({
 const overflowStyle = StyleSheet.create({
   overflow: {
     // @ts-ignore
-    overflow: 'auto',
+    overflow: Platform.select({
+      native: 'scroll',
+      default: 'auto',
+    }),
   },
 });
 
diff --git a/packages/app/src/components/TransactionList/TransactionList.tsx b/packages/app/src/components/TransactionList/TransactionList.tsx
index 6294e2d2..60452b77 100644
--- a/packages/app/src/components/TransactionList/TransactionList.tsx
+++ b/packages/app/src/components/TransactionList/TransactionList.tsx
@@ -1,4 +1,4 @@
-import { Image, Text, View, StyleSheet, TouchableOpacity } from 'react-native';
+import { Image, Text, View, Platform, StyleSheet, TouchableOpacity } from 'react-native';
 import { InterRegular, InterSemiBold } from '../../utils/webFonts';
 import { Colors } from '../../utils/colors';
 import { useMediaQuery } from 'native-base';
@@ -150,7 +150,10 @@ const styles = StyleSheet.create({
 const overflowStyle = StyleSheet.create({
   overflow: {
     // @ts-ignore
-    overflow: 'auto',
+    overflow: Platform.select({
+      native: 'scroll',
+      default: 'auto',
+    }),
   },
 });
 
diff --git a/packages/app/src/components/modals/ApproveSwapModal.tsx b/packages/app/src/components/modals/ApproveSwapModal.tsx
index d31527a2..50e08544 100644
--- a/packages/app/src/components/modals/ApproveSwapModal.tsx
+++ b/packages/app/src/components/modals/ApproveSwapModal.tsx
@@ -1,4 +1,4 @@
-import { Modal, StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
+import { Modal, StyleSheet, Text, View, Image, TouchableOpacity, Platform } from 'react-native';
 import { InterRegular, InterSemiBold } from '../../utils/webFonts';
 import { Colors } from '../../utils/colors';
 import { modalStyles } from '../shared';
@@ -42,7 +42,10 @@ const styles = StyleSheet.create({
     maxWidth: '90%',
     maxHeight: '90%',
     // @ts-ignore
-    overflowY: 'auto',
+    overflowY: Platform.select({
+      native: 'scroll',
+      default: 'auto',
+    }),
     margin: 20,
     backgroundColor: Colors.blue[100],
     borderRadius: 20,
diff --git a/packages/app/src/components/modals/CompleteDonationModal.tsx b/packages/app/src/components/modals/CompleteDonationModal.tsx
index d8a00a17..9be5312b 100644
--- a/packages/app/src/components/modals/CompleteDonationModal.tsx
+++ b/packages/app/src/components/modals/CompleteDonationModal.tsx
@@ -1,4 +1,4 @@
-import { Modal, StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
+import { Modal, StyleSheet, Text, View, Image, TouchableOpacity, Platform } from 'react-native';
 import { InterRegular, InterSemiBold } from '../../utils/webFonts';
 import { Colors } from '../../utils/colors';
 import { modalStyles } from '../shared';
@@ -40,7 +40,10 @@ const styles = StyleSheet.create({
   modalView: {
     maxWidth: '90%',
     maxHeight: '90%',
-    overflowY: 'auto',
+    overflowY: Platform.select({
+      native: 'scroll',
+      default: 'auto',
+    }),
     margin: 20,
     backgroundColor: Colors.blue[100],
     borderRadius: 20,
diff --git a/packages/app/src/components/modals/ErrorModal.tsx b/packages/app/src/components/modals/ErrorModal.tsx
index ed26eb18..0aebe43c 100644
--- a/packages/app/src/components/modals/ErrorModal.tsx
+++ b/packages/app/src/components/modals/ErrorModal.tsx
@@ -1,4 +1,4 @@
-import { Modal, StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
+import { Modal, StyleSheet, Text, View, Image, TouchableOpacity, Platform } from 'react-native';
 import { InterRegular, InterSemiBold } from '../../utils/webFonts';
 import { Colors } from '../../utils/colors';
 import { CloseIcon, ThankYouImg } from '../../assets';
@@ -45,7 +45,10 @@ const styles = StyleSheet.create({
     maxWidth: '90%',
     maxHeight: '90%',
     // @ts-ignore
-    overflowY: 'auto',
+    overflowY: Platform.select({
+      native: 'scroll',
+      default: 'auto',
+    }),
     margin: 20,
     backgroundColor: Colors.blue[100],
     borderRadius: 20,
diff --git a/packages/app/src/components/modals/StopDonationModal.tsx b/packages/app/src/components/modals/StopDonationModal.tsx
index a64525c6..82be1c7a 100644
--- a/packages/app/src/components/modals/StopDonationModal.tsx
+++ b/packages/app/src/components/modals/StopDonationModal.tsx
@@ -1,4 +1,4 @@
-import { Modal, StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
+import { Modal, StyleSheet, Text, View, Image, TouchableOpacity, Platform } from 'react-native';
 import { InterRegular, InterSemiBold } from '../../utils/webFonts';
 import { Colors } from '../../utils/colors';
 import { QuestionImg } from '../../assets';
@@ -39,7 +39,10 @@ const styles = StyleSheet.create({
     maxWidth: '90%',
     maxHeight: '90%',
     // @ts-ignore
-    overflowY: 'auto',
+    overflowY: Platform.select({
+      native: 'scroll',
+      default: 'auto',
+    }),
     margin: 20,
     backgroundColor: Colors.blue[100],
     borderRadius: 20,
diff --git a/packages/app/src/components/modals/SwitchModal.tsx b/packages/app/src/components/modals/SwitchModal.tsx
index 914b0db4..3b2e3bd4 100644
--- a/packages/app/src/components/modals/SwitchModal.tsx
+++ b/packages/app/src/components/modals/SwitchModal.tsx
@@ -1,4 +1,4 @@
-import { Modal, StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
+import { Modal, StyleSheet, Text, View, Image, TouchableOpacity, Platform } from 'react-native';
 import { InterRegular, InterSemiBold } from '../../utils/webFonts';
 import { Colors } from '../../utils/colors';
 
@@ -43,7 +43,10 @@ const styles = StyleSheet.create({
     maxWidth: '90%',
     maxHeight: '90%',
     // @ts-ignore
-    overflowY: 'auto',
+    overflowY: Platform.select({
+      native: 'scroll',
+      default: 'auto',
+    }),
     margin: 20,
     backgroundColor: Colors.blue[100],
     borderRadius: 20,
diff --git a/packages/app/src/components/modals/ThankYouModal.tsx b/packages/app/src/components/modals/ThankYouModal.tsx
index d0e31d3b..3180723d 100644
--- a/packages/app/src/components/modals/ThankYouModal.tsx
+++ b/packages/app/src/components/modals/ThankYouModal.tsx
@@ -1,4 +1,4 @@
-import { Modal, StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
+import { Modal, StyleSheet, Text, View, Image, TouchableOpacity, Platform } from 'react-native';
 import { InterRegular, InterSemiBold } from '../../utils/webFonts';
 import { Colors } from '../../utils/colors';
 import { ThankYouImg } from '../../assets';
@@ -43,7 +43,10 @@ const styles = StyleSheet.create({
     maxWidth: '90%',
     maxHeight: '90%',
     // @ts-ignore
-    overflowY: 'auto',
+    overflowY: Platform.select({
+      native: 'scroll',
+      default: 'auto',
+    }),
     margin: 20,
     backgroundColor: Colors.blue[100],
     borderRadius: 20,