react-native#TouchableWithoutFeedback TypeScript Examples

CloseContactStep: FC<CloseContactStepProps> = ({
  number,
  title,
  text,
  link,
  linkText,
  onPress
}) => (
  <TouchableWithoutFeedback onPress={onPress}>
    <View>
      <Media left={<Number>{number}</Number>} leftStyle={styles.left}>
        <Text variant="h4" color="errorRed">
          {title}
        </Text>
        <Spacing s={16} />
        {typeof text === 'string' ? <Text color="darkGrey">{text}</Text> : text}
        {link && (
          <>
            <Spacing s={24} />
            <ArrowLink externalLink={link}>
              <Text variant="h4" color="primaryPurple">
                {linkText}
              </Text>
            </ArrowLink>
          </>
        )}
      </Media>
    </View>
  </TouchableWithoutFeedback>
)

Header = () => {
  const navigation = useNavigation();
  const onLogoPress = useCallback(() => {
    navigation.navigate('TestScreen');
  }, [navigation]);

  if (TEST_MODE) {
    return (
      <TouchableWithoutFeedback onPress={onLogoPress} testID="headerButton">
        {BasicHeader()}
      </TouchableWithoutFeedback>
    );
  }
  return <BasicHeader />;
}

PayButton: React.FC<ButtonProps> = ({ focused }) => {
  const navigation = useNavigation();

  return (
    <TouchableWithoutFeedback onPress={() => navigation.navigate('Pay')}>
      <Linear
        colors={focused ? ['#fff', '#ccc'] : ['#00fc6c', '#00ac4a']}
        start={{ x: 1, y: 0.2 }}
      >
        <MaterialIcons
          name="attach-money"
          size={30}
          color={focused ? '#222' : '#fff'}
        />
        <Label focused={focused}>Pagar</Label>
      </Linear>
    </TouchableWithoutFeedback>
  );
}

DebugTouchable = ({ onDebug, children }) => {
  const [pressCount, setPressCount] = useState(0)
  const ref = useRef<NodeJS.Timeout>()
  useEffect(() => {
    if (pressCount > 5) {
      onDebug()
    }
  }, [pressCount])
  return (
    <TouchableWithoutFeedback onPress={() => {
      clearTimeout(ref.current)
      ref.current = setTimeout(() => {
        setPressCount(0)
      }, 1 * 1000)
      setPressCount(pressCount + 1)
    }}>{children}</TouchableWithoutFeedback>
  )
}

ExitWalletModal: React.FC<Props> = (props) => {


    const [isSure, setisSure] = useState(false)
    const languageSelector = (state: WalletState) => state.language
    const language = useSelector(languageSelector)

    return (
        <View>
            <Modal isVisible={props.isVisible} backdropTransitionOutTiming={0} onBackdropPress={props.hideModal}>
                <View style={{ borderColor: '#2b2f3a', borderWidth: 1 }}>
                    <LinearGradient useAngle={true} angle={180} angleCenter={{ x: 0.5, y: 0.5 }} colors={['#1f232e', '#13161f']}>
                        <View style={{ padding: 20, flexWrap: 'wrap', flexDirection: 'row', justifyContent: 'center' }}>
                            <Text style={styles.headingText}>{getTranslated(language).exit_wallet}</Text>
                            <Text style={styles.regularText}>{getTranslated(language).exit_text}</Text>
                            <View style={styles.deleteContainer}>
                                <TouchableWithoutFeedback style={{ flex: 1 }} onPress={() => { setisSure(!isSure) }}>
                                    <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                                        <CheckBox tintColors={{ true: '#F7931A', false: '#F7931A' }} style={styles.checkBox} tintColor="#F7931A" animationDuration={0} onFillColor="#F7931A" onTintColor="#F7931A" onCheckColor="#fff" boxType="square" disabled={false} value={isSure} onValueChange={(newVal) => setisSure(newVal)} />
                                        <Text style={styles.regularText}>{getTranslated(language).exit_label_text}</Text>
                                    </View>
                                </TouchableWithoutFeedback>
                            </View>
                        </View>
                        <View style={{ marginBottom: 20, marginLeft: 16, flexDirection: 'row' }}>
                            {isSure &&
                                <ButtonPrimary text={getTranslated(language).exit_delete} action={props.deleteCallback} />
                            }
                            {!isSure &&
                                <ButtonPrimaryDisabled text={getTranslated(language).exit_delete} action={props.deleteCallback} />
                            }
                        </View>
                    </LinearGradient>
                </View>
            </Modal>
        </View>
    );
}

