react-native#TouchableHighlight TypeScript Examples

ECardScreen = () => {
	const content = (
		<View
			style={{
				padding: 8,
				paddingRight: 16,
				flexDirection: "row",
				justifyContent: "space-between",
			}}>
			<View style={{flexDirection: "row", alignItems: "center"}}>
				<Feather name="credit-card" size={16} color="red" />
				<Text style={{fontSize: 17, marginHorizontal: 10, color: "red"}}>
					{getStr("loseCard")}
				</Text>
			</View>
			<Icon name="angle-right" size={24} color="red" />
		</View>
	);
	return (
		<View style={{padding: 10}}>
			{Platform.OS === "ios" ? (
				<TouchableHighlight underlayColor="#F002" onPress={performLoseCard}>
					{content}
				</TouchableHighlight>
			) : (
				<TouchableNativeFeedback
					background={TouchableNativeFeedback.Ripple("#F002", false)}
					onPress={performLoseCard}>
					{content}
				</TouchableNativeFeedback>
			)}
		</View>
	);
}

TouchableRipple = ({
  children,
  disabled = false,
  onPress,
  testID = 'touchable-ripple',
  style,
  color = 'highlight'
}: TouchableRippleProps) => {
  const theme = useTheme()

  const getColor = () => getColorByName(theme, color)

  return (
    <TouchableHighlight
      style={style}
      underlayColor={buildColorWithOpacity(getColor, getOpacityMedium, theme)}
      disabled={disabled}
      onPress={onPress}
      testID={testID}
    >
      {children}
    </TouchableHighlight>
  )
}

LoggedOut: FunctionComponent = () => {
  return (
    <View style={styles.content}>
      <View style={styles.greeting}>
        <Text style={styles.userLabel}>Welcome to Soid Health</Text>
      </View>
      <TouchableHighlight
        style={styles.button}
        underlayColor={Color.HighlightSelected}
        onPress={logIn}
      >
        <Text style={styles.label}>Sign in with Solid</Text>
      </TouchableHighlight>
    </View>
  );
}

DataSetPreview: FunctionComponent<DataSetPreviewProps> = ({
  label,
  labelColor = Color.TextDark,
  getDisplayValue,
  onPress,
}) => {
  const [value, setValue] = useState<string>('Loading...');

  useEffect(() => {
    getDisplayValue()
      .then(setValue)
      .catch(err => {
        console.warn(err);
        setValue('Error');
      })
  }, []);

  return (
    <TouchableHighlight
      style={styles.container}
      underlayColor={Color.BackgroundSelected}
      onPress={onPress}
    >
      <>
        <Text style={[styles.value, { color: labelColor }]}>
          {value}
        </Text>
        <Text style={[styles.label, { color: labelColor }]}>
          {label}
        </Text>
      </>
    </TouchableHighlight>
  );
}

export default function StaticButton({
  label,
  labelTextStyle = {
    color: 'white',
    fontSize: Buttons.FONT_SIZE,
  },
  backgroundColor = Colors.BLUE.toString(),
  underlayColor = Colors.BLUE.lighten(-20),
  disabled,
  onPress,
}: Props) {
  return (
    <View style={[styles.container, { shadowColor: backgroundColor }]}>
      <TouchableHighlight
        style={[styles.rectButton, { backgroundColor }]}
        activeOpacity={1}
        underlayColor={underlayColor}
        onPress={onPress}
        disabled={disabled}>
        <View>
          <Text style={labelTextStyle}>{label}</Text>
        </View>
      </TouchableHighlight>
    </View>
  );
}

Button : FC<ButtonProps> = props => {
    const { effect = 'none', style, children, ...rest } = props;

    const computeType = (touchableEffect : string) => {
        switch (touchableEffect) {
            case 'opacity':
                return TouchableOpacity;

            case 'highlight':
                return TouchableHighlight;

            case 'native':
                return TouchableNativeFeedback;

            case 'none':
            default:
                return TouchableWithoutFeedback;
        }
    }

    const Touchable = computeType(effect);
    return (
        <Touchable style={[{ borderRadius : 6, padding : 10 }, style]} {...rest}>
            {children}
        </Touchable>
    );
}

