react-native#ActionSheetIOS TypeScript Examples

export function asyncActionSheetConfirm(config: {
  title        : string; 
  message      : string; 
  confirmText  : string; 
  isDestructive?: boolean;
}){
  const isDestructive = config.isDestructive ?? false;

  return new Promise(resolve => {
    ActionSheetIOS.showActionSheetWithOptions({
      title  : config.title,
      message: config.message,

      options: ['Cancel', config.confirmText],
      cancelButtonIndex: 0,
      ...(isDestructive && {
        destructiveButtonIndex: 1,
      }),
    }, (buttonIndex) => {
      resolve((buttonIndex === 1));
    });
  });
}

export function asyncActionSheet(config: ActionSheetIOSOptions){
  return new Promise(resolve => {
    ActionSheetIOS.showActionSheetWithOptions(config, (buttonIndex) => {
      resolve(buttonIndex);
    });
  });
}

CustomPicker = ({
  list,
  selectedValue,
  onSelected,
  prefix,
  prompt,
  style,
  labelCreator,
  dropdownIconColor,
  iosTextStyle,
}: Props) => {
  const styles = getDimensionedStyles();
  switch (Platform.OS) {
    case 'ios':
      return (
        <TouchableOpacity
          style={[styles.iosContainer, style]}
          onPress={() => {
            ActionSheetIOS.showActionSheetWithOptions(
              {
                options: labelCreator ? list.map((e) => labelCreator(e)) : list,
              },
              (index) => {
                onSelected(list[index]);
              },
            );
          }}>
          <Text style={[styles.iosLabel, iosTextStyle]}>{`${
            prefix ? prefix : ''
          }${
            labelCreator ? labelCreator(selectedValue) : selectedValue
          }`}</Text>
          <Text style={iosTextStyle}>{'\u25BC'}</Text>
        </TouchableOpacity>
      );
    default:
      return (
        <Picker
          style={[styles.picker, style]}
          selectedValue={selectedValue}
          prompt={prompt}
          dropdownIconColor={dropdownIconColor || 'black'}
          onValueChange={onSelected}>
          {list.map((item, i) => {
            return (
              <Picker.Item
                key={i}
                label={`${prefix ? prefix : ''}${
                  labelCreator ? labelCreator(item) : item
                }`}
                value={item}
              />
            );
          })}
        </Picker>
      );
  }
}