ListWrapper = ({
  onPress, children, feedback, ...props
}: ListWrapper) => {
  if (!onPress) {
    return (
      <View>
        {children}
      </View>
    )
  }

  if (feedback === 'ripple') {
    return (
      <TouchableRipple onPress={onPress} {...props}>
        {children}
      </TouchableRipple>
    )
  }

  return (
    <TouchableWithoutFeedback onPress={onPress} {...props}>
      {children}
    </TouchableWithoutFeedback>
  )
}

function DefaultRadioItem(props: DefaultRadioItemProps) {
  const {title, theme, fullWidth, radioProps, onPress, style} = props;

  return (
    <>
      <TouchableWithoutFeedback onPress={onPress}>
        <View
          style={[
            styles.radioView,
            fullWidth ? styles.fullWidth : undefined,
            style,
          ]}>
          <Text>{title}</Text>
          <Radio
            color={theme.palette.default}
            selectedColor={theme.palette.secondary}
            selected={false}
            onPress={onPress}
            {...radioProps}
          />
        </View>
      </TouchableWithoutFeedback>
    </>
  );
}

UserFleetPreview = (props: UserFleetPreviewProps) => {

  const { user: { id, username, image } } = props;

  const navigation = useNavigation();

  const onPress = () => {
    // navigate to FLeet screen
    navigation.navigate('Fleet', { userId: id });
  }

  return (
    <TouchableWithoutFeedback onPress={onPress}>
      <View style={styles.container}>
        <View style={styles.image}>
          <ProfilePicture image={image} size={70} />
        </View>
        <Text style={styles.username}>{username}</Text>
      </View>
    </TouchableWithoutFeedback>
  )
}

AlbumComponent = (props: AlbumProps) => {

  const navigation = useNavigation();

  const onPress = () => {
    navigation.navigate('AlbumScreen', { id: props.album.id })
  }

  return (
    <TouchableWithoutFeedback onPress={onPress}>
      <View style={styles.container}>
          <Image source={{uri: props.album.imageUri}} style={styles.image}/>
          <Text style={styles.text}>{props.album.artistsHeadline}</Text>
      </View>
    </TouchableWithoutFeedback>

  )
}

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

Endangerment: React.FC<{
  navigation: EndangermentScreenNavigationProp;
}> = ({navigation}) => {
  const {t} = useTranslation();
  return (
    <View style={styles.container}>
      <Header
        navigationButton={{
          title: t('global.cancel'),
          fn: (): void => navigation.goBack(),
        }}
      />
      <Text style={styles.header}>{t('endangerment.info')}</Text>
      <TouchableWithoutFeedback
        onPress={(): void => navigation.navigate('SymptomInfo')}>
        <View style={styles.buttonSymptoms}>
          <Text style={styles.buttonSymptomsTitle}>
            {t('endangerment.symptomsTitle')}
          </Text>
          <Icon name="arrow-right" size={18} style={styles.arrowRightIcon} />
          <Text>{t('endangerment.symptomsText')}</Text>
        </View>
      </TouchableWithoutFeedback>
      <TouchableWithoutFeedback
        onPress={(): void => navigation.navigate('AlphaPositiveResult')}>
        <View style={styles.buttonTested}>
          <Text style={styles.buttonTestedTitle}>
            {t('endangerment.positiveResultTitle')}
          </Text>
          <Icon name="arrow-right" size={18} style={styles.arrowRightIcon} />
          <Text>{t('endangerment.positiveResultText')}</Text>
        </View>
      </TouchableWithoutFeedback>
      <BottomMenu navigation={navigation} activate="Infected?"></BottomMenu>
    </View>
  );
}