SheetContentsContainer = ({children, isExpanded, toggleExpanded}: ContentProps) => {
  const [i18n] = useI18n();
  const [systemStatus] = useSystemStatus();
  const content = (
    <Box backgroundColor="overlayBackground" minHeight="100%">
      <Box marginTop="l">{children}</Box>
    </Box>
  );

  return (
    <TouchableHighlight
      disabled={isExpanded}
      onPress={toggleExpanded}
      accessibilityRole="button"
      accessibilityLabel={
        systemStatus === SystemStatus.Active
          ? i18n.translate('BottomSheet.OnStatus')
          : i18n.translate('BottomSheet.OffStatus')
      }
    >
      {content}
    </TouchableHighlight>
  );
}

SettingsMiddleText = ({
	text,
	onPress,
}: {
	text: string;
	onPress: (event: GestureResponderEvent) => void;
}) => {
	const themeName = useColorScheme();
	const {colors} = themes(themeName);
	const content = (
		<View
			style={{
				padding: 8,
				alignItems: "center",
			}}>
			<Text style={{color: colors.text}}>{text}</Text>
		</View>
	);
	return Platform.OS === "ios" ? (
		<TouchableHighlight underlayColor="#0002" onPress={onPress}>
			{content}
		</TouchableHighlight>
	) : (
		<TouchableNativeFeedback
			background={TouchableNativeFeedback.Ripple("#0002", false)}
			onPress={onPress}>
			{content}
		</TouchableNativeFeedback>
	);
}

BranchItem = ({
	name,
	onPress,
}: {
	name: string;
	onPress: (event: GestureResponderEvent) => void;
}) => {
	const themeName = useColorScheme();
	const {colors} = themes(themeName);
	const content = (
		<View
			style={{
				padding: 8,
				paddingRight: 16,
				flexDirection: "row",
				justifyContent: "space-between",
			}}>
			<Text style={{fontSize: 17, marginHorizontal: 10, color: colors.text}}>
				{name}
			</Text>
		</View>
	);
	return Platform.OS === "ios" ? (
		<TouchableHighlight underlayColor="#0002" onPress={onPress}>
			{content}
		</TouchableHighlight>
	) : (
		<TouchableNativeFeedback
			background={TouchableNativeFeedback.Ripple("#0002", false)}
			onPress={onPress}>
			{content}
		</TouchableNativeFeedback>
	);
}

export default function Touchable({
  refView,
  touchableType = 'opacity',
  activeOpacity = 0.75,
  style,
  children,
  ...props
}: TouchableProps) {
  switch (touchableType) {
    case 'opacity':
      return (
        <TouchableOpacity
          {...props}
          style={style}
          activeOpacity={activeOpacity}>
          {children}
        </TouchableOpacity>
      );
    case 'highlight':
      return (
        <TouchableHighlight {...props} activeOpacity={activeOpacity}>
          <View ref={refView} style={style}>
            {children}
          </View>
        </TouchableHighlight>
      );
    default:
      return (
        <TouchableWithoutFeedback {...props}>
          <View ref={refView} style={style}>
            {children}
          </View>
        </TouchableWithoutFeedback>
      );
  }
}

render() {
        const { disabled, style, width, height } = this.props;

        return (
            <TouchableHighlight
                style={[ styles.button, style ]}
                onPress={this._onPressHandler}
                underlayColor="transparent"
                activeOpacity={1}
                disabled={disabled}
            >
                <View style={[styles.bgImage, { width: width, height: height }]}>
                    <Images.bottomAddNewStory width={55} height={55} />
                </View>
            </TouchableHighlight>
        );
    }

render() {
        const { type, style, title } = this.props;
        const icon = this._getIconPath(type);

        // TODO: implement svg usage
        return (
            <TouchableHighlight
                style={[styles.container, style ]}
                underlayColor="transparent"
                onPress={this._onPressHandler}
            >
                <>
                    <View style={styles.iconWrap}>
                        <Image style={styles.icon} source={icon} />
                    </View>
                    <Text style={[TextStyles.labelSmall, { textTransform: 'uppercase' }]}>{title}</Text>
                </>
            </TouchableHighlight>
        );
    }

