react-native#TouchableOpacity TypeScript Examples

DropList = (props: DropListProps) => {
  const { items, active, onChange, itemStyle } = props;
  const Colors = useColors();
  const styles = getStyles(Colors);
  const renderItem = ({ item, index }: { item: DropItem; index: number }) => {
    return (
      <TouchableOpacity onPress={() => onChange(index)}>
        <View
          style={{
            backgroundColor: active === index ? Colors.font_6 : Colors.white,
            padding: 16,
          }}
        >
          <Text style={{ color: Colors.font_2, ...itemStyle }}>
            {item?.label ?? item}
          </Text>
        </View>
        {index < items.length - 1 && <Line />}
      </TouchableOpacity>
    );
  };

  return (
    <View style={styles.listContainer}>
      <FlatList
        data={items}
        // contentContainerStyle={styles.listContainer}
        renderItem={renderItem}
        keyExtractor={(item) => item?.label ?? item}
        persistentScrollbar
      />
    </View>
  );
}

IconButton: React.FC<
  TouchableOpacityProps & { secondary?: boolean; size?: number }
> = ({ children, secondary, style, size = 40, ...props }) => {
  const [{ buttonBackground, buttonSecondaryBackground }] = useContext(
    ThemeContext
  );
  return (
    <TouchableOpacity
      style={[
        {
          width: size,
          height: size,
          borderRadius: size / 2,
          backgroundColor: secondary
            ? buttonSecondaryBackground
            : buttonBackground,
          alignItems: "center",
          justifyContent: "center",
        },
        style,
      ]}
      {...props}
    >
      {children}
    </TouchableOpacity>
  );
}

TouchableIcon = ({iconName, iconSize, containerSize = 56, label, onPress}: TouchableIconProps) => {
  const accessibilityProps = {
    accessibilityRole: 'button' as 'button',
    accessibilityLabel: label,
  };

  const content = (
    <Box width={containerSize} height={containerSize} justifyContent="center" alignItems="center">
      <Icon name={iconName} size={iconSize} />
    </Box>
  );

  if (Platform.OS === 'android') {
    return (
      <Ripple
        rippleSize={containerSize}
        rippleContainerBorderRadius={containerSize}
        rippleCentered
        onPress={onPress}
        {...accessibilityProps}
      >
        {content}
      </Ripple>
    );
  }
  return (
    <TouchableOpacity onPress={onPress} {...accessibilityProps}>
      {content}
    </TouchableOpacity>
  );
}

describe('<FlutterwaveCheckoutError />', () => {
  it('has a retry button if hasLink prop is true', () => {
    // create test renderer
    const TestRenderer = renderer.create(
      <FlutterwaveCheckoutError hasLink onTryAgain={() => {}} />
    );
    // simulate animation timeframes
    timeTravel();
    // font retry button
    const RetryButton = TestRenderer.root.findAllByType(TouchableOpacity)
    // run assertions
    expect(RetryButton).toHaveLength(1);
  });

  it('does not have a retry button if hasLink prop is false', () => {
    // create test renderer
    const TestRenderer = renderer.create(
      <FlutterwaveCheckoutError hasLink={false} onTryAgain={() => {}} />
    );
    // simulate animation timeframes
    timeTravel();
    // font retry button
    const RetryButton = TestRenderer.root.findAllByType(TouchableOpacity)
    // run assertions
    expect(RetryButton).toHaveLength(0);
  });
});

PrimaryButton: FunctionComponent<PrimaryButtonProps> = ({ onPress, loading, style, disabled, children }) => {
  return (
    <View style={style}>
      <TouchableOpacity style={[
                          styles.button,
                          disabled && {opacity: 0.5}
                        ]}
                        onPress={onPress}
                        disabled={disabled}
      >
        {loading ? (
          <ActivityIndicator color={colors.textInverted}/>
        ) : (
          <Text style={styles.text}>{children}</Text>
        )}
      </TouchableOpacity>
    </View>
  );
}

export default function BackButton(props: Props) {
    const onPress = props.onPress;

    return (
        <TouchableOpacity style={[styles.backBtn, props.style]} onPress={onPress}>
            <Images.backIcon width={28} height={14} />
        </TouchableOpacity>
    );
}

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