PickLeaveRequestComment = (props: PickLeaveRequestCommentProps) => {
  const {onPress, comment} = props;
  const theme = useTheme();
  return (
    <>
      <View>
        <CardButton
          style={[
            styles.cardButton,
            {height: theme.spacing * 12},
            styles.marginForShadow,
          ]}
          onPress={onPress}>
          <View style={[styles.cardButtonContent]}>
            <View style={styles.buttonLeftView}>
              <Icon name={'comment-text'} />
              <Text style={{paddingTop: theme.spacing * 0.5}}>{'Comment'}</Text>
            </View>
          </View>
        </CardButton>
        {comment && comment !== '' ? (
          <TouchableWithoutFeedback onPress={onPress}>
            <View
              style={{
                paddingRight: theme.spacing * 4,
                paddingLeft: theme.spacing * 12,
                paddingVertical: theme.spacing * 4,
                backgroundColor: theme.palette.background,
              }}>
              <Text>{comment}</Text>
            </View>
          </TouchableWithoutFeedback>
        ) : null}
      </View>
    </>
  );
}

NewVersionCard = () => {
  const {t} = useTranslation();

  const onUpdate = () => {
    Linking.openURL(
      Platform.OS === 'ios'
        ? t('newVersion:appstoreUrl')
        : t('newVersion:playstoreUrl')
    );
  };

  return (
    <TouchableWithoutFeedback onPress={onUpdate}>
      <View>
        <RoundedBox style={styles.content}>
          <Text variant="h4">
            {t('newVersion:title', {
              storeName:
                Platform.OS === 'ios'
                  ? t('newVersion:appstore')
                  : t('newVersion:playstore')
            })}
          </Text>
          <Spacing s={8} />
          <Text bold color="errorRed">
            {t('newVersion:link')}
          </Text>
        </RoundedBox>
      </View>
    </TouchableWithoutFeedback>
  );
}

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

Header: FC = () => {
  const navigation = useNavigation();
  const {t} = useTranslation();
  return (
    <View style={styles.container}>
      <Image source={IconLogo} accessibilityIgnoresInvertColors={false} />
      <TouchableWithoutFeedback
        accessibilityRole="button"
        accessibilityHint={t('settings:titleHint')}
        accessibilityLabel={t('settings:title')}
        onPress={() => navigation.navigate(ScreenNames.settings)}>
        <Image
          style={styles.settings}
          source={IconMenu}
          resizeMode="center"
          accessibilityIgnoresInvertColors={false}
        />
      </TouchableWithoutFeedback>
    </View>
  );
}

CounterModal = ({
  count,
  onIncrease,
  onPress,
}: SimpleModalProps) => {
  return (
    <TouchableWithoutFeedback onPress={onPress} style={styles.buttonContainer}>
      <View style={styles.backdropContainer}>
        <View style={styles.modalContainer}>
          <Text>Counter Modal</Text>
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
              marginTop: 12,
            }}
          >
            <Text>{count}</Text>
            <View style={{ flexDirection: 'row' }}>
              <TouchableOpacity
                style={styles.actionButton}
                onPress={onIncrease}
              >
                <Text>+</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={styles.actionButton}
                onPress={onIncrease}
              >
                <Text>-</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </View>
    </TouchableWithoutFeedback>
  );
}

ToggleColorButton: React.FC<Props> = (props) => {
  const { apply, isSelected, theme, styles } = useToolbar();
  const { name, valueOff, valueOn } = props;
  const selected = isSelected(name, valueOn);
  const handlePresss = () => apply(name, selected ? valueOff : valueOn);
  const defaultStyles = makeStyles(theme);
  const toolStyle = styles?.selection?.colorToggle?.tool
    ? styles.selection.colorToggle.tool(defaultStyles.tool)
    : defaultStyles.tool;
  const overlayStyle = styles?.selection?.colorToggle?.overlay
    ? styles.selection.colorToggle.overlay(defaultStyles.overlay)
    : defaultStyles.overlay;
  const noColorStyle = styles?.selection?.colorToggle?.noColor
    ? styles.selection.colorToggle.noColor(defaultStyles.noColor)
    : defaultStyles.noColor;
  return (
    <TouchableWithoutFeedback onPress={handlePresss}>
      <View
        style={[
          toolStyle,
          {
            backgroundColor: valueOn !== false ? valueOn : theme.overlay,
          },
        ]}
      >
        {selected && <View style={overlayStyle} />}
        {valueOn === false && <View style={noColorStyle} />}
      </View>
    </TouchableWithoutFeedback>
  );
}