render() {
        const { disabled, title, style, titleStyles, withBorder, underlayColor, isTransparent, buttonForm } = this.props;
        const btnUnderlayColor = () => {
            if (isTransparent) {
                return Colors.borderColor;
            }
            if (buttonForm) {
                return Colors.button.buttonForm.underlay;
            }
            return Colors.button.defaultUnderlayColor;
        };

        return (
            <TouchableHighlight
                style={[ styles.button, disabled && styles.disabledButton, withBorder && styles.withBorder, isTransparent && styles.buttonTransparent, buttonForm && styles.buttonForm, style ]}
                onPress={this._onPressHandler}
                underlayColor={underlayColor ? underlayColor : btnUnderlayColor()}
                activeOpacity={1}
                disabled={disabled}
            >
                { title
                    ? <Text style={[TextStyles.btnTitle, disabled && styles.disabledText, isTransparent ? { color: Colors.button.transparentText } : {}, buttonForm && styles.buttonFormText, titleStyles]}>
                        {title}
                    </Text>
                    : <>{this.props.children}</>
                }
            </TouchableHighlight>
        );
    }

export default function SelectItem(props: Props) {
    const { title, onPress, isActive } = props;

    const onSelectClick = () => {
        onPress();
    };

    return (
        <TouchableHighlight
            style={[styles.selectItem, isActive ? { borderColor: Colors.selectItem.activeBorder , backgroundColor: Colors.selectItem.activeBg } : null]}
            onPress={onSelectClick}
            underlayColor={'transparent'}
        >
            <Text style={[TextStyles.p2, isActive ? { color: Colors.selectItem.activeText } : null]}>{title}</Text>
        </TouchableHighlight>
    );
}

export default function Card(props: CardProps) {
    const { title, description, onPress, Image, children, numberOfLines, style, underlayColor } = props;

    return (
        <TouchableHighlight style={[BaseStyles.card, style]} onPress={onPress} activeOpacity={1} underlayColor={underlayColor ? Colors.card.underlay.primary : Colors.card.underlay.secondary}>
            <View style={BaseStyles.cardContainer}>
                {Image ? <Image width={20} height={20} style={BaseStyles.cardImage} /> : null}
                <View style={BaseStyles.cardTextBlock}>
                    <Text style={BaseStyles.cardTitle}>{title}</Text>
                    <Text style={{...TextStyles.p3, lineHeight: 16, color: Colors.card.description}} lineBreakMode="tail" numberOfLines={numberOfLines || 1}>{description}</Text>
                </View>
                {children}
            </View>
        </TouchableHighlight>
    );
}

export default function RadioButton(props: RadioButtonProps) {
    const { label, checked, index, onClick } = props;

    const _onClick = React.useCallback(() => {
        onClick(index);
    }, [index]);

    return (
        <TouchableHighlight style={styles.radioButton} onPress={_onClick} underlayColor={'transparent'}>
            <>
                <Text style={[TextStyles.p3, styles.label]}>{label}</Text>
                <View style={[styles.iconWrap, checked ? styles.checked : null ]}>
                    {checked && <Images.radioChecked width={8} height={6} />}
                </View>
            </>
        </TouchableHighlight>
    );
}

UpdateProfileButton = ({ width, style, onChange }) => {
  const navigation = useNavigation()
  const [data] = useApplicationState()
  const daySinceCreated = moment().diff(data.createdDate, 'days')
  const daySinceUpdated = moment().diff(data.updateProfileDate, 'days')
  const isLock = !(
    daySinceCreated < START_PERIODS || daySinceUpdated >= DEFAULT_PERIODS
  )

  return (
    <TouchableHighlight
      hitSlop={{ top: 48, left: 48, right: 24, bottom: 24 }}
      activeOpacity={0.6}
      underlayColor="#DDDDDD"
      onPress={() => {
        if (isLock) {
          const day = DEFAULT_PERIODS - daySinceUpdated
          Alert.alert(
            I18n.t('can_not_change_picture'),
            'คุณจะสามารถเปลี่ยนรูปได้อีกใน ' + day + I18n.t('day_s'),
          )
        } else {
          navigation.navigate('MainAppFaceCamera', {
            setUri: uri => {
              if (daySinceCreated >= 3) {
                Alert.alert(
                  I18n.t('are_you_sure'),
                  `I18n.t('after_changed_pic_you_will_not_be_able_to_change_until') ${DEFAULT_PERIODS} I18n.t('day_s_have_passed')`,
                  [
                    { text: I18n.t('cancel'), style: 'cancel' },
                    {
                      text: I18n.t('confirm'),
                      onPress: () => {
                        onChange(uri)
                      },
                    },
                  ],
                )
              } else {
                onChange(uri)
              }
            },
          })
        }
      }}
      style={[
        styles.container,
        {
          width: width,
          height: width,
          borderRadius: Math.floor(width / 2),
        },
        style,
      ]}
    >
      <FeatureIcon
        name={isLock ? 'lock' : 'camera'}
        size={Math.floor((60 / 100) * width)}
      />
    </TouchableHighlight>
  )
}

