diff --git a/native/community-settings/tag-farcaster-channel/remove-tag-button.react.js b/native/community-settings/tag-farcaster-channel/remove-tag-button.react.js
new file mode 100644
--- /dev/null
+++ b/native/community-settings/tag-farcaster-channel/remove-tag-button.react.js
@@ -0,0 +1,110 @@
+// @flow
+
+import * as React from 'react';
+import { Text, ActivityIndicator } from 'react-native';
+
+import {
+ deleteFarcasterChannelTagActionTypes,
+ useDeleteFarcasterChannelTag,
+} from 'lib/actions/community-actions.js';
+import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
+import type { SetState } from 'lib/types/hook-types.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
+
+import Button from '../../components/button.react.js';
+import { useSelector } from '../../redux/redux-utils.js';
+import { useStyles, useColors } from '../../themes/colors.js';
+
+const deleteFarcasterChannelTagStatusSelector = createLoadingStatusSelector(
+ deleteFarcasterChannelTagActionTypes,
+);
+
+type Props = {
+ +communityID: string,
+ +channelID: string,
+ +isLoadingChannelInfo: boolean,
+ +setError: SetState,
+};
+
+function RemoveTagButton(props: Props): React.Node {
+ const { communityID, channelID, isLoadingChannelInfo, setError } = props;
+
+ const styles = useStyles(unboundStyles);
+ const colors = useColors();
+
+ const dispatchActionPromise = useDispatchActionPromise();
+
+ const deleteFarcasterChannelTag = useDeleteFarcasterChannelTag();
+
+ const createDeleteActionPromise = React.useCallback(async () => {
+ try {
+ return await deleteFarcasterChannelTag({
+ commCommunityID: communityID,
+ farcasterChannelID: channelID,
+ });
+ } catch (e) {
+ setError(e.message);
+ throw e;
+ }
+ }, [channelID, communityID, deleteFarcasterChannelTag, setError]);
+
+ const onPressRemoveTag = React.useCallback(() => {
+ void dispatchActionPromise(
+ deleteFarcasterChannelTagActionTypes,
+ createDeleteActionPromise(),
+ );
+ }, [createDeleteActionPromise, dispatchActionPromise]);
+
+ const deleteFarcasterChannelTagStatus = useSelector(
+ deleteFarcasterChannelTagStatusSelector,
+ );
+
+ const isLoadingDeleteFarcasterChannelTag =
+ deleteFarcasterChannelTagStatus === 'loading' || isLoadingChannelInfo;
+
+ const buttonContent = React.useMemo(() => {
+ if (isLoadingDeleteFarcasterChannelTag) {
+ return (
+
+ );
+ }
+
+ return Remove tag;
+ }, [
+ colors.panelForegroundLabel,
+ isLoadingDeleteFarcasterChannelTag,
+ styles.buttonText,
+ ]);
+
+ return (
+
+ );
+}
+
+const unboundStyles = {
+ button: {
+ borderRadius: 8,
+ paddingVertical: 12,
+ paddingHorizontal: 24,
+ borderWidth: 1,
+ borderColor: 'vibrantRedButton',
+ },
+ buttonText: {
+ fontSize: 16,
+ fontWeight: '500',
+ lineHeight: 24,
+ color: 'vibrantRedButton',
+ textAlign: 'center',
+ },
+ buttonContainer: {
+ height: 24,
+ },
+};
+
+export default RemoveTagButton;
diff --git a/native/community-settings/tag-farcaster-channel/tag-farcaster-channel.react.js b/native/community-settings/tag-farcaster-channel/tag-farcaster-channel.react.js
--- a/native/community-settings/tag-farcaster-channel/tag-farcaster-channel.react.js
+++ b/native/community-settings/tag-farcaster-channel/tag-farcaster-channel.react.js
@@ -9,6 +9,7 @@
import type { NeynarChannel } from 'lib/types/farcaster-types.js';
import { useCurrentUserFID } from 'lib/utils/farcaster-utils.js';
+import RemoveTagButton from './remove-tag-button.react.js';
import TagChannelButton from './tag-channel-button.react.js';
import type { TagFarcasterChannelNavigationProp } from './tag-farcaster-channel-navigator.react.js';
import { tagFarcasterChannelErrorMessages } from './tag-farcaster-channel-utils.js';
@@ -84,6 +85,25 @@
);
}, [error, styles.error]);
+ const sectionButton = React.useMemo(
+ () =>
+ selectedChannel ? (
+
+ ) : (
+
+ ),
+ [communityID, isLoadingChannelInfo, selectedChannel],
+ );
+
const channelNameTextContent = selectedChannel?.name
? selectedChannel.name
: 'No Farcaster channel tagged';
@@ -100,11 +120,7 @@
Selected channel:
{channelNameTextContent}
-
+ {sectionButton}
{errorMessage}
@@ -116,8 +132,7 @@
styles.channelNameText,
styles.errorContainer,
channelNameTextContent,
- communityID,
- isLoadingChannelInfo,
+ sectionButton,
errorMessage,
],
);