Function HeaderControls

examples/react-native/shopping-list/app/_layout.tsx:21–150

({ onAppRefresh }: { onAppRefresh: () => void })

import { ShoppingProvider, useShopping } from '../src/db/ShoppingContext'

function HeaderControls({ onAppRefresh }: { onAppRefresh: () => void }) {
  const {
    isOnline,
    isSimulatedOffline,
    setSimulateOffline,
    clearLocalState,
    pendingCount,
  } = useShopping()
  const [menuVisible, setMenuVisible] = useState(false)
  const [isClearingState, setIsClearingState] = useState(false)

  const closeMenu = useCallback(() => {
    setMenuVisible(false)
  }, [])

  const toggleSimulatedOffline = useCallback(() => {
    setMenuVisible(false)
    void setSimulateOffline(!isSimulatedOffline)
  }, [isSimulatedOffline, setSimulateOffline])

  const clearAndRefresh = useCallback(() => {
    setMenuVisible(false)
    // Delay the alert one tick so iOS can fully dismiss the modal first.
    setTimeout(() => {
      Alert.alert(
        `Clear local state`,
        `This clears local SQLite data and queued offline transactions, then refreshes the app.`,
        [
          { text: `Cancel`, style: `cancel` },
          {
            text: `Clear`,
            style: `destructive`,
            onPress: () => {
              if (isClearingState) return
              setIsClearingState(true)
              void (async () => {
                try {
                  await clearLocalState()
                  onAppRefresh()
                } catch (error) {
                  console.error(`[Shopping] Failed to clear local state`, error)
                  Alert.alert(
                    `Clear failed`,
                    error instanceof Error ? error.message : `Unknown error`,
                  )
                } finally {
                  setIsClearingState(false)
                }
              })()
            },
          },
        ],
      )
    }, 0)
  }, [clearLocalState, isClearingState, onAppRefresh])

  const statusLabel = isOnline
    ? `Online`