FlutterwaveButton: React.FC<
  FlutterwaveButtonProps
> = function FlutterwaveButton({
  style,
  alignLeft,
  children,
  disabled,
  onPress
}) {
  // render primary button
  return (
    <TouchableHighlight
      underlayColor={colors.primaryLight}
      disabled={disabled}
      onPress={onPress}
      style={[
        styles.button,
        disabled ? styles.buttonBusy : {},
        alignLeft ? styles.buttonAlignLeft : {},
        style
      ]}
      activeOpacity={1}
      testID='flw-button'>
        <>
          {children ? children : (
            <Image
              source={pryContent}
              resizeMode="contain"
              resizeMethod="resize"
              style={styles.buttonContent}
              fadeDuration={0}
            />
          )}
          {disabled
            ? (<View style={styles.buttonBusyOvelay} />)
            : null}
        </>
    </TouchableHighlight>
  );
}

LoggedIn: FunctionComponent<LoggedInProps> = ({ componentId, webId }) => {
  const profile = useProfile();
  
  let message;
  if (profile == null) {
    message = 'Loading...';
  } else if (profile.name) {
    message = profile.name;
  } else {
    message = 'Welcome';
  }

  return (
    <View style={styles.content}>
      <View style={styles.greeting}>
        <View style={styles.imageContainer}>
          {profile == null || profile.image == null ?
            <View style={styles.centered}>
              <Text style={styles.noImage}>?</Text>
            </View>
          :
            <Image source={{ uri: profile.image }} style={styles.image} />
          }
        </View>
        <Text style={styles.userLabel} numberOfLines={1}>{message}</Text>
        <Text style={styles.webId} numberOfLines={1}>{webId}</Text>
      </View>
      <TouchableHighlight
        style={styles.button}
        underlayColor={Color.HighlightSelected}
        disabled={profile == null}
        onPress={() => openDataScreen(componentId)}
      >
        <Text style={styles.label}>View Data</Text>
      </TouchableHighlight>
      <TouchableHighlight
        style={styles.button}
        underlayColor={Color.HighlightSelected}
        onPress={logOut}
      >
        <Text style={styles.label}>Sign out</Text>
      </TouchableHighlight>
    </View>
  );
}

ChangeLanguageScreen = () => {
  const navigation = useNavigation()
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={styles.header}>
        <Text style={styles.title}>{I18n.t('change_lang')} </Text>
      </View>
      <View style={styles.content}>
        <TouchableHighlight
          onPress={async () => {
            changeLangTo('th')
          }}
        >
          <View style={styles.section}>
            <Text style={styles.sectionText}>ไทย</Text>
          </View>
        </TouchableHighlight>
        <TouchableHighlight
          onPress={async () => {
            changeLangTo('en')
          }}
        >
          <View style={styles.section}>
            <Text style={styles.sectionText}>English</Text>
          </View>
        </TouchableHighlight>
      </View>
      <View style={styles.footer}>
        <PrimaryButton
          title={I18n.t('close')}
          style={{ width: '100%' }}
          containerStyle={{ width: '100%' }}
          onPress={() => {
            navigation.pop()
          }}
        />
      </View>
    </SafeAreaView>
  )
}