Header = ({isOverlay}: HeaderProps) => {
  const [i18n] = useI18n();
  const navigation = useNavigation();
  const onLogoPress = useCallback(() => {
    navigation.dispatch(DrawerActions.openDrawer());
  }, [navigation]);
  return (
    <TouchableWithoutFeedback onPress={onLogoPress}>
      <Box flexDirection="row" alignItems="center" justifyContent="center" marginBottom="l">
        <Box marginHorizontal="s">
          <Icon size={20} name="shield-covid" />
        </Box>
        <Text variant="homeHeader" color={isOverlay ? 'overlayBodyText' : 'bodyText'}>
          {i18n.translate('Home.AppName')}
        </Text>
      </Box>
    </TouchableWithoutFeedback>
  );
}

ToggleIconButton: React.FC<Props> = (props) => {
  const { apply, isSelected, theme, styles } = useToolbar();
  const { name, valueOff, valueOn, source } = props;
  const selected = isSelected(name, valueOn);
  const handlePresss = () => apply(name, selected ? valueOff : valueOn);
  const defaultStyles = makeStyles(theme);
  const toolStyle = styles?.selection?.iconToggle?.tool
    ? styles.selection.iconToggle.tool(defaultStyles.tool)
    : defaultStyles.tool;
  const overlayStyle = styles?.selection?.iconToggle?.overlay
    ? styles.selection.iconToggle.overlay(defaultStyles.overlay)
    : defaultStyles.overlay;
  const imageStyle = styles?.selection?.iconToggle?.image
    ? styles.selection.iconToggle.image(defaultStyles.image)
    : defaultStyles.image;
  return (
    <TouchableWithoutFeedback onPress={handlePresss}>
      <View style={toolStyle}>
        <Image source={source} style={imageStyle} />
        {selected && <View style={overlayStyle} />}
      </View>
    </TouchableWithoutFeedback>
  );
}

FlutterwaveCheckoutBackdrop: React.FC<
  FlutterwaveCheckoutBackdropProps
> = function FlutterwaveCheckoutBackdrop({
  animation,
  onPress
}) {
  // Interpolation backdrop animation
  const backgroundColor = animation.interpolate({
    inputRange: [0, 0.3, 1],
    outputRange: [colors.transparent, colors.transparent, 'rgba(0,0,0,0.5)'],
  });
  return (
    <TouchableWithoutFeedback testID='flw-checkout-backdrop' onPress={onPress}>
      <Animated.View style={Object.assign({}, styles.backdrop, {backgroundColor})} />
    </TouchableWithoutFeedback>
  );
}

export default function Carousel(props: Props) {
  let { width: dimensionsWidth } = useDimensions();
  let { data, width = dimensionsWidth, height } = props;
  let [activeIndex, setActiveIndex] = useState(0);

  return (
    <View style={[styles.carouselContainer, { height }]}>
      <SnapCarousel
        data={data}
        renderItem={({ item }) => (
          <TouchableWithoutFeedback onPress={item.onItemPress}>
            <ImageBackground
              source={{ uri: item.image }}
              style={[styles.itemContainer, { height }]}
            >
              {item.render && item.render()}
            </ImageBackground>
          </TouchableWithoutFeedback>
        )}
        sliderWidth={width}
        itemWidth={width}
        inactiveSlideScale={1}
        onSnapToItem={(slideIndex: number) => setActiveIndex(slideIndex)}
      />
      <Pagination
        dotsLength={data.length}
        activeDotIndex={activeIndex}
        containerStyle={styles.pagination}
        dotStyle={styles.activeDotStyle}
        inactiveDotStyle={styles.inactiveDotStyle}
        inactiveDotOpacity={0.4}
        dotContainerStyle={styles.dotContainerStyle}
      />
    </View>
  );
}

Candle = (props: CandleParams) => {
  const { style, onPress } = props;

  return (
    <TouchableWithoutFeedback onPress={onPress}>
      <Animated.View style={[style]} />
    </TouchableWithoutFeedback>
  );
}

SimpleModal = ({ onPress }: SimpleModalProps) => {
  return (
    <TouchableWithoutFeedback onPress={onPress} style={styles.buttonContainer}>
      <View style={styles.backdropContainer}>
        <View style={styles.modalContainer}>
          <Text>Simple Modal</Text>
        </View>
      </View>
    </TouchableWithoutFeedback>
  );
}

