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,109 @@
+// @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,
+ +setError: SetState,
+};
+
+function RemoveTagButton(props: Props): React.Node {
+ const { communityID, channelID, 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';
+
+ 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
@@ -5,6 +5,7 @@
import type { CommunityInfo } from 'lib/types/community-types.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';
@@ -64,6 +65,20 @@
styles.noChannelText,
]);
+ const sectionButton = React.useMemo(
+ () =>
+ communityInfo?.farcasterChannelID ? (
+
+ ) : (
+
+ ),
+ [communityID, communityInfo?.farcasterChannelID],
+ );
+
const tagFarcasterChannel = React.useMemo(
() => (
@@ -78,7 +93,7 @@
{channelNameTextContent}
-
+ {sectionButton}
{errorMessage}
@@ -90,7 +105,7 @@
styles.channelNameContainer,
styles.errorContainer,
channelNameTextContent,
- communityID,
+ sectionButton,
errorMessage,
],
);