UpdateProfileButton = ({ width, style, onChange }) => {
  const navigation = useNavigation()
  const [data] = useApplicationState()
  const daySinceCreated = moment().diff(data.createdDate, 'days')
  const daySinceUpdated = moment().diff(data.updateProfileDate, 'days')
  const isLock = !(
    daySinceCreated < START_PERIODS || daySinceUpdated >= DEFAULT_PERIODS
  )

  return (
    <TouchableHighlight
      hitSlop={{ top: 48, left: 48, right: 24, bottom: 24 }}
      activeOpacity={0.6}
      underlayColor="#DDDDDD"
      onPress={() => {
        if (isLock) {
          const day = DEFAULT_PERIODS - daySinceUpdated
          Alert.alert(
            I18n.t('can_not_change_picture'),
            'คุณจะสามารถเปลี่ยนรูปได้อีกใน ' + day + I18n.t('day_s'),
          )
        } else {
          navigation.navigate('MainAppFaceCamera', {
            setUri: uri => {
              if (daySinceCreated >= 3) {
                Alert.alert(
                  I18n.t('are_you_sure'),
                  `I18n.t('after_changed_pic_you_will_not_be_able_to_change_until') ${DEFAULT_PERIODS} I18n.t('day_s_have_passed')`,
                  [
                    { text: I18n.t('cancel'), style: 'cancel' },
                    {
                      text: I18n.t('confirm'),
                      onPress: () => {
                        onChange(uri)
                      },
                    },
                  ],
                )
              } else {
                onChange(uri)
              }
            },
          })
        }
      }}
      style={[
        styles.container,
        {
          width: width,
          height: width,
          borderRadius: Math.floor(width / 2),
        },
        style,
      ]}
    >
      <FeatureIcon
        name={isLock ? 'lock' : 'camera'}
        size={Math.floor((60 / 100) * width)}
      />
    </TouchableHighlight>
  )
}

ProjectItem = ({
	project,
	onPress,
}: {
	project: Project;
	onPress: (event: GestureResponderEvent) => void;
}) => {
	const themeName = useColorScheme();
	const {colors} = themes(themeName);
	const content = (
		<View
			style={{
				padding: 8,
				flexDirection: "row",
				justifyContent: "space-between",
			}}>
			<View
				style={{flexDirection: "column", flex: 3, alignItems: "flex-start"}}>
				<Text style={{fontSize: 13, marginHorizontal: 10, color: "grey"}}>
					{project.path_with_namespace}
				</Text>
				<Text style={{fontSize: 17, marginHorizontal: 10, color: colors.text}}>
					{project.name}
				</Text>
			</View>
			<View style={{flexDirection: "column", flex: 1, alignItems: "flex-end"}}>
				<Text style={{fontSize: 14, marginHorizontal: 6, color: colors.text}}>
					{getStr("gitlabLastUpdate")}
				</Text>
				<Text style={{fontSize: 14, marginHorizontal: 6, color: colors.text}}>
					<TimeAgo time={project.last_activity_at} />
				</Text>
			</View>
		</View>
	);
	return Platform.OS === "ios" ? (
		<TouchableHighlight underlayColor="#0002" onPress={onPress}>
			{content}
		</TouchableHighlight>
	) : (
		<TouchableNativeFeedback
			background={TouchableNativeFeedback.Ripple("#0002", false)}
			onPress={onPress}>
			{content}
		</TouchableNativeFeedback>
	);
}

ListRow = ({
  hideSeparator,
  children,
  separatorTint,
}: ListRowProps) => {
  const colorScheme = useColorScheme();
  const action = getAction(children);
  const buttonChild = cloneElement(children, {
    ...children.props,
    disabled: true,
    style: { ...children.props.style, alignSelf: 'flex-start' },
  });

  const nonButtonChild = cloneElement(children, {
    ...children.props,
    style: { ...children.props.style, alignSelf: 'flex-start' },
  });

  const rowContent = (
    <View style={rowStyles.container}>
      <View style={rowStyles.contentContainer}>
        <View style={rowStyles.content}>
          {action ? buttonChild : nonButtonChild}
        </View>
        {!hideSeparator && (
          <View style={[rowStyles.separator, { borderColor: separatorTint }]} />
        )}
      </View>
    </View>
  );
  if (action) {
    return (
      <TouchableHighlight
        underlayColor={getColor('systemGray4', colorScheme)}
        onPress={action}
      >
        {rowContent}
      </TouchableHighlight>
    );
  }
  return rowContent;
}