ToggleTextButton: React.FC<Props> = (props) => {
  const { apply, isSelected, theme, styles } = useToolbar();
  const { name, valueOff, valueOn, valueName } = props;
  const selected = isSelected(name, valueOn);
  const handlePresss = () => apply(name, selected ? valueOff : valueOn);
  const defaultStyles = makeStyles(theme);
  const toolStyle = styles?.selection?.iconToggle?.tool
    ? styles.selection.iconToggle.tool(defaultStyles.tool)
    : defaultStyles.tool;
  const overlayStyle = styles?.selection?.iconToggle?.overlay
    ? styles.selection.iconToggle.overlay(defaultStyles.overlay)
    : defaultStyles.overlay;
  const textStyle = styles?.selection?.iconToggle?.image
    ? styles.selection.iconToggle.image(defaultStyles.text)
    : defaultStyles.text;
  return (
    <TouchableWithoutFeedback onPress={handlePresss}>
      <View style={toolStyle}>
        <Text style={textStyle}>{valueName}</Text>
        {selected && <View style={overlayStyle} />}
      </View>
    </TouchableWithoutFeedback>
  );
}

Back: FC<BackProps> = ({
  variant = 'default',
  onPress: onPressProp
}) => {
  const navigation = useNavigation();
  const {t} = useTranslation();

  const onPress = () => navigation.goBack();

  return (
    <TouchableWithoutFeedback
      accessible
      accessibilityRole="button"
      accessibilityHint={t('common:back:hint')}
      accessibilityLabel={t('common:back:label')}
      onPress={onPressProp || onPress}>
      <View style={styles.container}>
        <Image
          source={icons[variant]}
          accessibilityIgnoresInvertColors={false}
        />
      </View>
    </TouchableWithoutFeedback>
  );
}

HomeTour: React.FC<{
  navigation: HomeTourScreenNavigationProp;
}> = ({navigation}) => {
  const [step, setStep] = useState(1);
  const {t} = useTranslation();
  return (
    <View style={styles.container}>
      <Header />

      <View style={styles.lastFetchRow}>
        <Text style={styles.lastFetch}>
          {t('home.lastIdFetch')}: {t('home.today')} 11:04
        </Text>
        <Icon name="refresh-ccw" size={18} style={styles.refreshIcon} />
      </View>

      <View style={styles.radiusContainer}>
        {step === 1 && (
          <TouchableWithoutFeedback onPress={(): void => setStep(2)}>
            <View style={[styles.bubbleBox, styles.firstBubble]}>
              <Text style={styles.bubbleText}>{t('homeTour.circle')}</Text>
              <View style={styles.bubbleActions}>
                <Text style={styles.next}>{t('homeTour.next')}</Text>
                <Icon name="chevron-right" size={18} style={styles.nextIcon} />
              </View>
              <View style={styles.bubbleTriangle} />
            </View>
          </TouchableWithoutFeedback>
        )}
        {step === 2 && (
          <TouchableWithoutFeedback onPress={(): void => setStep(3)}>
            <View style={[styles.bubbleBox, styles.secondBubble]}>
              <View style={styles.bubbleTriangleTop} />
              <Text style={styles.bubbleText}>{t('homeTour.pause')}</Text>
              <View style={styles.bubbleActions}>
                <Text style={styles.done}>{t('homeTour.next')}</Text>
                <Icon name="chevron-right" size={18} style={styles.nextIcon} />
              </View>
            </View>
          </TouchableWithoutFeedback>
        )}
        <Text style={styles.radius1} />
        <Icon name="pause" style={styles.radius1Icon} size={30}></Icon>
        <Text style={styles.radius2} />
        <Text style={styles.radius3} />
      </View>
      {
        // <Text style={styles.contacts}>just a few contacts around you</Text>
      }
      {step === 3 && (
        <TouchableWithoutFeedback
          onPress={(): void => {
            AsyncStorage.setItem('userHasSeenOnboarding', 'true');
            navigation.navigate('Home');
          }}>
          <View style={[styles.bubbleBox, styles.thirdBubble]}>
            <Text style={styles.bubbleText}>{t('homeTour.report')}</Text>
            <View style={styles.bubbleActions}>
              <Text style={styles.done}>{t('homeTour.done')}</Text>
              <Icon name="chevron-right" size={18} style={styles.nextIcon} />
            </View>
            <View style={[styles.bubbleTriangle, styles.bubbleTriangleLeft]} />
          </View>
        </TouchableWithoutFeedback>
      )}
      <Text style={[styles.contacts]}>0 {t('home.contacts')} (avg: n/a)</Text>

      <BottomMenu activate={'Tracing'}></BottomMenu>
    </View>
  );
}

