Fix rough edges on iOS Safari

components/image-carousel.tsx

@@ -71,7 +71,7 @@ const ImageCarousel = ({
       }
 
       {uuids !== undefined && uuids.length >= 2 &&
-        <Pressable onPressIn={goToPrevSlide} style={styles.leftPressable}>
+        <Pressable onPress={goToPrevSlide} style={styles.leftPressable}>
           {!isMobile() &&
             <View style={styles.leftButton}>
               <ChevronLeft
@@ -87,13 +87,13 @@ const ImageCarousel = ({
 
       {uuids !== undefined && uuids.length >= 1 &&
         <Pressable
-          onPressIn={() => onChangeEmbiggened(uuids[activeIndex])}
+          onPress={() => onChangeEmbiggened(uuids[activeIndex])}
           style={styles.middleButton}
         />
       }
 
       {uuids !== undefined && uuids.length >= 2 &&
-        <Pressable onPressIn={goToNextSlide} style={styles.rightPressable}>
+        <Pressable onPress={goToNextSlide} style={styles.rightPressable}>
           {!isMobile() &&
             <View style={styles.rightButton}>
               <ChevronRight
@@ -112,6 +112,7 @@ const ImageCarousel = ({
 
 const styles = StyleSheet.create({
   container: {
+    userSelect: 'none',
     width: '100%',
     aspectRatio: 1,
   },

components/pinchy.tsx

@@ -231,8 +231,7 @@ const Pinchy = ({uuid}: {uuid: string}) => {
 
   const panResponder = useRef(
     PanResponder.create({
-      onStartShouldSetPanResponder: () => true,
-      onMoveShouldSetPanResponder: () => true,
+      onStartShouldSetPanResponderCapture: (e) => (e.preventDefault(), true),
       onPanResponderGrant: handleSingleTap,
       onPanResponderMove: onPinchMove,
       onPanResponderRelease: onPinchEnd,
@@ -253,7 +252,7 @@ const Pinchy = ({uuid}: {uuid: string}) => {
   }, [viewportWidth, viewportHeight]);
 
   return (
-    <View style={styles.container}>
+    <View style={styles.container} pointerEvents="box-none">
       <FitWithinScreenImage
         {...panResponder.panHandlers}
         source={{ uri: `${IMAGES_URL}/original-${uuid}.jpg` }}
@@ -276,6 +275,7 @@ const Pinchy = ({uuid}: {uuid: string}) => {
 const styles = StyleSheet.create({
   container: {
     ...StyleSheet.absoluteFillObject,
+    touchAction: 'none',
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',

package.json

@@ -33,15 +33,15 @@
     "expo-clipboard": "~4.3.1",
     "expo-image-picker": "^14.3.2",
     "expo-linear-gradient": "^12.3.0",
-    "expo-screen-orientation": "^6.0.5",
+    "expo-screen-orientation": "~6.0.6",
     "expo-secure-store": "^12.3.1",
     "expo-splash-screen": "^0.20.5",
     "expo-status-bar": "^1.6.0",
     "lodash": "^4.17.21",
     "patch-package": "^6.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-native": "0.72.5",
+    "react-native": "0.72.6",
     "react-native-dropdown-picker": "^5.4.4",
     "react-native-feather": "^1.1.2",
     "react-native-svg": "^13.9.0",