Swipe

components/ListItem.tsx

@@ -1,45 +1,35 @@
 import React from 'react';
-
 import {
   View,
   StyleSheet,
   TouchableNativeFeedback,
   Platform,
-  type ViewStyle,
 } from 'react-native';
 
-import { PressableScale } from 'react-native-pressable-scale';
 import { useTheme, Text } from 'react-native-paper';
 import * as Haptics from 'expo-haptics';
-
 import { ChevronRight } from 'lucide-react-native';
 
 interface Props {
-  title?: string
-  subtitle?: string
-  underTitle?: string
-  left?: React.ReactElement
-  right?: React.ReactElement
-  /** Most likely an icon component from `lucide-react-native`. */
-  icon?: React.ReactElement
-  style?: ViewStyle
-  color: string
-  /** Add more space between `title` and `subtitle`. */
-  isLarge?: boolean
-  onPress?: () => unknown
-  onLongPress?: () => unknown
-  fill?: boolean
-  /** Should take all the width from the parent. */
-  width?: boolean
-  center?: boolean
-  chevron?: boolean
-  trimSubtitle?: boolean
-  bottom?: React.ReactElement
+  title?: string;
+  subtitle?: string;
+  underTitle?: string;
+  left?: React.ReactNode;
+  right?: React.ReactNode;
+  icon?: React.ReactNode;
+  style?: any;
+  color: string;
+  isLarge?: boolean;
+  onPress?: () => void;
+  onLongPress?: () => void;
+  fill?: boolean;
+  width?: boolean;
+  center?: boolean;
+  chevron?: boolean;
+  trimSubtitle?: boolean;
+  bottom?: React.ReactNode;
 }
 