AlbumHeader = (props: AlbumHeaderProps) => {
  const { album } = props;
  return (
      <View style={styles.container}>
      <Image source={{ uri: album.imageUri}} style={styles.image} />
      <Text style={styles.name}>{album.name}</Text>
      <View style={styles.creatorContainer}>
        <Text style={styles.creator}>By {album.by}</Text>
        <Text style={styles.likes}>{album.numberOfLikes} Likes</Text>
      </View>
      <TouchableOpacity>
        <View style={styles.button}>
          <Text style={styles.buttonText}>PLAY</Text>
        </View>
      </TouchableOpacity>
    </View>
  )
}

FleetView = (props: FleetViewProps) => {
  const { user, fleet, goToNextFleet, goToPrevFleet } = props;
  return (
    <View style={styles.container}>

      {fleet.image && <Image source={{ uri: fleet.image}} style={styles.image}/>}
      <Text style={styles.text}>{fleet.text}</Text>

      <View style={styles.userHeaderContainer}>
        <ProfilePicture image={user.image} size={70} />
        <View style={styles.userNames}>
          <Text style={styles.name}>{user.name}</Text>
          <View style={{flexDirection: 'row'}}>
            <Text style={styles.username}>
              @{user.username}
            </Text>
            <Text style={styles.time}>
              {moment(fleet.createdAt).fromNow()}
            </Text>
          </View>
        </View>
      </View>

      <View style={styles.buttonContainer}>
        <TouchableOpacity style={{flex: 1}} onPress={() => goToPrevFleet()} />
        <TouchableOpacity style={{flex: 1}} onPress={() => goToNextFleet()} />
      </View>

    </View>
  )
}

RunButton: FC<Props> = ({runQuery}) => {
  return (
    <TouchableOpacity
      testID={ids.runBtn}
      accessibilityLabel="run button"
      accessibilityHint="runs the command which is typed in input box"
      onPress={runQuery}
      style={styles.runBtn}
    >
      <Icon
        name="send"
        size={25}
        style={{transform: [{translateX: 2}]}}
        color="#Fff"
      />
    </TouchableOpacity>
  );
}

HomeIcon = ({
	title,
	onPress,
	children,
}: {
	title: keyof typeof zh;
	onPress: (event: GestureResponderEvent) => void;
	children: ReactElement;
}) => {
	const themeName = useColorScheme();
	const theme = themes(themeName);

	return (
		<TouchableOpacity
			style={{
				marginTop: 12,
				alignItems: "center",
				flexGrow: 0,
				flexShrink: 0,
				flexBasis: "20%",
			}}
			onPress={onPress}>
			{children}
			<Text
				style={{color: theme.colors.text, marginTop: 8}}
				ellipsizeMode="tail"
				numberOfLines={1}>
				{getStr(title)}
			</Text>
		</TouchableOpacity>
	);
}

TabBarAdvancedButton: React.FC<Props> = ({
  bgColor,
  ...props
}) => (
  <View
    style={styles.container}
    pointerEvents="box-none"
  >
    <TabBg
      color={bgColor}
      style={styles.background}
    />
    <TouchableOpacity
      style={styles.button}
      onPress={props.onPress}
    >
      <Icon
        name="rocket"
        style={styles.buttonIcon}
      />
    </TouchableOpacity>
  </View>
)

Button: React.FC<Props> = ({ children, fullWidth, style, onPress }) => {
  const styles = useThemedStyles(themedStyles);

  return (
    <TouchableOpacity
      accessibilityRole="button"
      onPress={onPress}
      style={style}
    >
      <Text style={[styles.button, fullWidth && styles.fullWidth]}>
        {children}
      </Text>
    </TouchableOpacity>
  );
}

export function Button(props: Props) {
    const { variant = 'primary', title, style, children, onPress, disabled: originalDisabled, ...other } = props;

    const [isLoading, setIsLoading] = React.useState(false);

    const disabled = originalDisabled || isLoading;
    const disabledStyle = disabled
        ? s[`${variant}ButtonDisabled` as 'primaryButtonDisabled' | 'secondaryButtonDisabled']
        : {};

    return (
        <TouchableOpacity
            style={[s.button, s[`${variant}Button` as 'primaryButton' | 'secondaryButton'], disabledStyle, style]}
            onPress={async () => {
                setIsLoading(true);
                await onPress();
                setIsLoading(false);
            }}
            disabled={disabled}
            {...other}
        >
            {children}
            {title ? (
                <Text
                    style={[s.buttonText, s[`${variant}ButtonText` as 'primaryButtonText' | 'secondaryButtonText']]}
                    numberOfLines={1}
                >
                    {title}
                </Text>
            ) : null}
        </TouchableOpacity>
    );
}

