rebreak-monorepo/apps/rebreak-native/lib/useNativeActionSheet.ts
chahinebrini 3c52d8869e feat(native): WIP checkpoint — Profile/Settings/Demographics + WheelPicker + Maestro
Rollback-Punkt vor Expo SDK 54 / RN 0.81 Upgrade.

UI/UX:
- Profile: ProfileHeader redesign (sign-in chip + member-since), StatsBar 3 pill cards,
  Demographics accordion completed (Geburtsjahr, Geschlecht, Familienstand, Beruf-split,
  Wohnort), Pro-Trial-Banner, Approved-Domains list, DigaMissionBanner
- Settings: section-based layout, neutral icons (matched Header dropdown style)
- Header dropdown: extended with logout + games-page link
- Notifications page: skeleton dummy data
- Locales: i18n keys for new screens

New components:
- WheelPickerModal: native iOS UIPickerView wheel for long lists (Geburtsjahr 91 items,
  Bundesland 16, Stadt 30+/Bundesland)
- OptionsBottomSheet: iOS-style options sheet (used briefly for Geschlecht, currently
  unused — kept for potential future use)
- germanCities.ts: Top-cities per Bundesland (DSGVO-clean static data)

New libs (NewArch-codegen verified):
- @react-native-menu/menu 2.0.0 (UIMenu wrapper, Apple HIG-konform)
- @lodev09/react-native-true-sheet 3.10.1 (UISheetPresentationController wrapper —
  ABER incompatible mit RN 0.79.6, Build-Error → Trigger für SDK-54-Upgrade)

Maestro E2E:
- Initial setup mit auth/community/profile/urge flows

Scripts:
- build-ios-clean.sh: Xcode DerivedData + ios/build cleanup vor expo run:ios

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-08 19:32:27 +02:00

49 lines
1.7 KiB
TypeScript

/**
* useNativeActionSheet — Cross-Platform Action-Sheet mit garantiert nativem iOS-Bottom-Sheet.
*
* Problem: `@expo/react-native-action-sheet`'s Auto-Detection bricht in pnpm-Monorepo wegen
* `unstable_enablePackageExports: true` in metro.config — Metro resolved auf JS-Fallback
* (centered pills) statt iOS-native bottom-sheet.
*
* Fix: Platform.OS === 'ios' → ActionSheetIOS direkt aus react-native core (immer native).
* Android → @expo/react-native-action-sheet's Material-Style Custom-Sheet.
*/
import { Platform, ActionSheetIOS } from 'react-native';
import { useActionSheet as usePackageActionSheet } from '@expo/react-native-action-sheet';
import type { ActionSheetIOSOptions } from 'react-native';
type Options = {
title?: string;
message?: string;
options: string[];
cancelButtonIndex?: number;
destructiveButtonIndex?: number;
tintColor?: string;
};
type Callback = (idx: number | undefined) => void;
export function useNativeActionSheet(): {
showActionSheetWithOptions: (options: Options, callback: Callback) => void;
} {
const { showActionSheetWithOptions: showPackageSheet } = usePackageActionSheet();
return {
showActionSheetWithOptions: (options, callback) => {
if (Platform.OS === 'ios') {
const iosOptions: ActionSheetIOSOptions = {
options: options.options,
cancelButtonIndex: options.cancelButtonIndex,
destructiveButtonIndex: options.destructiveButtonIndex,
title: options.title,
message: options.message,
tintColor: options.tintColor,
};
ActionSheetIOS.showActionSheetWithOptions(iosOptions, callback);
} else {
showPackageSheet(options, callback);
}
},
};
}