react-native#Pressable TypeScript Examples

renderSuggestions: (suggestions: Suggestion[]) => FC<MentionSuggestionsProps> = (suggestions) => (
  {keyword, onSuggestionPress},
) => {
  if (keyword == null) {
    return null;
  }

  return (
    <View>
      {suggestions
        .filter(one => one.name.toLocaleLowerCase().includes(keyword.toLocaleLowerCase()))
        .map(one => (
          <Pressable
            key={one.id}
            onPress={() => onSuggestionPress(one)}

            style={{padding: 12}}
          >
            <Text>{one.name}</Text>
          </Pressable>
        ))
      }
    </View>
  );
}

export default function App() {
  const [checked, setChecked] = useState<boolean>(false)

  const handleCheckboxPress = () => {
    setChecked(prev => {
      return !prev
    })
  }

  return (
    <View style={styles.container}>
      <Pressable onPress={handleCheckboxPress} style={styles.checkbox}>
        <AnimatedCheckbox
          checked={checked}
          highlightColor="#4444ff"
          checkmarkColor="#ffffff"
          boxOutlineColor="#4444ff"
        />
      </Pressable>
    </View>
  )
}

PressableTouch: React.FC<PressableTouchProps> = props => {
  const { rippleColor, disabled, onPress, children } = props;

  return (
    <Pressable
      onPress={onPress}
      disabled={disabled}
      style={({ pressed }) => [
        {
          backgroundColor:
            pressed && Platform.OS === 'ios' ? rippleColor : 'transparent',
        },
        styles.rippleStyle,
      ]}
      android_ripple={{ color: rippleColor }}
    >
      {children}
    </Pressable>
  );
}

function SelectActionButton() {
    const state = usePlaybackState();
    const defaultStyles = useDefaultStyles();

    switch(state) {
        case State.Playing:
            return (
                <Pressable onPress={TrackPlayer.pause}>
                    <PauseIcon fill={defaultStyles.text.color} height={18} width={18} />
                </Pressable>
            );
        case State.Stopped:
        case State.Paused:
            return (
                <Pressable onPress={TrackPlayer.play}>
                    <PlayIcon fill={defaultStyles.text.color} height={18} width={18} />
                </Pressable>
            );
        // @ts-expect-error For some reason buffering isn't stated right in the types
        case 'buffering':
        case State.Buffering:
        case State.Connecting:
            return (
                <Pressable onPress={TrackPlayer.stop}>
                    <ActivityIndicator />
                </Pressable>
            );
        default:
            return null;
    }
}

/**
 * This is a generic handler that accepts id as a prop, and return it when it is
 * pressed. This comes in handy with lists in which albums / tracks need to be selected.
 */
function TouchableHandler<T>({ 
    id,
    onPress,
    onLongPress,
    children
}: PropsWithChildren<TouchableHandlerProps<T>>): JSX.Element {
    const handlePress = useCallback(() => {
        return onPress(id);
    }, [id, onPress]);

    const handleLongPress = useCallback(() => {
        return onLongPress ? onLongPress(id) : undefined;
    }, [id, onLongPress]);

    return (
        <Pressable
            onPress={handlePress}
            onLongPress={handleLongPress}
            style={TouchableStyles}
        >
            {children}
        </Pressable>
    );
}

OnboardingCard: FC = () => {
  const { navigate } = useNavigation()
  const onboardingCompleted = useAppSelector(
    ({ onboarding }) => onboarding.introductionCompleted
  )

  if (onboardingCompleted) return null

  const startOnboarding = () => {
    navigate('Onboarding')
  }

  return (
    <Container>
      <TextContainer>
        <Title>ONBOARDING.HELLO</Title>
        <Text>ONBOARDING.PROMPT</Text>
      </TextContainer>
      <Pressable onPress={startOnboarding}>
        <CircleButton>
          <Arrow />
        </CircleButton>
      </Pressable>
    </Container>
  )
}

StyledPressable: React.FC<StyledPressableProps> = ({ children, pressableProps, ...rest }) => {
  const restyleProps = useRestyle(restyleFunctions, rest);

  return (
    <Pressable {...restyleProps} {...pressableProps}>
      {children}
    </Pressable>
  );
}