CheckboxWithLabel: React.FC<MyCheckboxProps> = ({
  label,
  onPress,
  checked,
  big,
}) => {
  return (
    <TouchableOpacity style={{ flexDirection: "row" }} onPress={onPress}>
      <Checkbox selected={checked} />
      <MyText style={{ marginLeft: 4, fontSize: big ? 16 : undefined }}>
        {label}
      </MyText>
    </TouchableOpacity>
  );
}

CheckboxWithLabel: React.FC<MyCheckboxProps> = ({
  label,
  onPress,
  checked,
}) => {
  return (
    <TouchableOpacity style={{ flexDirection: "row" }} onPress={onPress}>
      <Checkbox selected={checked} />
      <MyText style={{ marginLeft: 4, flex: 1 }}>{label}</MyText>
    </TouchableOpacity>
  );
}

ButtonPrimary: React.FC<ButtonPrimaryProps> = (props) => {

    const languageSelector = (state: WalletState) => state.language
    const language = useSelector(languageSelector)

    return (
        <View style={styles.buttonContainer}>
            <TouchableOpacity style={styles.buttonPrimary} onPress={props.action}>
                {props.text == getTranslated(language).send &&
                    <Image style={styles.icon} source={require('../assets/images/send-button.png')} />
                }
                {props.text == getTranslated(language).receive &&
                    <Image style={styles.icon} source={require('../assets/images/received-button.png')} />
                }
                <Text style={styles.buttonText}>{props.text}</Text>
            </TouchableOpacity>
        </View>
    )

}

BackButton = ({
  onPress,
  backIcon = 'arrow-left',
}: {
  onPress?: any
  backIcon?: string
}) => {
  const navigation = useNavigation()
  return (
    <TouchableOpacity
      style={{ flexDirection: 'row', alignItems: 'center' }}
      onPress={onPress ? onPress : () => navigation.pop()}
      hitSlop={{ top: 10, left: 20, right: 20, bottom: 10 }}
    >
      <Icon name={backIcon} size={32} color={COLORS.BLACK_3} />
      <Text
        style={{
          color: COLORS.BLACK_3,
          fontFamily: FONT_BOLD,
          marginLeft: 12,
          fontSize: FONT_SIZES[500],
        }}
      >
        {I18n.t('back')}
      </Text>
    </TouchableOpacity>
  )
}

TouchableIcon = ({iconName, iconSize, containerSize = 66, label, onPress}: TouchableIconProps) => {
  const accessibilityProps = {
    accessibilityRole: 'button' as 'button',
    accessibilityLabel: label,
  };

  const content = (
    <Box width={containerSize} height={containerSize} justifyContent="center" alignItems="center">
      <Icon name={iconName} size={iconSize} />
    </Box>
  );

  if (Platform.OS === 'android') {
    return (
      <Ripple onPress={onPress} {...accessibilityProps}>
        {content}
      </Ripple>
    );
  }
  return (
    <TouchableOpacity activeOpacity={0.6} onPress={onPress} {...accessibilityProps}>
      {content}
    </TouchableOpacity>
  );
}

export function HomeScreen(props) {
  const renderItem: ListRenderItem<ExampleListItem>  = ({ item })  => (
    React.createElement(item.component, {
      index: item.id,
      style: styles.exampleListItem
    })
  );

  return (
    <SafeAreaView>
      {false && (
        <TouchableOpacity
          onPress={() => {
            props.navigation.navigate('Test');
          }}
        >
          <Text>
            Push
          </Text>
        </TouchableOpacity>
      )}
      <FlatList
        contentContainerStyle={styles.scrollContentContainer}
        data={EXAMPLE_ITEMS}
        renderItem={renderItem}
        keyExtractor={(item) => `item-${item.id}`}
      />
    </SafeAreaView>
  );
}

