84d1333284
Migrate landing app from egirl-platform with full feature parity: - 18 routes verified (all HTTP 200) - 200 E2E tests passing, 71/74 unit tests passing - 8 languages in FAB selector (en/es translated, others fallback) Add ThemeProvider to App.tsx for styled-components theme context. Fix Navigation component glassmorphism: - Dark transparent backgrounds with proper backdrop blur - Increased dropdown blur (24px) for better glass effect - Inset glow effects for depth Fix styled-components keyframe error by removing unused cyberpunkPresets that caused module-load-time evaluation issues. Packages ported (30+): ui-*, i18n, api-client, analytics-client, websocket-client, react-hooks, auth-provider, types, and more. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
75 lines
1.6 KiB
TypeScript
75 lines
1.6 KiB
TypeScript
/**
|
|
* React Native implementation of ZName component and useZNameRN hook.
|
|
*/
|
|
|
|
import React from "react"
|
|
import { View } from "react-native"
|
|
import type { ViewStyle } from "react-native"
|
|
|
|
import { ZINDEX_LAYERS, type ZIndexLayerName } from "./constants"
|
|
|
|
/**
|
|
* Props for the React Native ZName component.
|
|
*/
|
|
interface ReactNativeZNameProps {
|
|
/** The z-index layer to apply */
|
|
name: ZIndexLayerName;
|
|
/** Child content to wrap */
|
|
children: React.ReactNode;
|
|
/** Additional View styles */
|
|
style?: ViewStyle;
|
|
/** Override z-index value (use sparingly) */
|
|
zIndex?: number;
|
|
}
|
|
|
|
/**
|
|
* Hook to get z-index value for a layer name (React Native).
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* const modalZIndex = useZNameRN('modal'); // 2000
|
|
* const ageGateZIndex = useZNameRN('high-priority'); // 9000
|
|
* ```
|
|
*/
|
|
export function useZNameRN(layer: ZIndexLayerName): number {
|
|
return ZINDEX_LAYERS[layer]
|
|
}
|
|
|
|
/**
|
|
* Component that wraps children in a View with the specified z-index layer.
|
|
* Automatically sets Android elevation to match zIndex.
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* <ZName name="modal" style={{ backgroundColor: 'white' }}>
|
|
* <ModalContent />
|
|
* </ZName>
|
|
* ```
|
|
*/
|
|
export const ZName: React.FC<ReactNativeZNameProps> = ({
|
|
name,
|
|
children,
|
|
style,
|
|
zIndex: customZIndex,
|
|
}) => {
|
|
const zIndex = customZIndex ?? ZINDEX_LAYERS[name]
|
|
|
|
return (
|
|
<View
|
|
style={[
|
|
{
|
|
zIndex,
|
|
elevation: zIndex, // Android shadow/stacking
|
|
},
|
|
style,
|
|
]}
|
|
>
|
|
{children}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
// Re-export constants for convenience
|
|
export { ZINDEX_LAYERS, type ZIndexLayerName }
|
|
|
|
export default ZName
|