export default function Touchable({
  children,
  disabled,
  onPress,
  style,
  ...props
}: Props) {
  return (
    <Pressable
      onPress={onPress}
      disabled={disabled}
      hitSlop={8}
      style={({ pressed }) => {
        return [
          {
            opacity: pressed || disabled ? 0.75 : 1,
          },
          style,
        ];
      }}
      {...props}
    >
      {children}
    </Pressable>
  );
}

AccordionItem = ({
  Icon,
  icon,
  label,
  style,
  iconColor,
  theme,
  ...rest
}: Props) => {
  const { textStyles, viewStyles } = extractStyles(style);

  return (
    <Pressable style={[styles.container, viewStyles]} {...rest}>
      <View style={styles.row}>
        {icon ? (
          <Icon
            name={icon}
            size={24}
            color={iconColor || theme.colors.primary}
          />
        ) : null}
        <View style={[styles.item, styles.content]}>
          <Text selectable={false} style={textStyles}>
            {label}
          </Text>
        </View>
      </View>
    </Pressable>
  );
}

Card: React.FC<Props> = ({
  Icon,
  image = Config.cardImageUrl,
  title,
  subtitle,
  description,
  textCentered,
  icon,
  aspectRatio = 1.5,
  elevation = 2,
  style,
  onPress,
  onPressIcon,
  titleStyle,
  subtitleStyle,
  descriptionStyle,
  theme,
  children,
}) => {
  const {
    backgroundColor: bgColor,
    padding,
    ...styles
  } = StyleSheet.flatten(style || {});

  const backgroundColor = bgColor ? bgColor : theme.colors.surface;
  const innerPadding = padding ? padding : 12;

  return (
    <Surface style={[{ elevation, backgroundColor }, styles]}>
      <Pressable
        disabled={!onPress}
        onPress={onPress}
        style={({ pressed }) => {
          return [
            {
              opacity: pressed ? 0.8 : 1,
            },
          ];
        }}
      >
        <Image
          style={{ aspectRatio }}
          source={typeof image === "string" ? { uri: image } : image}
          resizeMode="cover"
        />
        <View style={{ padding: innerPadding }}>
          <View style={{ alignItems: textCentered ? "center" : "flex-start" }}>
            {title || (title && title !== "") ? (
              <Title text={title} style={titleStyle} />
            ) : null}
            {subtitle || (subtitle && subtitle !== "") ? (
              <Subtitle text={subtitle} style={subtitleStyle} />
            ) : null}
            {description || (description && description !== "") ? (
              <View style={{ marginTop: 4 }}>
                <Caption text={description} style={descriptionStyle} />
              </View>
            ) : null}
            {children}
          </View>
        </View>
        {icon ? (
          <TopRightCircleIcon Icon={Icon} icon={icon} onPress={onPressIcon} />
        ) : null}
      </Pressable>
    </Surface>
  );
}

CardInline: React.FC<Props> = ({
  image = Config.cardImageUrl,
  title,
  subtitle,
  aspectRatio = 1.5,
  elevation = 2,
  style,
  titleStyle,
  subtitleStyle,
  onPress,
}) => {
  const { alignItems, justifyContent, width, height } = StyleSheet.flatten(
    style || {}
  );
  const imageStyles = width && height ? { width, height } : { aspectRatio };
  return (
    <Surface style={[{ elevation }, style]}>
      <Pressable
        disabled={!onPress}
        onPress={onPress}
        style={({ pressed }) => {
          return [
            {
              opacity: pressed ? 0.8 : 1,
            },
          ];
        }}
      >
        <Image
          style={imageStyles}
          source={typeof image === "string" ? { uri: image } : image}
          resizeMode="cover"
        />
        <View style={[styles.overlay, { justifyContent, alignItems }]}>
          {title ? (
            <Title style={[{ color: "white" }, titleStyle]} text={title} />
          ) : null}
          {subtitle ? (
            <Subtitle
              style={[{ color: "rgba(255, 255, 255, 0.7)" }, subtitleStyle]}
              text={subtitle}
            />
          ) : null}
        </View>
      </Pressable>
    </Surface>
  );
}