function Example({ title, children }: ExampleProps) {
  const navigation = useNavigation();

  return (
    <ScreenContainer
      hasSafeArea={true}
      hasTopSafeArea={true}
      hasBottomSafeArea={true}
      scrollable={false}
    >
      <View style={exampleStyles.headerStyle}>
        <TouchableOpacity
          style={exampleStyles.menuButtonStyle}
          onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
        >
          <Image
            style={exampleStyles.menuButtonImageStyle}
            source={require("./assets/images/hamburger.png")}
          />
        </TouchableOpacity>

        <Text style={[exampleStyles.headerTextStyle]}>{title}</Text>
      </View>
      <ScreenContainer scrollable={true} hasSafeArea={false}>
        {children}
      </ScreenContainer>
    </ScreenContainer>
  );
}

ButtonWorker: FC<ButtonWorkerProps> = (props) => {
  const { title, onPress, children } = props;
  const [working, setWorking] = useState<boolean>(false);

  function onButtonPress() {
    if (working) {
      return;
    }

    setWorking(true);
    onPress?.(() => setWorking(false));
  }

  return (
    <TouchableOpacity
      disabled={working}
      activeOpacity={0.6}
      onPress={onButtonPress}
      style={ButtonWorkerStyle.button}
    >
      {working ? (
        <ActivityIndicator color={ButtonWorkerStyle.text.color} />
      ) : title ? (
        <Text style={ButtonWorkerStyle.text}>{title}</Text>
      ) : (
        children
      )}
    </TouchableOpacity>
  );
}

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

export default function Header() {
  return (
    <View style={styles.container}>
      <TouchableOpacity
        onPress={() => Router.push('/map')}
        activeOpacity={0.5}
        style={styles.logoContainer}>
        <Image style={styles.logo} source={logoSource} resizeMode="cover" />
      </TouchableOpacity>
      <TabNavigator />
    </View>
  );
}

BtnTemplate: React.FC<BtnTemplateInterface> = (props) => {
  const {disabled = false} = props;
  const {styleProps} = useContext(PropsContext);
  const {BtnTemplateStyles, theme, iconSize, customIcon} = styleProps || {};

  const imageRef = React.useRef(null);

  // This fixes the tint issue in safari browser
  useImageDelay(imageRef, 10, '', props?.color || '');

  return (
    <TouchableOpacity
      style={styleProps?.BtnTemplateContainer}
      disabled={disabled}
      onPress={props.onPress}>
      <View
        style={[
          {...styles.controlBtn, ...(BtnTemplateStyles as object)},
          props.style as object,
        ]}>
        <Image
          ref={Platform.OS === 'web' ? imageRef : undefined}
          style={{
            width: iconSize || 25,
            height: iconSize || 25,
            opacity: disabled ? 0.4 : 1,
            tintColor: disabled ? 'grey' : props.color || theme || '#fff',
          }}
          resizeMode={'contain'}
          source={{
            uri: props.name
              ? customIcon?.[props.name]
                ? customIcon[props.name]
                : icons[props.name]
              : props.icon,
          }}
        />
      </View>
      <Text
        style={{
          textAlign: 'center',
          marginTop: 5,
          color: disabled ? 'grey' : props.color || theme || '#fff',
          opacity: disabled ? 0.4 : 1,
        }}>
        {props.btnText}
      </Text>
    </TouchableOpacity>
  );
}

Button = ({
  text,
  onPress,
  variant,
  color: buttonColorName,
  disabled,
  loading,
  externalLink,
}: ButtonProps) => {
  const [i18n] = useI18n();
  const theme = useTheme<Theme>();
  const variantProps = theme.buttonVariants[variant];
  const disabledProps = disabled ? variantProps.disabled || {} : {};
  const themedStyles = {...variantProps, ...disabledProps};
  const {fontSize, fontWeight, fontFamily, color, borderWidth, height} = (themedStyles as unknown) as TextStyle &
    ViewStyle;
  const textColor = themedStyles.textColor;
  const buttonColor = buttonColorName && theme.colors[buttonColorName];

  const onPressHandler = loading ? () => {} : onPress;
  const externalLinkProps = externalLink
    ? {
        accessibilityLabel: text,
        accessibilityHint: i18n.translate('Home.ExternalLinkHint'),
        accessibilityRole: 'link' as AccessibilityRole,
      }
    : {};
  const externalArrowIcon = textColor === palette.white ? 'icon-external-arrow-light' : 'icon-external-arrow';

  const content = (
    <Box
      borderRadius={4}
      alignItems="center"
      justifyContent="center"
      style={{backgroundColor: color, minHeight: height, borderWidth, borderColor: buttonColor}}
      paddingHorizontal="m"
      flexDirection="row"
    >
      {loading ? (
        <ActivityIndicator color={textColor} size="large" />
      ) : (
        <>
          <Text style={{...styles.content, color: textColor || buttonColor, fontWeight, fontFamily, fontSize}}>
            {text}
          </Text>
          {externalLink && <Icon name={externalArrowIcon} />}
        </>
      )}
    </Box>
  );

  const accessibilityProps = {
    accessibilityRole: 'button' as 'button',
    accessibilityState: {disabled},
    ...externalLinkProps,
  };

  if (Platform.OS === 'android') {
    return (
      <Ripple rippleContainerBorderRadius={4} onPress={onPressHandler} {...accessibilityProps}>
        {content}
      </Ripple>
    );
  }
  return (
    <TouchableOpacity onPress={onPressHandler} style={styles.stretch} disabled={disabled} {...accessibilityProps}>
      {content}
    </TouchableOpacity>
  );
}

