react-native#TouchableHighlight TypeScript Examples

The following examples show how to use react-native#TouchableHighlight. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: ecard.tsx From THUInfo with MIT License

6 votes

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>
	);
}

Example #2

Source File: TouchableRipple.tsx From natds-rn with ISC License

6 votes

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>
  )
}

Example #3

Source File: HomeScreen.tsx From solid-health with MIT License

6 votes

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>
  );
}

Example #4

Source File: DataSetPreview.tsx From solid-health with MIT License

6 votes

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>
  );
}

Example #5

Source File: index.tsx From selftrace with MIT License

6 votes

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>
  );
}

Example #6

Source File: Button.tsx From react-native-typescript-starter with MIT License

6 votes

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>
    );
}

Example #7

Source File: SheetContentsContainer.tsx From mobile with Apache License 2.0

6 votes

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>
  );
}

Example #8

Source File: items.tsx From THUInfo with MIT License

6 votes

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>
	);
}

Example #9

Source File: gitlab.tsx From THUInfo with MIT License

6 votes

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>
	);
}

Example #10

Source File: Touchable.tsx From react-native-design-kit with MIT License

6 votes

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>
      );
  }
}

Example #11

Source File: AddStoryButton.tsx From companion-kit with MIT License

6 votes

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>
        );
    }

Example #12

Source File: IconButton.tsx From companion-kit with MIT License

6 votes

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>
        );
    }

Example #13

Source File: Button.tsx From companion-kit with MIT License

6 votes

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>
        );
    }

Example #14

Source File: SelectItem.tsx From companion-kit with MIT License

6 votes

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>
    );
}

Example #15

Source File: Card.tsx From companion-kit with MIT License

6 votes

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>
    );
}

Example #16

Source File: RadioButton.tsx From companion-kit with MIT License

6 votes

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>
    );
}

Example #17

Source File: UpdateProfileButton.tsx From SQUID with MIT License

5 votes

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>
  )
}

Example #18

Source File: FlutterwaveButton.tsx From flutterwave-react-native with MIT License

5 votes

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>
  );
}

Example #19

Source File: HomeScreen.tsx From solid-health with MIT License

5 votes

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>
  );
}

Example #20

Source File: ChangeLanguage.tsx From SQUID with MIT License

5 votes

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>
  )
}

Example #21

Source File: UpdateProfileButton.tsx From SQUID with MIT License

5 votes

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>
  )
}

Example #22

Source File: gitlab.tsx From THUInfo with MIT License

5 votes

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>
	);
}

Example #23

Source File: ListRow.tsx From swiftui-react-native with MIT License

5 votes

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;
}

Example #24

Source File: reservesLibWelcome.tsx From THUInfo with MIT License

5 votes

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>
	);
}

Example #25

Source File: invoice.tsx From THUInfo with MIT License

5 votes

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>
	);
}

Example #26

Source File: bankPayment.tsx From THUInfo with MIT License

5 votes

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>
	);
}

Example #27

Source File: items.tsx From THUInfo with MIT License

5 votes

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>
	);
}

Example #28

Source File: items.tsx From THUInfo with MIT License

5 votes

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>
	);
}

Example #29

Source File: gitlab.tsx From THUInfo with MIT License

5 votes

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>
	);
}