FAB: React.FC<Props> = ({
  onPress,
  disabled,
  loading,
  iconName = "MaterialIcons/add",
  style,
  theme,
  iconColor,
  bgColor,
  size = 50,
  Icon,
  ...props
}) => {
  const backgroundColor = bgColor || theme.colors.primary;
  const color = iconColor || "#FFF";

  return (
    <View
      style={[
        {
          width: size,
          height: size,
          borderRadius: size / 2,
          overflow: "hidden",
        },
        style,
      ]}
    >
      <Pressable
        onPress={onPress}
        disabled={loading || disabled}
        android_ripple={{
          color: "#333",
          radius: size / 4,
        }}
        style={({ pressed }) => {
          return [
            styles.button,
            {
              opacity: pressed || disabled ? 0.75 : 1,
              width: size,
              height: size,
              borderRadius: size / 2,
              backgroundColor,
            },
          ];
        }}
        {...props}
      >
        <View>
          {loading ? (
            <ActivityIndicator
              style={size > 50 ? { marginTop: 2, marginLeft: 2 } : undefined}
              size={size <= 50 ? "small" : "large"}
              color={color}
            />
          ) : (
            <Icon name={iconName} size={size} color={color} />
          )}
        </View>
      </Pressable>
    </View>
  );
}

IconButton: React.FC<Props> = ({
  Icon,
  icon,
  color: customColor,
  size = 32,
  disabled = false,
  loading = false,
  onPress,
  theme,
  style,
  ...props
}) => {
  const iconColor = customColor || theme.colors.primary;

  return (
    <Pressable
      onPress={onPress}
      disabled={disabled || loading}
      style={({ pressed }) => {
        return [
          styles.container,
          {
            opacity: pressed || disabled ? 0.75 : 1,
            width: size,
            height: size,
            alignItems: "center",
            justifyContent: "center",
          },
          style,
        ];
      }}
      {...props}
    >
      <View>
        {icon && !loading ? (
          <Icon name={icon} size={size - 2} color={iconColor} />
        ) : null}
        {loading ? <ActivityIndicator size="small" color={iconColor} /> : null}
      </View>
    </Pressable>
  );
}

StarRating: React.FC<Props> = ({
  Icon,
  starSize = 16,
  maxStars = 5,
  rating = 0,
  defaultValue,
  isEditable = false,
  activeColor,
  inactiveColor,
  style,
  onPress,
  ...rest
}) => {
  const [localRating, setLocalRating] = React.useState<number>(
    rating || defaultValue || 0
  );

  React.useEffect(() => {
    if (rating != null) {
      setLocalRating(rating);
    }
  }, [rating]);

  React.useEffect(() => {
    if (defaultValue != null) {
      setLocalRating(defaultValue);
    }
  }, [defaultValue]);

  const ratingHandler = React.useCallback(
    (r) => {
      setLocalRating(r);
      !!onPress && onPress(r);
    },
    [onPress]
  );

  const ratingRounded = Math.round(localRating * 2) / 2;

  return (
    <View style={[styles.container, style]} {...rest}>
      {[...Array(maxStars)].map((_, i) => (
        <View key={i} style={{ display: "flex" }}>
          <Icon
            name={
              ratingRounded - i === 0.5
                ? "MaterialIcons/star-half"
                : "MaterialIcons/star"
            }
            size={starSize}
            color={ratingRounded > i ? activeColor : inactiveColor}
          />
          {isEditable && (
            <View style={styles.touchContainer}>
              <Pressable
                style={styles.pressable}
                onPress={() => ratingHandler(i + 0.5)}
              />
              <Pressable
                style={styles.pressable}
                onPress={() => ratingHandler(i + 1)}
              />
            </View>
          )}
        </View>
      ))}
    </View>
  );
}

TopRightCircleIcon = withTheme(
  ({
    Icon,
    icon,
    theme,
    onPress,
  }: {
    icon: string;
    theme: Theme;
    onPress?: () => void;
  } & IconSlot) => {
    return (
      <Surface
        style={{
          justifyContent: "center",
          alignItems: "center",
          elevation: ICON_ELEVATION,
          position: "absolute",
          top: 12,
          right: 12,
          width: ICON_CONTAINER_SIZE,
          height: ICON_CONTAINER_SIZE,
          padding: ICON_CONTAINER_PADDING,
          borderRadius: ICON_CONTAINER_SIZE,
          backgroundColor: "rgba(0, 0, 0, 0.1)",
        }}
      >
        <Pressable
          disabled={!onPress}
          onPress={onPress}
          style={({ pressed }) => {
            return [
              {
                opacity: pressed ? 0.8 : 1,
              },
            ];
          }}
        >
          <Icon name={icon} size={ICON_SIZE} color={theme.colors.surface} />
        </Pressable>
      </Surface>
    );
  }
)