export default function EmailAddressItem(props: Props) {
  const styles = useStyles();
  const { colors } = useTheme();

  const { emailAddress, type, onSetLoading } = props;

  const [showOptions, setShowOptions] = useState(false);

  const storage = useStorage();
  const username = storage.getItem('user')?.username || '';

  const ios = Platform.OS === 'ios';

  const {
    setPrimaryEmail,
    loading: setPrimaryEmailLoading,
  } = useSetPrimaryEmail({
    variables: {
      selectedEmail: emailAddress,
      username,
    },
    onError: (error) => {
      errorHandlerAlert(error);
    },
    refetchQueries: [
      {
        query: PROFILE,
        variables: { username },
      },
    ],
  });

  const { deleteEmail, loading: deleteEmailLoading } = useDeleteEmail({
    variables: {
      selectedEmail: emailAddress,
      username,
    },
    onCompleted: () => {
      Alert.alert(
        'Success!',
        t('{emailAddress} has been successfully deleted', { emailAddress }),
        [{ text: t('Got it') }],
      );
    },
    onError: (error) => {
      errorHandlerAlert(error);
    },
    refetchQueries: [
      {
        query: PROFILE,
        variables: { username },
      },
    ],
  });

  const onSetPrimaryEmail = () => {
    if (!ios) {
      setShowOptions(false);
    }
    setPrimaryEmail();
  };

  const onDeleteEmail = () => {
    if (!ios) {
      setShowOptions(false);
    }
    deleteEmail();
  };

  const showAlert = () =>
    Alert.alert(
      t('Delete Email?'),
      t('Are you sure you want to delete this email address?'),
      [
        {
          text: t('Cancel'),
          onPress: () => {
            if (!ios) {
              setShowOptions(false);
            }
          },
        },
        {
          text: t('Delete'),
          onPress: onDeleteEmail,
        },
      ],
    );

  const onPressMoreVert = () => {
    if (ios) {
      ActionSheetIOS.showActionSheetWithOptions(
        {
          options:
            type === 'SECONDARY'
              ? SecondaryEmailOptions
              : UnconfirmedEmailOptions,
          cancelButtonIndex: type === 'SECONDARY' ? 2 : 1,
          destructiveButtonIndex: type === 'SECONDARY' ? 1 : 0,
        },
        (btnIndex) => {
          if (btnIndex === 0 && type === 'SECONDARY') {
            onSetPrimaryEmail();
          } else if (
            (btnIndex === 0 && type === 'UNCONFIRMED') ||
            (btnIndex === 1 && type === 'SECONDARY')
          ) {
            showAlert();
          }
        },
      );
    } else {
      setShowOptions(true);
    }
  };

  if (setPrimaryEmailLoading || deleteEmailLoading) {
    onSetLoading(true);
  }

  return (
    <>
      <>
        <View style={styles.container}>
          <View style={styles.content}>
            <Text>{emailAddress}</Text>
            {type === 'PRIMARY' && (
              <Text size="s" color="textLight" style={styles.primary}>
                {t('Primary Email Address')}
              </Text>
            )}
            {type === 'UNCONFIRMED' && (
              <Text size="s" color="textLight" style={styles.primary}>
                {t('Unverified')}
              </Text>
            )}
          </View>
          {type !== 'PRIMARY' &&
            (deleteEmailLoading ? (
              <ActivityIndicator />
            ) : (
              <TouchableOpacity
                onPress={onPressMoreVert}
                hitSlop={{ top: 15, bottom: 15, left: 15, right: 15 }}
              >
                <Icon name="MoreVert" color={colors.textLighter} />
              </TouchableOpacity>
            ))}
        </View>
        <Divider />
      </>
      {!ios && (
        <Modal visible={showOptions} animationType="fade" transparent={true}>
          <TouchableWithoutFeedback onPressOut={() => setShowOptions(false)}>
            <View style={styles.androidModalContainer}>
              {type === 'SECONDARY' && (
                <TouchableOpacity
                  style={styles.buttonContainer}
                  onPress={onSetPrimaryEmail}
                >
                  <Text style={styles.text} color="pureBlack" size="s">
                    {t('Set as primary')}
                  </Text>
                </TouchableOpacity>
              )}
              <TouchableOpacity
                style={styles.buttonContainer}
                onPress={showAlert}
              >
                <Text style={styles.text} color="error" size="s">
                  {t('Delete')}
                </Text>
              </TouchableOpacity>
            </View>
          </TouchableWithoutFeedback>
        </Modal>
      )}
    </>
  );
}