BookItem = ({
	book,
	onPress,
}: {
	book: SearchResultItem;
	onPress: (event: GestureResponderEvent) => void;
}) => {
	const themeName = useColorScheme();
	const {colors} = themes(themeName);
	const content = (
		<View
			style={{
				padding: 8,
				flexDirection: "row",
				justifyContent: "space-between",
			}}>
			<View
				style={{flexDirection: "column", flex: 3, alignItems: "flex-start"}}>
				<Text style={{fontSize: 13, marginHorizontal: 10, color: "grey"}}>
					{book.author}
				</Text>
				<Text style={{fontSize: 17, marginHorizontal: 10, color: colors.text}}>
					{book.title}
				</Text>
			</View>
			<View style={{flexDirection: "column", flex: 1, alignItems: "flex-end"}}>
				<Text style={{fontSize: 14, marginHorizontal: 6, color: colors.text}}>
					{book.publisher}
				</Text>
			</View>
		</View>
	);
	return Platform.OS === "ios" ? (
		<TouchableHighlight underlayColor="#0002" onPress={onPress}>
			{content}
		</TouchableHighlight>
	) : (
		<TouchableNativeFeedback
			background={TouchableNativeFeedback.Ripple("#0002", false)}
			onPress={onPress}>
			{content}
		</TouchableNativeFeedback>
	);
}

InvoiceItem = ({
	invoice,
	onPress,
}: {
	invoice: Invoice;
	onPress: (event: GestureResponderEvent) => void;
}) => {
	const themeName = useColorScheme();
	const {colors} = themes(themeName);
	const content = (
		<View style={{padding: 8}}>
			<View
				style={{
					flexDirection: "row",
					justifyContent: "space-between",
				}}>
				<View
					style={{flexDirection: "column", flex: 3, alignItems: "flex-start"}}>
					<Text style={{fontSize: 13, marginHorizontal: 10, color: "grey"}}>
						{invoice.inv_no}
					</Text>
					<Text
						style={{fontSize: 17, marginHorizontal: 10, color: colors.text}}>
						{invoice.financial_item_name}
					</Text>
					<Text style={{fontSize: 14, marginHorizontal: 10, color: "grey"}}>
						{invoice.financial_dept_name}/{invoice.payment_item_type_name}
					</Text>
				</View>
				<View
					style={{flexDirection: "column", flex: 1, alignItems: "flex-end"}}>
					<Text style={{fontSize: 18, marginHorizontal: 6, color: colors.text}}>
						{invoice.inv_amount}
					</Text>
					<Text style={{fontSize: 12, marginHorizontal: 6, color: "grey"}}>
						{invoice.inv_date}
					</Text>
				</View>
			</View>
			<Text style={{fontSize: 14, marginHorizontal: 10, color: "grey"}}>
				{invoice.inv_note}
			</Text>
		</View>
	);
	return Platform.OS === "ios" ? (
		<TouchableHighlight underlayColor="#0002" onPress={onPress}>
			{content}
		</TouchableHighlight>
	) : (
		<TouchableNativeFeedback
			onPress={onPress}
			background={TouchableNativeFeedback.Ripple("#0002", false)}>
			{content}
		</TouchableNativeFeedback>
	);
}

PaymentItem = ({payment}: {payment: BankPayment}) => {
	const themeName = useColorScheme();
	const {colors} = themes(themeName);
	const content = (
		<View
			style={{
				paddingVertical: 10,
				paddingRight: 8,
			}}>
			<View
				style={{
					flexDirection: "row",
					justifyContent: "space-between",
				}}>
				<View
					style={{flexDirection: "column", flex: 3, alignItems: "flex-start"}}>
					<Text style={{fontSize: 13, marginHorizontal: 10, color: "grey"}}>
						{payment.department}
					</Text>
					<Text
						style={{fontSize: 17, marginHorizontal: 10, color: colors.text}}>
						{payment.project}
					</Text>
					<Text style={{fontSize: 14, marginHorizontal: 10, color: "grey"}}>
						{payment.usage}
					</Text>
				</View>
				<View
					style={{flexDirection: "column", flex: 1, alignItems: "flex-end"}}>
					<Text style={{fontSize: 18, marginHorizontal: 6, color: colors.text}}>
						{payment.total}
					</Text>
					<Text style={{fontSize: 12, marginHorizontal: 6, color: "grey"}}>
						{payment.time}
					</Text>
				</View>
			</View>
			<Text style={{fontSize: 14, marginHorizontal: 10, color: "grey"}}>
				{payment.description}
			</Text>
		</View>
	);
	return Platform.OS === "ios" ? (
		<TouchableHighlight underlayColor="#0002">{content}</TouchableHighlight>
	) : (
		<TouchableNativeFeedback
			background={TouchableNativeFeedback.Ripple("#0002", false)}>
			{content}
		</TouchableNativeFeedback>
	);
}