NumberPad: React.FC<INumberPadProps> = ({
  isLogin,
  onNumberPress,
  onDeletePress,
  onForgotPress,
}) => {
  const numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
  const renderNumbers = () => {
    return numbers.map((num, index) => {
      const isMiddleV = num === '2' || num === '5' || num === '8';
      const isMiddleH = num === '4' || num === '5' || num === '6';
      return (
        <Pressable
          key={index}
          android_ripple={{ radius: 40, borderless: true }}
          onPress={() => onNumberPress(num)}
          style={[
            NumberPadStyle.number,
            {
              marginHorizontal: isMiddleV ? spacing.mH : 0,
              marginVertical: isMiddleH ? spacing.sH : 0,
            },
          ]}
        >
          <StyledText variant="h1">{num}</StyledText>
        </Pressable>
      );
    });
  };

  return (
    <Box
      flexDirection="row"
      alignItems="center"
      justifyContent="space-between"
      height={384}
      flexWrap="wrap"
      style={NumberPadStyle.container}
    >
      {renderNumbers()}
      <Box
        width="100%"
        flexDirection="row"
        alignItems="center"
        justifyContent={isLogin ? 'space-between' : 'flex-end'}
        position="relative"
        style={NumberPadStyle.bottomSectionContainer}
      >
        {isLogin && onForgotPress && (
          <PressableText
            label="Forgot?"
            variant="sublime"
            color="midnightBlue"
            onPress={onForgotPress}
          />
        )}
        <Box position="absolute" left={0} right={0} alignItems="center">
          <Pressable
            android_ripple={{ radius: 40, borderless: true }}
            style={NumberPadStyle.number}
            onPress={() => onNumberPress('0')}
          >
            <StyledText variant="h1">0</StyledText>
          </Pressable>
        </Box>
        <IconButton
          icon="delete"
          color="midnightBlue"
          onPress={onDeletePress}
          accessibilityLabel="delete"
          iconWidth="35"
          iconHeight="35"
        />
      </Box>
    </Box>
  );
}

PressableText: React.FC<IPressableTextProps> = ({ onPress, label, ...rest }) => {
  const restyleProps = useRestyle([color, typography], rest);
  return (
    <Pressable android_ripple={{ radius: 500 }} {...{ onPress }} style={{ padding: 5 }}>
      <StyledText {...restyleProps}>{label}</StyledText>
    </Pressable>
  );
}

function Base({
  Icon,
  icon,
  title,
  onPress,
  loading,
  disabled,
  style,
  ...props
}: BaseProps): JSX.Element {
  const {
    color,
    fontFamily,
    fontWeight,
    fontSize,
    lineHeight,
    letterSpacing,
    textTransform,
    textAlign,
    textDecorationLine,
    textDecorationColor,
    textDecorationStyle,
    ...buttonStyles
  } = StyleSheet.flatten(style || ({} as TextStyle));

  const titleStyles: TextStyle = {
    color,
    fontFamily,
    fontWeight,
    fontSize,
    lineHeight,
    letterSpacing,
    textTransform,
    textAlign,
    textDecorationLine,
    textDecorationColor,
    textDecorationStyle,
  };

  if (textAlign === "left") {
    buttonStyles.justifyContent = "flex-start";
  }

  if (textAlign === "right") {
    buttonStyles.justifyContent = "flex-end";
  }

  return (
    <Pressable
      onPress={onPress}
      disabled={disabled || loading}
      style={({ pressed }) => {
        return [
          styles.base,
          {
            opacity: pressed || disabled ? 0.75 : 1,
          },
          buttonStyles,
        ];
      }}
      {...props}
    >
      {loading ? (
        <ActivityIndicator size="small" color={color} style={styles.loading} />
      ) : null}
      {icon && !loading ? (
        <Icon
          name={icon}
          color={color as string}
          style={styles.icon}
          size={CONSTANTS.icon}
        />
      ) : null}
      <Text style={titleStyles}>{title}</Text>
    </Pressable>
  );
}