render() {
    const {theme, leaveRequest, onPress} = this.props;
    const leaveTypeColor = leaveRequest.leaveType.color;
    return (
      <>
        <TouchableWithoutFeedback onPress={onPress}>
          <View
            style={{
              padding: theme.spacing * 3,
              paddingBottom: theme.spacing * 4,
            }}>
            <View style={styles.chipView}>
              <Chip
                style={[
                  {
                    paddingVertical: theme.spacing,
                    paddingHorizontal: theme.spacing * 3,
                    marginVertical: theme.spacing * 2,
                  },
                  leaveTypeColor
                    ? {backgroundColor: leaveTypeColor}
                    : undefined,
                ]}>
                <Text
                  numberOfLines={1}
                  style={[
                    leaveTypeColor
                      ? {color: theme.typography.lightColor}
                      : {color: theme.typography.darkColor},
                  ]}>
                  {leaveRequest.leaveType.type}
                  {leaveRequest.leaveType.deleted === LEAVE_TYPE_DELETED_YES
                    ? ' (Deleted)'
                    : ''}
                </Text>
              </Chip>
            </View>
            <View style={{paddingHorizontal: theme.spacing * 2}}>
              <Text
                style={{
                  color: theme.palette.secondary,
                  paddingBottom: theme.spacing,
                }}>
                <FormattedDate nested>{leaveRequest.fromDate}</FormattedDate>
                {leaveRequest.fromDate !== leaveRequest.toDate ? (
                  <>
                    {' to '}
                    <FormattedDate nested>{leaveRequest.toDate}</FormattedDate>
                  </>
                ) : null}
              </Text>
              <Text style={{fontSize: theme.typography.smallFontSize}}>
                {leaveRequest.leaveBreakdown}
              </Text>
            </View>
          </View>
        </TouchableWithoutFeedback>
      </>
    );
  }

export function ActionSheet(props: Props) {
  const styles = useStyles();

  const {
    options,
    cancelButtonIndex,
    actionItemOnPress,
    onClose,
    visible,
    animationType = 'none',
    transparent = true,
    style,
    ...otherProps
  } = props;

  //reorder cancel item
  const cancelOption =
    cancelButtonIndex != null && options.splice(cancelButtonIndex, 1);
  cancelOption && options.push(cancelOption[0]);

  const firstItemIndex = 0;
  const lastItemNoCancelIndex = options.length - (!cancelOption ? 1 : 2);
  const lastItemIndex = cancelOption ? options.length - 1 : -1;

  return (
    <Modal
      visible={visible}
      animationType={animationType}
      transparent={transparent}
      {...otherProps}
    >
      <TouchableWithoutFeedback onPressOut={onClose}>
        <SafeAreaView style={[styles.container, style]}>
          {options.map(({ label, disabled }, index) => (
            <ActionSheetItem
              key={`actionItem-${index}`}
              label={label}
              disabled={disabled}
              onPress={() => {
                !disabled && actionItemOnPress(index);
                !disabled && onClose();
              }}
              isTop={index === firstItemIndex}
              isBottom={index === lastItemNoCancelIndex}
              isCancelOption={index === lastItemIndex}
            />
          ))}
        </SafeAreaView>
      </TouchableWithoutFeedback>
    </Modal>
  );
}

