use togglebutton component

src/components/forms/ToggleButton.tsx

@@ -36,7 +36,7 @@ export function Group({children, multiple, ...props}: GroupProps) {
 
 export function Button({children, ...props}: ItemProps) {
   return (
-    <Toggle.Item {...props} style={[a.flex_grow]}>
+    <Toggle.Item {...props} style={[a.flex_grow, a.flex_1]}>
       <ButtonInner>{children}</ButtonInner>
     </Toggle.Item>
   )

src/view/com/composer/labels/LabelsBtn.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Keyboard, View} from 'react-native'
+import {Keyboard, LayoutAnimation, View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -8,9 +8,9 @@ import {isNative} from '#/platform/detection'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
+import * as ToggleButton from '#/components/forms/ToggleButton'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
 import {Text} from '#/components/Typography'
-import {SelectableBtn} from '../../util/forms/SelectableBtn'
 
 const ADULT_CONTENT_LABELS = ['sexual', 'nudity', 'porn']
 
@@ -27,16 +27,10 @@ export function LabelsBtn({
   const t = useTheme()
   const {_} = useLingui()
 
-  const toggleAdultLabel = (label: string) => {
-    const hadLabel = labels.includes(label)
-    const stripped = labels.filter(l => !ADULT_CONTENT_LABELS.includes(l))
-    const final = !hadLabel ? stripped.concat([label]) : stripped
-    onChange(final)
-  }
-
   const removeAdultLabel = () => {
     const final = labels.filter(l => !ADULT_CONTENT_LABELS.includes(l))
     onChange(final)
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
   }
 
   const hasAdultSelection =
@@ -44,6 +38,10 @@ export function LabelsBtn({
     labels.includes('nudity') ||
     labels.includes('porn')
 
+  if (!hasMedia && hasAdultSelection) {
+    removeAdultLabel()
+  }
+
   return (
     <>
       <Button
@@ -92,47 +90,50 @@ export function LabelsBtn({
                 <Text style={[a.font_bold, a.text_lg]}>
                   <Trans>Adult Content</Trans>
                 </Text>
-                {hasAdultSelection ? (
+
-                  <Button
+                <Button
-                    label={_(msg`Remove`)}
+                  label={_(msg`Remove`)}
-                    variant="ghost"
+                  variant="ghost"
-                    onPress={removeAdultLabel}>
+                  color="primary"
-                    <ButtonText>
+                  size="xsmall"
-                      <Trans>Remove</Trans>
+                  onPress={removeAdultLabel}
-                    </ButtonText>
+                  disabled={!hasAdultSelection}
-                  </Button>
+                  style={{opacity: hasAdultSelection ? 1 : 0}}
-                ) : null}
+                  aria-hidden={!hasAdultSelection}>
+                  <ButtonText>
+                    <Trans>Remove</Trans>
+                  </ButtonText>
+                </Button>
               </View>
               {hasMedia ? (
                 <>
-                  <View style={a.flex_row}>
+                  <ToggleButton.Group
-                    <SelectableBtn
+                    label={_(msg`Adult Content labels`)}
-                      testID="sexualLabelBtn"
+                    values={labels}
-                      selected={labels.includes('sexual')}
+                    onChange={values => {
-                      left
+                      onChange(values)
-                      label={_(msg`Suggestive`)}
+                      LayoutAnimation.configureNext(
-                      onSelect={() => toggleAdultLabel('sexual')}
+                        LayoutAnimation.Presets.easeInEaseOut,
-                      accessibilityHint=""
+                      )
-                      style={a.flex_1}
+                    }}>
-                    />
+                    <ToggleButton.Button
-                    <SelectableBtn
+                      name="sexual"
-                      testID="nudityLabelBtn"
+                      label={_(msg`Suggestive`)}>
-                      selected={labels.includes('nudity')}
+                      <ToggleButton.ButtonText>
-                      label={_(msg`Nudity`)}
+                        <Trans>Suggestive</Trans>
-                      onSelect={() => toggleAdultLabel('nudity')}
+                      </ToggleButton.ButtonText>
-                      accessibilityHint=""
+                    </ToggleButton.Button>
-                      style={a.flex_1}
+                    <ToggleButton.Button name="nudity" label={_(msg`Nudity`)}>
-                    />
+                      <ToggleButton.ButtonText>
-                    <SelectableBtn
+                        <Trans>Nudity</Trans>
-                      testID="pornLabelBtn"
+                      </ToggleButton.ButtonText>
-                      selected={labels.includes('porn')}
+                    </ToggleButton.Button>
-                      label={_(msg`Porn`)}
+                    <ToggleButton.Button name="porn" label={_(msg`Porn`)}>
-                      right
+                      <ToggleButton.ButtonText>
-                      onSelect={() => toggleAdultLabel('porn')}
+                        <Trans>Porn</Trans>
-                      accessibilityHint=""
+                      </ToggleButton.ButtonText>
-                      style={a.flex_1}
+                    </ToggleButton.Button>
-                    />
+                  </ToggleButton.Group>
-                  </View>
 
                   <Text style={[a.mt_sm, t.atoms.text_contrast_medium]}>
                     {labels.includes('sexual') ? (