AccordionGroup = ({
  label,
  expanded: expandedProp = false,
  openColor,
  closedColor,
  caretColor: caretColorProp,
  caretSize = 24,
  icon,
  iconSize = 24,
  style,
  children,
  theme,
  Icon,
}: AccordionGroupProps) => {
  const [expanded, setExpanded] = React.useState<boolean>(expandedProp);
  const { textStyles, viewStyles } = extractStyles(style);
  const expandedColor = openColor || theme.colors.primary;
  const collapsedColor = closedColor || theme.colors.primary;
  const labelColor = expanded ? expandedColor : collapsedColor;
  const caretColor = caretColorProp || labelColor;

  const handlePressAction = () => {
    setExpanded(!expanded);
  };

  return (
    <>
      <Pressable
        style={[styles.row, viewStyles]}
        onPress={handlePressAction}
        accessibilityRole="button"
      >
        {icon ? (
          <Icon
            name={icon}
            size={iconSize}
            color={labelColor}
            style={styles.icon}
          />
        ) : null}
        <View style={styles.content}>
          <Text
            selectable={false}
            style={[
              textStyles,
              {
                color: labelColor,
              },
            ]}
          >
            {label}
          </Text>
        </View>
        <Icon
          name={
            expanded
              ? "MaterialIcons/keyboard-arrow-up"
              : "MaterialIcons/keyboard-arrow-down"
          }
          color={caretColor}
          size={caretSize}
        />
      </Pressable>
      {expanded ? children : null}
    </>
  );
}

ActionButton = styled.Pressable`
    margin-right: 8px;
`

DateRangePicker = ({
  onSelectDateRange,
  responseFormat,
  maxDate,
  minDate,
  blockSingleDateSelection,
  font,
  selectedDateContainerStyle,
  selectedDateStyle,
  ln = "en",
}: IProps) => {
  const [selectedDate, setSelectedDate] = useState(moment());

  const [firstDate, setFirstDate] = useState<moment.Moment | null>(null);
  const [secondDate, setSecondDate] = useState<moment.Moment | null>(null);

  const lastMonth = selectedDate.clone().subtract(1, "months");
  const lastYear = selectedDate.clone().subtract(1, "years");
  const nextMonth = selectedDate.clone().add(1, "months");
  const nextYear = selectedDate.clone().add(1, "years");

  moment.locale(ln);

  const returnSelectedRange = (fd: moment.Moment, ld: moment.Moment) => {
    const isWrongSide = ld?.isBefore(fd);

    if (responseFormat) {
      onSelectDateRange({
        firstDate: isWrongSide
          ? ld.format(responseFormat)
          : fd.format(responseFormat),
        secondDate: isWrongSide
          ? fd.format(responseFormat)
          : ld.format(responseFormat),
      });
    } else {
      onSelectDateRange({
        firstDate: isWrongSide ? ld : fd,
        secondDate: isWrongSide ? fd : ld,
      });
    }
  };

  const onSelectDate = (date: moment.Moment) => {
    if (
      blockSingleDateSelection &&
      (firstDate?.isSame(date, "dates") || secondDate?.isSame(date, "dates"))
    ) {
      return;
    }

    if (!firstDate) {
      setFirstDate(date);
    } else {
      if (!secondDate) {
        setSecondDate(date);
        returnSelectedRange(firstDate, date);
      } else {
        setFirstDate(secondDate);
        setSecondDate(date);
        returnSelectedRange(secondDate, date);
      }
    }
  };

  const onPressClear = () => {
    setFirstDate(null);
    setSecondDate(null);
    onSelectDateRange({
      firstDate: "",
      secondDate: "",
    });
  };

  const isDateSelected = () => firstDate === null || secondDate === null;

  return (
    <View>
      <View style={styles.titleRow}>
        <Button
          font={font}
          disabled={minDate ? lastYear.isBefore(minDate, "months") : false}
          label={`< ${lastYear.format("YYYY")}`}
          onPress={() => setSelectedDate(lastYear)}
        />
        <Text style={{ ...styles.title, fontFamily: font }}>
          {selectedDate.format("YYYY")}
        </Text>
        <Button
          font={font}
          disabled={maxDate ? nextYear.isAfter(maxDate, "months") : false}
          label={`${nextYear.format("YYYY")} >`}
          onPress={() => setSelectedDate(nextYear)}
          align="right"
        />
      </View>

      <View style={styles.titleRow}>
        <Button
          font={font}
          disabled={minDate ? lastMonth.isBefore(minDate, "months") : false}
          label={`< ${lastMonth.locale(ln).format("MMM")}`}
          onPress={() => setSelectedDate(lastMonth)}
        />
        <Text style={{ ...styles.title, fontFamily: font }}>
          {selectedDate.locale(ln).format("MMMM")}
        </Text>
        <Button
          font={font}
          disabled={maxDate ? nextMonth.isAfter(maxDate, "months") : false}
          label={`${nextMonth.locale(ln).format("MMM")} >`}
          onPress={() => setSelectedDate(nextMonth)}
          align="right"
        />
      </View>
      <Month
        font={font}
        selectedDate={selectedDate}
        onSelectDate={onSelectDate}
        firstDate={firstDate}
        secondDate={secondDate}
        maxDate={maxDate}
        minDate={minDate}
        selectedDateContainerStyle={selectedDateContainerStyle}
        selectedDateStyle={selectedDateStyle}
      />
      <View style={styles.clearContainer}>
        <Pressable
          disabled={isDateSelected()}
          onPress={onPressClear}
          style={[styles.clearBtn, { opacity: isDateSelected() ? 0.3 : 1 }]}
        >
          <Text style={{ fontFamily: font }}>Clear</Text>
        </Pressable>
      </View>
    </View>
  );
}