parseMarkdown = (
  text: string,
  mentionStyle: TextStyle,
  urlStyle?: TextStyle,
  handleURL?: (url: string) => void
) => {
  let textToParse = text;
  let parsedTextArray: Array<React.ReactNode> = [];
  let parseHeadIndex = 0;
  let matches = [...matchAll(text, PATTERNS.MENTION)];

  if (matches.length === 0) {
    let currentParsable = decodeURIComponentSafely(textToParse);
    let matchesURL = [...matchAll(currentParsable, PATTERNS.URL)];
    if (matchesURL.length > 0) {
      parsedTextArray.push(
        <Text key={getKeyComponent()}>
          {currentParsable.substring(0, matchesURL[0].index)}
        </Text>
      );
      matchesURL.map((url, index) => {
        let urlIndex = 0;
        if (typeof url.index !== 'undefined') {
          urlIndex = url.index;
        }
        parsedTextArray.push(
          <TouchableWithoutFeedback
            key={getKeyComponent()}
            onPress={() => (handleURL ? handleURL(url[0]) : null)}
          >
            <Text style={urlStyle}>
              {currentParsable.substring(urlIndex, url[0].length + urlIndex)}
            </Text>
          </TouchableWithoutFeedback>
        );
        parsedTextArray.push(
          <Text key={getKeyComponent()}>
            {currentParsable.substring(
              url[0].length +
                (typeof url.index !== 'undefined' ? url.index : 0),
              index === matchesURL.length - 1
                ? currentParsable.length
                : matchesURL[index + 1].index
            )}
          </Text>
        );
      });
    } else {
      return <Text>{decodeURIComponentSafely(textToParse)}</Text>;
    }
    return parsedTextArray;
  }
  matches.map((match, index) => {
    const matchedUser = match[0].slice(2, -1);
    const mention = {
      id: matchedUser.split('::')[1],
      name: matchedUser.split('::')[0],
    };

    let currentParsable = decodeURIComponentSafely(
      textToParse.substring(parseHeadIndex, match.index)
    );
    let matchesURL = [...matchAll(currentParsable, PATTERNS.URL)];
    if (matchesURL.length > 0) {
      parsedTextArray.push(
        <Text key={getKeyComponent()}>
          {currentParsable.substring(0, matchesURL[0].index)}
        </Text>
      );
      matchesURL.map((url, index) => {
        let urlIndex = 0;
        if (typeof url.index !== 'undefined') {
          urlIndex = url.index;
        }
        parsedTextArray.push(
          <TouchableWithoutFeedback
            key={getKeyComponent()}
            onPress={() => (handleURL ? handleURL(url[0]) : null)}
          >
            <Text style={urlStyle}>
              {currentParsable.substring(urlIndex, url[0].length + urlIndex)}
            </Text>
          </TouchableWithoutFeedback>
        );
        parsedTextArray.push(
          <Text key={getKeyComponent()}>
            {currentParsable.substring(
              url[0].length + urlIndex,
              index === matchesURL.length - 1
                ? currentParsable.length
                : matchesURL[index + 1].index
            )}
          </Text>
        );
      });
    } else {
      parsedTextArray.push(
        <Text key={getKeyComponent()}>
          {decodeURIComponentSafely(
            textToParse.substring(parseHeadIndex, match.index)
          )}
        </Text>
      );
    }
    parsedTextArray.push(
      <TouchableWithoutFeedback
        onPress={() => (handleURL ? handleURL(mention.id) : null)}
      >
        <Text style={mentionStyle} key={getKeyComponent()}>{`@${decodeURI(
          mention.name
        )}`}</Text>
      </TouchableWithoutFeedback>
    );
    if (typeof match.index === 'number') {
      parseHeadIndex = match.index + match[0].length;
    }

    if (index === matches.length - 1) {
      let lastParsable = decodeURIComponentSafely(
        textToParse.substring(parseHeadIndex, textToParse.length)
      );
      let matchesURL = [...matchAll(lastParsable, PATTERNS.URL)];
      if (matchesURL.length > 0) {
        parsedTextArray.push(
          <Text key={getKeyComponent()}>
            {lastParsable.substring(0, matchesURL[0].index)}
          </Text>
        );
        matchesURL.map((url, index) => {
          let urlIndex = 0;
          if (typeof url.index !== 'undefined') {
            urlIndex = url.index;
          }
          parsedTextArray.push(
            <TouchableWithoutFeedback
              key={getKeyComponent()}
              onPress={() => (handleURL ? handleURL(url[0]) : null)}
            >
              <Text style={urlStyle}>
                {lastParsable.substring(urlIndex, url[0].length + urlIndex)}
              </Text>
            </TouchableWithoutFeedback>
          );
          parsedTextArray.push(
            <Text key={getKeyComponent()}>
              {lastParsable.substring(
                url[0].length + urlIndex,
                index === matchesURL.length - 1
                  ? lastParsable.length
                  : matchesURL[index + 1].index
              )}
            </Text>
          );
        });
      } else {
        parsedTextArray.push(
          <Text key={getKeyComponent()}>
            {decodeURIComponentSafely(
              textToParse.substring(parseHeadIndex, textToParse.length)
            )}
          </Text>
        );
      }
    }
  });
  return parsedTextArray;
}