Merge branch 'main' into upload-profile-images

src/view/com/util/DropdownBtn.tsx

@@ -18,6 +18,8 @@ import {useStores} from '../../../state'
 import {ConfirmModel} from '../../../state/models/shell-ui'
 import {TABS_ENABLED} from '../../../build-flags'
 
+const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10}
+
 export interface DropdownItem {
   icon?: IconProp
   label: string
@@ -61,7 +63,11 @@ export function DropdownBtn({
   }
 
   return (
-    <TouchableOpacity style={style} onPress={onPress} ref={ref}>
+    <TouchableOpacity
+      style={style}
+      onPress={onPress}
+      hitSlop={HITSLOP}
+      ref={ref}>
       {children}
     </TouchableOpacity>
   )

src/view/com/util/LoadingPlaceholder.tsx

@@ -1,13 +1,5 @@
-import React, {useEffect, useMemo} from 'react'
-import {
-  Animated,
-  StyleSheet,
-  StyleProp,
-  useWindowDimensions,
-  View,
-  ViewStyle,
-} from 'react-native'
-import LinearGradient from 'react-native-linear-gradient'
+import React from 'react'
+import {StyleSheet, StyleProp, View, ViewStyle} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {UpIcon} from '../../lib/icons'
 import {s, colors} from '../../lib/styles'
@@ -21,31 +13,6 @@ export function LoadingPlaceholder({
   height: string | number
   style?: StyleProp<ViewStyle>
 }) {
-  const dim = useWindowDimensions()
-  const elWidth = typeof width === 'string' ? dim.width : width
-  const offset = useMemo(() => new Animated.Value(elWidth * -1), [])
-  useEffect(() => {
-    const anim = Animated.loop(
-      Animated.sequence([
-        Animated.timing(offset, {
-          toValue: elWidth,
-          duration: 1e3,
-          useNativeDriver: true,
-          isInteraction: false,
-        }),
-        Animated.timing(offset, {
-          toValue: elWidth * -1,
-          duration: 0,
-          delay: 500,
-          useNativeDriver: true,
-          isInteraction: false,
-        }),
-      ]),
-    )
-    anim.start()
-    return () => anim.stop()
-  }, [])
-
   return (
     <View
       style={[
@@ -58,19 +25,13 @@ export function LoadingPlaceholder({
         },
         style,
       ]}>
-      <Animated.View
+      <View
         style={{
           width,
           height,
-          transform: [{translateX: offset}],
-        }}>
-        <LinearGradient
-          colors={['#e7e9ea', '#e2e2e2', '#e7e9ea']}
-          start={{x: 0, y: 0}}
-          end={{x: 1, y: 0}}
-          style={{width: '100%', height: '100%'}}
-        />
-      </Animated.View>
+          backgroundColor: '#e7e9ea',
+        }}
+      />
     </View>
   )
 }

src/view/com/util/PostCtrls.tsx

@@ -25,6 +25,7 @@ interface PostCtrlsOpts {
 
 const redgray = '#7A6161'
 const sRedgray = {color: redgray}
+const HITSLOP = {top: 10, left: 10, bottom: 10, right: 10}
 
 export function PostCtrls(opts: PostCtrlsOpts) {
   const interp1 = useSharedValue<number>(0)
@@ -59,7 +60,10 @@ export function PostCtrls(opts: PostCtrlsOpts) {
   return (
     <View style={styles.ctrls}>
       <View style={s.flex1}>
-        <TouchableOpacity style={styles.ctrl} onPress={opts.onPressReply}>
+        <TouchableOpacity
+          style={styles.ctrl}
+          hitSlop={HITSLOP}
+          onPress={opts.onPressReply}>
           <FontAwesomeIcon
             style={styles.ctrlIcon}
             icon={['far', 'comment']}
@@ -72,6 +76,7 @@ export function PostCtrls(opts: PostCtrlsOpts) {
       </View>
       <View style={s.flex1}>
         <TouchableOpacity
+          hitSlop={HITSLOP}
           onPress={onPressToggleRepostWrapper}
           style={styles.ctrl}>
           <Animated.View style={anim1Style}>
@@ -98,6 +103,7 @@ export function PostCtrls(opts: PostCtrlsOpts) {
       <View style={s.flex1}>
         <TouchableOpacity
           style={styles.ctrl}
+          hitSlop={HITSLOP}
           onPress={onPressToggleUpvoteWrapper}>
           <Animated.View style={anim2Style}>
             {opts.isUpvoted ? (
@@ -137,7 +143,6 @@ const styles = StyleSheet.create({
   ctrl: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingRight: 4,
   },
   ctrlIcon: {
     color: redgray,

src/view/com/util/ViewHeader.tsx

@@ -5,6 +5,9 @@ import {colors} from '../../lib/styles'
 import {MagnifyingGlassIcon} from '../../lib/icons'
 import {useStores} from '../../../state'
 
+const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10}
+const BACK_HITSLOP = {left: 10, top: 10, right: 30, bottom: 10}
+
 export function ViewHeader({
   title,
   subtitle,
@@ -27,11 +30,14 @@ export function ViewHeader({
   return (
     <View style={styles.header}>
       {store.nav.tab.canGoBack ? (
-        <TouchableOpacity onPress={onPressBack} style={styles.backIcon}>
+        <TouchableOpacity
+          onPress={onPressBack}
+          hitSlop={BACK_HITSLOP}
+          style={styles.backIcon}>
           <FontAwesomeIcon size={18} icon="angle-left" style={{marginTop: 6}} />
         </TouchableOpacity>
       ) : undefined}
-      <View style={styles.titleContainer}>
+      <View style={styles.titleContainer} pointerEvents="none">
         <Text style={styles.title}>{title}</Text>
         {subtitle ? (
           <Text style={styles.subtitle} numberOfLines={1}>
@@ -39,11 +45,15 @@ export function ViewHeader({
           </Text>
         ) : undefined}
       </View>
-      <TouchableOpacity onPress={onPressCompose} style={styles.btn}>
+      <TouchableOpacity
+        onPress={onPressCompose}
+        hitSlop={HITSLOP}
+        style={styles.btn}>
         <FontAwesomeIcon size={18} icon="plus" />
       </TouchableOpacity>
       <TouchableOpacity
         onPress={onPressSearch}
+        hitSlop={HITSLOP}
         style={[styles.btn, {marginLeft: 8}]}>
         <MagnifyingGlassIcon
           size={18}

src/view/shell/mobile/index.tsx

@@ -47,8 +47,8 @@ import {
   BellIconSolid,
 } from '../../lib/icons'
 
-const SWIPE_GESTURE_DIST_TRIGGER = 0.4
-const SWIPE_GESTURE_VEL_TRIGGER = 2500
+const SWIPE_GESTURE_DIST_TRIGGER = 0.3
+const SWIPE_GESTURE_VEL_TRIGGER = 2000
 
 const Btn = ({
   icon,
@@ -195,6 +195,7 @@ export const MobileShell: React.FC = observer(() => {
   // =
   const goBack = () => store.nav.tab.goBack()
   const swipeGesture = Gesture.Pan()
+    .enabled(store.nav.tab.canGoBack)
     .onUpdate(e => {
       if (store.nav.tab.canGoBack) {
         swipeGestureInterp.value = Math.max(e.translationX / winDim.width, 0)