SettingsDoubleText = ({
	textLeft,
	textRight,
	onPress,
	icon,
}: {
	textLeft: string;
	textRight: string;
	onPress: ((event: GestureResponderEvent) => void) | undefined;
	icon: ReactElement | undefined;
}) => {
	const themeName = useColorScheme();
	const {colors} = themes(themeName);
	const content = (
		<View
			style={{
				padding: 8,
				paddingRight: 16,
				flexDirection: "row",
				justifyContent: "space-between",
			}}>
			<View style={{flexDirection: "row", alignItems: "center"}}>
				{setIconWidth(icon, colors)}
				<Text style={{fontSize: 17, marginHorizontal: 10, color: colors.text}}>
					{textLeft}
				</Text>
			</View>
			<Text style={{fontSize: 17, marginHorizontal: 10, color: colors.text}}>
				{textRight}
			</Text>
		</View>
	);
	return onPress === undefined ? (
		content
	) : Platform.OS === "ios" ? (
		<TouchableHighlight underlayColor="#0002" onPress={onPress}>
			{content}
		</TouchableHighlight>
	) : (
		<TouchableNativeFeedback
			background={TouchableNativeFeedback.Ripple("#0002", false)}
			onPress={onPress}>
			{content}
		</TouchableNativeFeedback>
	);
}

SettingsItem = ({
	text,
	onPress,
	icon,
	badge,
	normalText,
}: {
	text: string;
	onPress: (event: GestureResponderEvent) => void;
	icon: ReactElement | undefined;
	badge?: string;
	normalText?: boolean;
}) => {
	const themeName = useColorScheme();
	const {colors} = themes(themeName);
	const content = (
		<View
			style={{
				padding: 8,
				paddingRight: 16,
				flexDirection: "row",
				justifyContent: "space-between",
			}}>
			<View style={{flexDirection: "row", alignItems: "center"}}>
				{setIconWidth(icon, colors)}
				<Text
					style={
						normalText
							? {color: colors.text}
							: {fontSize: 17, marginHorizontal: 10, color: colors.text}
					}
					numberOfLines={1}>
					{text}
					{badge && <Text style={{color: "red", fontSize: 12}}>[{badge}]</Text>}
				</Text>
			</View>
			<Icon name="angle-right" size={24} color="lightgrey" />
		</View>
	);
	return Platform.OS === "ios" ? (
		<TouchableHighlight underlayColor="#0002" onPress={onPress}>
			{content}
		</TouchableHighlight>
	) : (
		<TouchableNativeFeedback
			background={TouchableNativeFeedback.Ripple("#0002", false)}
			onPress={onPress}>
			{content}
		</TouchableNativeFeedback>
	);
}

FileItem = ({
	file,
	onPress,
	onLongPress,
}: {
	file: File;
	onPress: (event: GestureResponderEvent) => void;
	onLongPress?: (event: GestureResponderEvent) => void;
}) => {
	const themeName = useColorScheme();
	const {colors} = themes(themeName);
	const content = (
		<View
			style={{
				padding: 8,
				flexDirection: "row",
				justifyContent: "flex-start",
				alignItems: "center",
			}}>
			<Feather name={file.type === "tree" ? "folder" : "code"} size={20} />
			<Text style={{fontSize: 17, marginHorizontal: 10, color: colors.text}}>
				{file.name}
			</Text>
		</View>
	);
	return Platform.OS === "ios" ? (
		<TouchableHighlight
			underlayColor="#0002"
			onPress={onPress}
			onLongPress={onLongPress}>
			{content}
		</TouchableHighlight>
	) : (
		<TouchableNativeFeedback
			background={TouchableNativeFeedback.Ripple("#0002", false)}
			onPress={onPress}
			onLongPress={onLongPress}>
			{content}
		</TouchableNativeFeedback>
	);
}