export default function Notifications() {
  const styles = useStyles();
  const { colors } = useTheme();

  const ios = Platform.OS === 'ios';

  const { navigate } = useNavigation<StackNavProp<'Notifications'>>();

  const navToPostDetail = (postDetailParams: StackParamList['PostDetail']) => {
    navigate('PostDetail', postDetailParams);
  };

  const navToMessageDetail = (
    messageDetailParams: StackParamList['MessageDetail'],
  ) => {
    navigate('MessageDetail', messageDetailParams);
  };

  const navToUserInformation = (
    userInformationParams: StackParamList['UserInformation'],
  ) => {
    navigate('UserInformation', userInformationParams);
  };

  const [page, setPage] = useState<number>(1);
  const [isLoadMore, setIsLoadMore] = useState(false);
  const [errorMsg, setErrorMsg] = useState<string>('');
  const [showMore, setShowMore] = useState<boolean>(false);
  const [loadMorePolicy, setLoadMorePolicy] = useState<boolean>(false);

  const { data, loading, error, refetch, fetchMore } = useNotification({
    variables: { page },
    onError: (error) => {
      setErrorMsg(errorHandler(error, true));
    },
    nextFetchPolicy: loadMorePolicy ? 'cache-first' : 'no-cache',
  });

  const { markAsRead, loading: markAsReadLoading } = useMarkRead({
    onError: () => {},
  });

  const { singleBadge } = useSingleBadge({
    onCompleted: () => {
      refetch({ page: 1 });
    },
  });

  const onRefresh = () => {
    refetch();
  };

  const onPressMore = () => {
    if (ios) {
      ActionSheetIOS.showActionSheetWithOptions(
        {
          options: ['Mark All as Read', 'Cancel'],
          cancelButtonIndex: 1,
        },
        async (btnIndex) => {
          if (btnIndex === 0) {
            await markAsRead();
            refetch({ page: 1 });
          }
        },
      );
    } else {
      setShowMore(true);
    }
  };

  let rawNotifications = data?.notification.notifications ?? [];
  let handledNotifications = notificationHandler(
    rawNotifications,
    navToPostDetail,
    navToMessageDetail,
    navToUserInformation,
  );

  useEffect(() => {
    if (
      data?.notification.totalRowsNotifications === handledNotifications.length
    ) {
      setIsLoadMore(false);
    } else {
      setIsLoadMore(true);
    }
  }, [data, handledNotifications]);

  if (error) {
    return <LoadingOrError message={errorMsg} />;
  }

  if (handledNotifications.length < 1) {
    if (loading) {
      return <LoadingOrError loading />;
    }
    return <LoadingOrError message={t('No Notifications available')} />;
  }

  const loadMore = () => {
    setLoadMorePolicy(true);
    if (!isLoadMore || loading) {
      return;
    }
    const nextPage = page + 1;
    fetchMore({
      variables: { page: nextPage },
    }).then(() => {
      setLoadMorePolicy(false);
      setPage(nextPage);
    });
  };

  const getItem = (data: Array<NotificationDataType>, index: number) =>
    data[index];

  const getItemCount = (data: Array<NotificationDataType>) => data.length;

  const getItemLayout = (data: NotificationDataType, index: number) => ({
    length: 78.7,
    offset: 78.7 * index,
    index,
  });

  const keyExtractor = ({ id }: NotificationDataType) => `notif-${id}`;

  function renderItem({ item }: { item: NotificationDataType }) {
    const {
      id,
      topicId,
      name,
      message,
      createdAt,
      hasIcon,
      seen,
      onPress,
    } = item;

    return (
      <NotificationItem
        name={name}
        message={message}
        createdAt={createdAt}
        isMessage={hasIcon}
        seen={seen}
        onPress={() => {
          if (item.badgeId) {
            onPress(item.badgeId);
            singleBadge({ variables: { id: item.badgeId } });
          } else {
            onPress(topicId);
            markAsRead({ variables: { notificationId: id } }).then(() =>
              refetch({ page: 1 }),
            );
          }
        }}
      />
    );
  }

  return (
    <>
      <SafeAreaView style={styles.container}>
        <CustomHeader
          title={t('Notifications')}
          rightIcon="More"
          onPressRight={onPressMore}
          isLoading={markAsReadLoading}
        />
        <VirtualizedList
          data={handledNotifications}
          refreshControl={
            <RefreshControl
              refreshing={loading}
              onRefresh={onRefresh}
              tintColor={colors.primary}
            />
          }
          getItem={getItem}
          getItemCount={getItemCount}
          renderItem={renderItem}
          keyExtractor={keyExtractor}
          getItemLayout={getItemLayout}
          onEndReached={loadMore}
          ListFooterComponent={
            <FooterLoadingIndicator isHidden={!isLoadMore} />
          }
          style={styles.notificationContainer}
        />
      </SafeAreaView>
      <TouchableOpacity>
        {!ios && data && (
          <Modal visible={showMore} animationType="fade" transparent={true}>
            <TouchableWithoutFeedback onPressOut={() => setShowMore(false)}>
              <View style={styles.androidModalContainer}>
                <TouchableOpacity
                  style={styles.modalButtonContainer}
                  onPress={() => {
                    markAsRead().then(() => refetch({ page: 1 }));
                    setShowMore(false);
                  }}
                >
                  <Text style={styles.modalText} color="pureBlack" size="l">
                    {t('Mark All as Read')}
                  </Text>
                </TouchableOpacity>
              </View>
            </TouchableWithoutFeedback>
          </Modal>
        )}
      </TouchableOpacity>
    </>
  );
}