-/**
- * @see https://i.imgur.com/rshTN7n.png
- */
 const ListItem: React.FC<Props> = ({
   title,
   subtitle,
@@ -68,7 +58,7 @@ const ListItem: React.FC<Props> = ({
     textColor = '#fff';
   }
 
-  const bgMaterial = theme.colors.elevation.level1;
+  const bgMaterial = theme.colors.elevation?.level1;
 
   function onPressActive() {
     onPress?.();
@@ -79,28 +69,101 @@ const ListItem: React.FC<Props> = ({
   if (!onPress) pressScale = 0.92;
 
   return Platform.OS === 'ios' ? (
-    <PressableScale
-      style={{ flex: 1 }}
-      weight="light"
-      activeScale={pressScale}
+    <View style={[styles.listItem, style]}>
+      <TouchableNativeFeedback
+        onPress={onPressActive}
+        onLongPress={onLongPress}
+        background={TouchableNativeFeedback.Ripple(
+          theme.colors.surfaceDisabled,
+          true
+        )}
+      >
+        <View
+          style={[
+            {
+              backgroundColor: bgColor,
+              borderColor: theme.dark ? '#191919' : '#e5e5e5',
+              marginHorizontal: width ? 0 : 14,
+              flex: width ? 1 : undefined,
+              alignItems: center ? 'center' : undefined,
+              flexDirection: 'row',
+              padding: 14,
+              borderRadius: 12,
+              borderWidth: 0,
+            },
+          ]}
+        >
+          {left && <View style={styles.left}>{left}</View>}
+          {icon && (
+            <View
+              style={[
+                styles.icon,
+                { backgroundColor: theme.dark ? '#ffffff10' : `${color}10` },
+              ]}
+            >
+              {icon}
+            </View>
+          )}
+          <View style={[styles.listItemText, { gap: isLarge ? 8 : 2 }]}>
+            {title && (
+              <Text style={[styles.listItemTextTitle, { color: textColor }]}>
+                {title}
+              </Text>
+            )}
+            {subtitle && (
+              <Text
+                style={[styles.listItemTextSubtitle, { color: textColor }]}
+                numberOfLines={trimSubtitle ? 1 : undefined}
+                ellipsizeMode="tail"
+              >
+                {subtitle}
+              </Text>
+            )}
+            {underTitle && (
+              <Text
+                style={[styles.listItemTextUnderTitle, { color: textColor }]}
+              >
+                {underTitle}
+              </Text>
+            )}
+          </View>
+          {right && <View style={styles.right}>{right}</View>}
+          {chevron && (
+            <View style={styles.right}>
+              <ChevronRight
+                size={24}
+                strokeWidth={2.5}
+                style={{ marginTop: -6, marginBottom: -6 }}
+                color={theme.dark ? '#ffffff40' : '#00000040'}
+              />
+            </View>
+          )}
+        </View>
+      </TouchableNativeFeedback>
+    </View>
+  ) : (
+    <TouchableNativeFeedback
       onPress={onPressActive}
-      onLongPress={() => onLongPress?.()}
+      onLongPress={onLongPress}
+      background={TouchableNativeFeedback.Ripple(
+        theme.colors.surfaceDisabled,
+        true
+      )}
     >
       <View
         style={[
-          styles.listItem,
+          styles.listItemContainer,
           {
-            backgroundColor: bgColor,
+            backgroundColor: bgMaterial,
             borderColor: theme.dark ? '#191919' : '#e5e5e5',
             marginHorizontal: width ? 0 : 14,
-            flex: width ? 1 : void 0,
-            alignItems: center ? 'center' : void 0,
+            flex: width ? 1 : undefined,
+            alignItems: center ? 'center' : undefined,
           },
           style,
         ]}
       >
         {left && <View style={styles.left}>{left}</View>}
-
         {icon && (
           <View
             style={[
@@ -111,33 +174,28 @@ const ListItem: React.FC<Props> = ({
             {icon}
           </View>
         )}
-
         <View style={[styles.listItemText, { gap: isLarge ? 8 : 2 }]}>
           {title && (
             <Text style={[styles.listItemTextTitle, { color: textColor }]}>
               {title}
             </Text>
           )}
-
           {subtitle && (
             <Text
               style={[styles.listItemTextSubtitle, { color: textColor }]}
-              numberOfLines={trimSubtitle ? 1 : void 0}
+              numberOfLines={trimSubtitle ? 1 : undefined}
               ellipsizeMode="tail"
             >
               {subtitle}
             </Text>
           )}
-
           {underTitle && (
             <Text style={[styles.listItemTextUnderTitle, { color: textColor }]}>
               {underTitle}
             </Text>
           )}
         </View>
-
         {right && <View style={styles.right}>{right}</View>}
-
         {chevron && (
           <View style={styles.right}>
             <ChevronRight
@@ -149,93 +207,24 @@ const ListItem: React.FC<Props> = ({
           </View>
         )}
       </View>
-    </PressableScale>
-  ) : (
-    <View
-      style={[
-        styles.listItemContainer,
-        { flex: 1, borderRadius: 10, overflow: 'hidden' },
-        {
-          backgroundColor: bgMaterial,
-          borderColor: theme.dark ? '#191919' : '#e5e5e5',
-          marginHorizontal: width ? 0 : 14,
-          flex: width ? 1 : void 0,
-          alignItems: center ? 'center' : void 0,
-        },
-        style,
-      ]}
-    >
-      <TouchableNativeFeedback
-        style={{ flex: 1, borderRadius: 12, overflow: 'hidden' }}
-        onPress={onPressActive}
-        onLongPress={() => onLongPress?.()}
-        background={TouchableNativeFeedback.Ripple(
-          theme.colors.surfaceDisabled,
-          true
-        )}
-      >
-        <View style={styles.listItemChild}>
-          {left && <View style={styles.left}>{left}</View>}
-
-          {icon && (
-            <View
-              style={[
-                styles.icon,
-                { backgroundColor: theme.dark ? '#ffffff10' : `${color}10` },
-              ]}
-            >
-              {icon}
-            </View>
-          )}
-
-          <View style={[styles.listItemText, { gap: isLarge ? 8 : 2 }]}>
-            {title && (
-              <Text style={[styles.listItemTextTitle, { color: textColor }]}>
-                {title}
-              </Text>
-            )}
-
-            {subtitle && (
-              <Text
-                style={[styles.listItemTextSubtitle, { color: textColor }]}
-                numberOfLines={trimSubtitle ? 1 : void 0}
-                ellipsizeMode="tail"
-              >
-                {subtitle}
-              </Text>
-            )}
-
-            {bottom && <View>{bottom}</View>}
-          </View>
-
-          {right && <View style={styles.right}>{right}</View>}
-        </View>
-      </TouchableNativeFeedback>
-    </View>
+    </TouchableNativeFeedback>
   );
 };
 
 const styles = StyleSheet.create({
   listItem: {
     flexDirection: 'row',
-
     padding: 14,
     marginHorizontal: 14,
-
     borderRadius: 12,
     borderCurve: 'continuous',
     borderWidth: 0,
   },
   listItemContainer: {
     marginHorizontal: 14,
-
     borderRadius: 10,
     borderWidth: 0,
   },
-  listItemChild: {
-    padding: 14,
-    flexDirection: 'row',
-  },
   listItemText: {
     gap: 2,
     flex: 1,
@@ -263,11 +252,9 @@ const styles = StyleSheet.create({
   },
   icon: {
     marginRight: 14,
-
     width: 38,
     height: 38,
     borderRadius: 30,
-
     justifyContent: 'center',
     alignItems: 'center',
   },

components/NativeItem.ios.tsx

@@ -1,22 +1,19 @@
-import React, { memo } from 'react';
-
-import { View, StyleSheet, Platform, type ViewStyle } from 'react-native';
-
+import React, { memo, ReactNode } from 'react';
+import { View, StyleSheet, Platform } from 'react-native';
 import { Cell } from 'react-native-tableview-simple';
 import { SFSymbol } from 'react-native-sfsymbols';
-
 import GetUIColors from '../utils/GetUIColors';
 
 interface Props {
-  children: React.ReactNode
-  leading?: React.ReactNode
-  trailing?: React.ReactNode
-  onPress?: () => unknown
-  chevron?: boolean
-  cellProps?: Partial<React.ComponentProps<typeof Cell>>
-  style?: ViewStyle
-  innerStyle?: ViewStyle
-  backgroundColor?: string
+  children: ReactNode;
+  leading?: ReactNode;
+  trailing?: ReactNode;
+  onPress?: (() => false | void) | undefined;
+  chevron?: boolean;
+  cellProps?: Partial<React.ComponentProps<typeof Cell>>;
+  style?: View['props']['style'];
+  innerStyle?: View['props']['style'];
+  backgroundColor?: string;
 }
 
 const NativeItem = memo(({
@@ -26,7 +23,7 @@ const NativeItem = memo(({
   onPress,
   chevron,
   backgroundColor,
-}) => {
+}: Props) => {
   const UIColors = GetUIColors();
 
   const cellImageView = leading && (
@@ -51,7 +48,7 @@ const NativeItem = memo(({
           weight="semibold"
           size={16}
           color={UIColors.text + '40'}
-          style={{marginRight: 4}}
+          style={{ marginRight: 4 }}
         />
       )}
     </View>