react-native#TouchableNativeFeedback TypeScript Examples

The following examples show how to use react-native#TouchableNativeFeedback. 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: gitlab.tsx    From THUInfo with MIT License 6 votes vote down vote up 
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 #2
Source File: items.tsx    From THUInfo with MIT License 6 votes vote down vote up 
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 #3
Source File: ecard.tsx    From THUInfo with MIT License 6 votes vote down vote up 
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 #4
Source File: Button.tsx    From react-native-typescript-starter with MIT License 6 votes vote down vote up 
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 #5
Source File: TouchableItem.tsx    From nlw2-proffy with MIT License 6 votes vote down vote up 
export default function TouchableItem({
  borderless = false,
  pressColor = 'rgba(0, 0, 0, .32)',
  style,
  children,
  ...rest
}: Props) {
  /*
   * TouchableNativeFeedback.Ripple causes a crash on old Android versions,
   * therefore only enable it on Android Lollipop and above.
   *
   * All touchables on Android should have the ripple effect according to
   * platform design guidelines.
   * We need to pass the background prop to specify a borderless ripple effect.
   */
  if (
    Platform.OS === 'android' &&
    Platform.Version >= ANDROID_VERSION_LOLLIPOP
  ) {
    return (
      <TouchableNativeFeedback
        {...rest}
        useForeground={TouchableNativeFeedback.canUseNativeForeground()}
        background={TouchableNativeFeedback.Ripple(pressColor, borderless)}
      >
        <View style={style}>{React.Children.only(children)}</View>
      </TouchableNativeFeedback>
    );
  } else {
    return (
      <TouchableOpacity style={style} {...rest}>
        {children}
      </TouchableOpacity>
    );
  }
}
Example #6
Source File: index.tsx    From frontatish with MIT License 5 votes vote down vote up 
Dropdown = (props: DropdownProps) => {
  const [open, setOpen] = useState(false);
  const {
    items,
    active,
    onChange,
    itemStyle,
    activeItemStyle,
    iconColor,
  } = props;
  const animateRotate = useRef(new Animated.Value(0)).current;
  const Colors = useColors();
  const styles = getStyles(Colors);

  const handleList = () => {
    // axios.get();
    Animated.timing(animateRotate, {
      toValue: open ? 0 : 1,
      duration: 300,
      useNativeDriver: true,
    }).start();
    setOpen(!open);
  };
  const onItemClick = (index: number) => {
    onChange(index);
    handleList();
  };
  return (
    <View style={styles.container}>
      <TouchableNativeFeedback onPress={handleList}>
        <View style={styles.activeItem}>
          <Text style={{ color: Colors.font_2, ...activeItemStyle }}>
            {items[active]?.label ?? items[active]}
          </Text>
          <View style={{ flex: 1, alignItems: 'flex-end' }}>
            <Animated.View
              style={[
                {
                  transform: [
                    {
                      rotate: animateRotate.interpolate({
                        inputRange: [0, 1],
                        outputRange: ['0deg', '180deg'],
                      }),
                    },
                  ],
                },
              ]}
            >
              <Icon
                name="keyboard-arrow-down"
                size={scaleDimension(20)}
                color={iconColor ?? Colors.primary}
              />
            </Animated.View>
          </View>
        </View>
      </TouchableNativeFeedback>
      {!open && <Line />}
      {open && (
        <DropList
          items={items}
          active={active}
          onChange={onItemClick}
          itemStyle={itemStyle}
        />
      )}
    </View>
  );
}
Example #7
Source File: gitlab.tsx    From THUInfo with MIT License 5 votes vote down vote up 
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 #8
Source File: gitlab.tsx    From THUInfo with MIT License 5 votes vote down vote up 
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>
	);
}
Example #9
Source File: items.tsx    From THUInfo with MIT License 5 votes vote down vote up 
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 #10
Source File: items.tsx    From THUInfo with MIT License 5 votes vote down vote up 
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 #11
Source File: bankPayment.tsx    From THUInfo with MIT License 5 votes vote down vote up 
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 #12
Source File: invoice.tsx    From THUInfo with MIT License 5 votes vote down vote up 
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 #13
Source File: reservesLibWelcome.tsx    From THUInfo with MIT License 5 votes vote down vote up 
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>
	);
}