using Platform.select for valid web/native overflow properties

GoodDollar · Jan 26, 2024 · 6f1d3b2 · 6f1d3b2
1 parent 7398ca9
commit 6f1d3b2
Show file tree

Hide file tree

Showing 11 changed files with 55 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,