ListItem: FC<LIProps> = props => {
  // console.log('props', props);

  const {title, description, syntax, index, setInputValue, bottomSheetRef} =
    props;

  const [currentIndex, setCurrentIndex] = useState<number | null>(null);
  const styles = useDynamicValue(dynamicStyles);

  const isDark = useDarkMode();

  const onItemPress = (index: number | null) => {
    setCurrentIndex(index === currentIndex ? null : index);
    Keyboard.dismiss();
    LayoutAnimation.configureNext(
      LayoutAnimation.create(
        150,
        LayoutAnimation.Types.easeInEaseOut,
        LayoutAnimation.Properties.opacity,
      ),
    );
  };

  const onSyntaxPress = (syntax: string) => {
    setInputValue(syntax);
    bottomSheetRef.current?.close();
  };
  return (
    <Pressable testID={ids.commandListItem} onPress={() => onItemPress(index)}>
      <View style={styles.item}>
        <View style={styles.header}>
          <Text style={styles.title}>{title}</Text>
          <Icon
            name="arrow-drop-down"
            color={'gray'}
            size={36}
            style={styles.dropDownIcon}
          />
        </View>

        <Text style={styles.description}>{description}</Text>
        {index === currentIndex && (
          <>
            {/* <Text style={styles.syntaxHeader}>Syntax</Text> */}
            <Pressable
              style={styles.codeSyntaxContainer}
              accessibilityLabel={syntax}
              accessibilityHint="copy syntax to command input"
              onPress={() => onSyntaxPress(syntax)}
            >
              <SyntaxHighlighter
                PreTag={View}
                fontSize={14}
                language="sql"
                wrapLines={true}
                style={isDark ? vs2015 : defaultStyle}
                highlighter="hljs"
              >
                {syntax}
              </SyntaxHighlighter>
            </Pressable>
            {props?.example && (
              <Text style={styles.syntaxHeader}>Examples</Text>
            )}
            {props?.example &&
              props.example.map((eg, i) => (
                <Pressable
                  key={i}
                  accessibilityHint="copy example to the command input"
                  accessibilityLabel={eg}
                  style={styles.codeSyntaxContainer}
                  testID={ids.commandListExample}
                  onPress={() => onSyntaxPress(eg)}
                >
                  {/* <ScrollView */}
                  {/*   horizontal */}
                  {/*   directionalLockEnabled */}
                  {/*   automaticallyAdjustContentInsets={false} */}
                  {/*   disableScrollViewPanResponder */}
                  {/* > */}
                  <SyntaxHighlighter
                    fontSize={14}
                    language="sql"
                    wrapLines={true}
                    PreTag={View}
                    style={isDark ? vs2015 : defaultStyle}
                    highlighter="hljs"
                  >
                    {eg}
                  </SyntaxHighlighter>
                  {/* </ScrollView> */}
                </Pressable>
              ))}
          </>
        )}
      </View>
    </Pressable>
  );
}