Username Edit Bottom Sheet Implementation Guide

Usage

This implementation uses @gorhom/bottom-sheet and Tamagui to provide a native-feeling, theme-aware bottom sheet for editing the user's username. The sheet is triggered from the profile screen and uses a Tamagui Card for content, with a BottomSheetTextInput for keyboard handling.

Example:

import BottomSheet, { BottomSheetView, BottomSheetTextInput } from '@gorhom/bottom-sheet'
import { useTheme, Card, XStack, Button, Text } from 'tamagui'
import { Keyboard } from 'react-native'

// ...inside your component
const [sheetOpen, setSheetOpen] = useState(false)
const bottomSheetRef = useRef<BottomSheet>(null)
const snapPoints = useMemo(() => ['32%'], [])
const theme = useTheme()

<BottomSheet
  ref={bottomSheetRef}
  index={sheetOpen ? 0 : -1}
  snapPoints={snapPoints}
  enablePanDownToClose
  onClose={() => setSheetOpen(false)}
  onChange={idx => setSheetOpen(idx === 0)}
  backgroundComponent={({ style }) => (
    <View style={[style, { backgroundColor: theme.background?.get() || '#fff', borderTopLeftRadius: 24, borderTopRightRadius: 24 }]} />
  )}
>
  <BottomSheetView>
    <Card backgroundColor="$background" p={24} gap={16} borderTopLeftRadius={24} borderTopRightRadius={24}>
      <Text heading>Edit Username</Text>
      <BottomSheetTextInput
        value={usernameInput}
        onChangeText={setUsernameInput}
        placeholder="Enter new username"
        style={styles.input}
        autoCapitalize="none"
        autoCorrect={false}
      />
      <XStack gap={12} mt={16}>
        <Button flex={1} onPress={handleSave} disabled={updateUsername.status === 'pending'}>
          <Text button>Save</Text>
        </Button>
        <Button flex={1} onPress={() => { setSheetOpen(false); bottomSheetRef.current?.close(); Keyboard.dismiss(); }} variant="outlined">
          <Text button>Cancel</Text>
        </Button>
      </XStack>
    </Card>
  </BottomSheetView>
</BottomSheet>

Key usage points:

• Open the sheet by setting sheetOpen to true.
• The sheet's open state is controlled by index and synchronized with onChange.
• Save and Cancel both close the sheet and dismiss the keyboard for a smooth UX.
• The input uses BottomSheetTextInput for best keyboard handling.
• The sheet background uses Tamagui theme tokens for consistency.

Advantages

• Native performance: Uses @gorhom/bottom-sheet for smooth gestures and keyboard handling.
• Theme support: All content and backgrounds use Tamagui theme tokens.
• Keyboard handling: Uses BottomSheetTextInput and manually dismisses the keyboard on close.
• State sync: Sheet open/close state is always in sync with UI and logic.
• Accessibility: Uses accessible buttons and input.

Potential Limitations

• Component is not yet extracted: The bottom sheet logic and UI are in the profile screen, which can make reuse harder.
• Custom styling: Some style props are duplicated between Tamagui and the custom background.
• No animation callbacks: If you need to react to sheet open/close animations, you may need to add more event handlers.
• No validation feedback: Username validation errors are only shown as alerts.
• No loading indicator in sheet: The Save button disables on submit, but no spinner is shown.

Future Improvements

• Extract to a reusable component: Move the bottom sheet and its logic to a separate component for reuse and cleaner code.
• Centralize style handling: Use a single source of truth for border radius, padding, and background color.
• Add loading and error feedback: Show a spinner or error message inside the sheet instead of just disabling the button or using alerts.
• Support for other fields: Make the sheet generic to support editing other profile fields.
• Accessibility improvements: Add accessibility labels and test with screen readers.
• Animation and focus management: Optionally focus the input on open, and handle animation callbacks for advanced UX.

---

For questions or improvements, see the profile screen implementation or contact the frontend team.