Detail: React.FC = () => {
  const [data, setData] = useState<Data>({} as Data);
  const navigation = useNavigation();
  const route = useRoute();

  const routeParams = route.params as Params;

  useEffect(() => {
    async function loadPoint() {
      const response = await api.get(`/points/${routeParams.point_id}`);

      setData(response.data);
    }

    loadPoint();
  }, []);

  function handleNavigateBack() {
    navigation.goBack();
  }

  function handleComposeMail() {
    MailComposer.composeAsync({
      subject: "Interesse na coleta de resíduos",
      recipients: [data.point.email],
    });
  }

  function handleWhatsApp() {
    Linking.openURL(
      `whatsapp://send?phone=${data.point.whatsapp}&text=Tenho interesse na coleta de resíduos`
    );
  }
  if (!data.point) {
    return null;
  }

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={styles.container}>
        <TouchableOpacity onPress={handleNavigateBack}>
          <Icon name="arrow-left" size={20} color="#34cb79" />
        </TouchableOpacity>

        <Image
          style={styles.pointImage}
          source={{
            uri: data.point.image_url,
          }}
        />

        <Text style={styles.pointName}>{data.point.name}</Text>
        <Text style={styles.pointItems}>
          {data.items.map((item) => item.title).join(",")}
        </Text>

        <View style={styles.address}>
          <Text style={styles.addressTitle}>Endereço</Text>
          <Text style={styles.addressContent}>
            {data.point.city}, {data.point.uf}
          </Text>
        </View>
      </View>
      <View style={styles.footer}>
        <RectButton style={styles.button} onPress={() => handleWhatsApp()}>
          <FontAwesome name="whatsapp" size={20} color="#fff" />
          <Text style={styles.buttonText}>Whatsapp</Text>
        </RectButton>
        <RectButton style={styles.button} onPress={() => handleComposeMail()}>
          <Icon name="mail" size={20} color="#fff" />
          <Text style={styles.buttonText}>E-mail</Text>
        </RectButton>
      </View>
    </SafeAreaView>
  );
}

TestComponent: React.FC = () => {
  const { products, addToCart, increment, decrement } = useCart();

  function handleAddToCart(): void {
    addToCart({
      id: '1234',
      title: 'Test product',
      image_url: 'test',
      price: 1000,
      quantity: 0,
    });
  }

  function handleIncrement(): void {
    increment('1234');
  }

  function handleDecrement(): void {
    decrement('1234');
  }

  return (
    <>
      <TouchableOpacity testID="add-to-cart" onPress={handleAddToCart}>
        Add to cart
      </TouchableOpacity>

      <TouchableOpacity testID="increment" onPress={handleIncrement}>
        Increment
      </TouchableOpacity>

      <TouchableOpacity testID="decrement" onPress={handleDecrement}>
        Decrement
      </TouchableOpacity>

      {products.map(product => (
        <View key={product.id}>
          <Text>{product.title}</Text>
          <Text>{product.quantity}</Text>
        </View>
      ))}
    </>
  );
}

CustomButton = ({onPress, disabled}) => (
  <TouchableOpacity
    testID={CustomBtnTestID}
    onPress={onPress}
    disabled={disabled}>
    <Text>{disabled ? 'Please wait...' : 'Pay'}</Text>
  </TouchableOpacity>
)