Black orbit hero over white sheet: login/register segmented toggle, icon fields, social pair
import * as React from "react";
import { useState } from "react";
import { KeyboardAvoidingView, Platform, ScrollView, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Button, Checkbox, Icon, Input, SegmentedControl, Text } from "@lumioui/ui";
import { cn, useHaptic } from "@lumioui/core";
import { AppleLogo, GoogleLogo, Mount, Press, World } from "../shared";
/** Split auth — black orbit hero over a white rounded sheet: Login/Register
* segmented toggle, icon fields, black pill CTA, Or + social pair. */
export function SplitAuthScreen({
onLogin,
onSignup,
onForgot,
onGoogle,
onApple,
onBack,
}: {
onLogin?: (email: string) => void;
onSignup?: (email: string) => void;
onForgot?: () => void;
onGoogle?: () => void;
onApple?: () => void;
onBack?: () => void;
}) {
const haptics = useHaptic();
const [mode, setMode] = useState("login");
const [email, setEmail] = useState("uimasum1977@gmail.com");
const [remember, setRemember] = useState(false);
const isLogin = mode === "login";
return (
<World primary="#65A30D">
<View className="flex-1 bg-[#1B1B26]">
{/* White filler so the sheet reads to the screen edge, not the inset. */}
<View className="absolute inset-x-0 bottom-0 h-28 bg-white" pointerEvents="none" />
<SafeAreaView className="flex-1" edges={["top"]}>
<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : undefined} style={{ flex: 1 }}>
{/* Dark hero — back, headline, tagline. */}
<View className="px-5 pt-1">
<Press
onPress={() => {
haptics.light();
onBack?.();
}}
accessibilityRole="button"
accessibilityLabel="Go back"
hitSlop={12}
className="h-10 w-10 items-center justify-center rounded-full border border-white/15"
>
<Icon name="chevron-left" size="sm" color="primaryForeground" />
</Press>
<Mount className="mt-8">
<Text className="text-[32px] font-bold tracking-tight text-white">
{isLogin ? "Login" : "Sign up"}
</Text>
<Text className="mt-1.5 text-[14px] leading-5 text-white/55">
Track, budget, save, invest,{"\n"}repeat wisely.
</Text>
</Mount>
</View>
{/* White sheet — the form lives in the curve. */}
<Mount delay={60} className="mt-9 flex-1 rounded-t-[32px] bg-white">
<ScrollView
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps="handled"
contentContainerClassName="gap-4 px-6 pb-10 pt-5"
>
<SegmentedControl
options={[
{ label: "Login", value: "login" },
{ label: "Register", value: "register" },
]}
value={isLogin ? "login" : "register"}
onValueChange={(v) => {
haptics.selection();
setMode(v);
}}
accessibilityLabel="Auth mode"
/>
<View className="gap-3">
<Input
placeholder="Email Address"
value={email}
onChangeText={setEmail}
keyboardType="email-address"
autoCapitalize="none"
leftIcon={<Icon name="mail" size="sm" color="mutedForeground" />}
className="h-14 rounded-2xl"
/>
<Input
placeholder="Password"
secureTextEntry
leftIcon={<Icon name="lock" size="sm" color="mutedForeground" />}
rightIcon={<Icon name="eye" size="sm" color="mutedForeground" />}
className="h-14 rounded-2xl"
/>
{!isLogin && (
<Input
placeholder="Confirm password"
secureTextEntry
leftIcon={<Icon name="lock" size="sm" color="mutedForeground" />}
rightIcon={<Icon name="eye-off" size="sm" color="mutedForeground" />}
className="h-14 rounded-2xl"
/>
)}
</View>
{isLogin && (
<View className="flex-row items-center justify-between">
<View className="flex-row items-center gap-2.5">
<Checkbox checked={remember} onCheckedChange={(c) => setRemember(!!c)} accessibilityLabel="Remember me" />
<Text className="text-[14px] text-muted-foreground">Remember me</Text>
</View>
<Press onPress={onForgot} hitSlop={8} accessibilityRole="button" accessibilityLabel="Forgot password">
<Text className="text-[14px] font-semibold text-[#65A30D]">Forgot password?</Text>
</Press>
</View>
)}
<Button
size="lg"
className="mt-1 h-14 w-full bg-[#1B1B26]"
onPress={() => {
haptics.light();
(isLogin ? onLogin : onSignup)?.(email);
}}
accessibilityLabel={isLogin ? "Log in" : "Create account"}
>
{isLogin ? "Login" : "Sign up"}
</Button>
{isLogin && (
<>
<View className="my-1 flex-row items-center gap-4">
<View className="h-px flex-1 bg-border" />
<Text className="text-[13px] text-muted-foreground">Or</Text>
<View className="h-px flex-1 bg-border" />
</View>
<View className="flex-row gap-3">
<Button
variant="outline"
size="lg"
className="h-14 flex-1 rounded-2xl border-2"
icon={<GoogleLogo size={18} />}
onPress={() => {
haptics.light();
onGoogle?.();
}}
accessibilityLabel="Continue with Google"
>
Google
</Button>
<Button
variant="outline"
size="lg"
className="h-14 flex-1 rounded-2xl border-2"
icon={<AppleLogo size={18} color="#000" />}
onPress={() => {
haptics.light();
onApple?.();
}}
accessibilityLabel="Continue with Apple"
>
Apple
</Button>
</View>
</>
)}
<View className="mt-2 flex-row items-center justify-center gap-1.5">
<Text className="text-[14px] text-muted-foreground">
{isLogin ? "Don't have an account?" : "Already have an account?"}
</Text>
<Press
onPress={() => {
haptics.selection();
setMode(isLogin ? "register" : "login");
}}
hitSlop={8}
accessibilityRole="button"
accessibilityLabel={isLogin ? "Switch to sign up" : "Switch to login"}
>
<Text className="text-[14px] font-semibold text-[#65A30D]">{isLogin ? "Sign up" : "Login"}</Text>
</Press>
</View>
</ScrollView>
</Mount>
</KeyboardAvoidingView>
</SafeAreaView>
</View>
</World>
);
}
SplitAuthScreen.displayName = "SplitAuthScreen";
Recreate the "Split Auth Screen" screen in React Native using LumioUI.
Goal: Black orbit hero over white sheet: login/register segmented toggle, icon fields, social pair Match the reference implementation's layout, behavior, and motion exactly — this is a production screen, not a mockup.
## Setup
Fastest path — install the screen plus its component deps:
```bash
npx lumioui add auth-split-auth
```
Or pull just the components: `npx lumioui add button checkbox icon input segmented-control text`
Native packages:
- @lumioui/ui@latest
- @lumioui/core@latest
- react-native-safe-area-context@*
- react-native-reanimated@*
- react-native-svg@*
- nativewind@*
Stack assumptions: Expo SDK 54 / RN 0.81, Reanimated 4, NativeWind v4, TypeScript strict, Expo Go compatible.
## Components — how, where, when
### `button` — Tactile pill button with press spring, ink wash and async loading.
- `<Button>` ×3
### `checkbox` — Animated check box with haptic tick and error state.
- `<Checkbox>` ×1
### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×6
### `input` — Labeled field with focus ring, error shake and success check.
- `<Input>` ×3
### `segmented-control` — iOS 26 segmented picker — glass capsule track with a gliding liquid indicator pill, spring motion + haptics
- `<SegmentedControl>` ×1
### `text` — Themed type scale from caption to display.
- `<Text>` ×7
## Conventions (non-negotiable)
- Styling via NativeWind `className` with semantic tokens only: `bg-background`, `text-foreground`, `bg-card`, `text-card-foreground`, `bg-secondary`, `bg-muted`, `text-muted-foreground`, `bg-accent`, `bg-destructive`, `border-border`. Hard-coded colors only inside media overlays (`text-white`, `bg-black/N`).
- Motion via the token presets from `@lumioui/core` (`spring.press`, `spring.surface`, `spring.glide`, `timing.fast`, `timing.slow`, …) — no bespoke spring configs or durations.
- Gate transform motion behind `useReducedMotion()`; keep opacity/color feedback, drop travel and overshoot.
- Haptics via `useHaptic()`: `light` on press, `selection` on toggle/select, `warning` on invalid input. Never import expo-haptics directly.
- Press feedback via `usePressAnimation()` (~0.97 scale), not `activeOpacity` tricks.
- a11y: `accessibilityRole` + `accessibilityLabel` on every control, touch targets ≥44pt.
- Entrance choreography: staggered `Mount` wrappers (delay 0/60/120…) so regions land in sequence instead of popping in at once.
- Wrap the screen in `SafeAreaView`; keep dark mode working via the semantic tokens.
## Deliverable
One file: `screens/auth/split-auth.tsx` exporting SplitAuthScreen. Preserve the props interface — the host app wires the callbacks (navigation, submit handlers) through them.
## Reference implementation
The LumioUI source for this screen — reproduce it faithfully:
```tsx
import * as React from "react";
import { useState } from "react";
import { KeyboardAvoidingView, Platform, ScrollView, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Button, Checkbox, Icon, Input, SegmentedControl, Text } from "@lumioui/ui";
import { cn, useHaptic } from "@lumioui/core";
import { AppleLogo, GoogleLogo, Mount, Press, World } from "../shared";
/** Split auth — black orbit hero over a white rounded sheet: Login/Register
* segmented toggle, icon fields, black pill CTA, Or + social pair. */
export function SplitAuthScreen({
onLogin,
onSignup,
onForgot,
onGoogle,
onApple,
onBack,
}: {
onLogin?: (email: string) => void;
onSignup?: (email: string) => void;
onForgot?: () => void;
onGoogle?: () => void;
onApple?: () => void;
onBack?: () => void;
}) {
const haptics = useHaptic();
const [mode, setMode] = useState("login");
const [email, setEmail] = useState("uimasum1977@gmail.com");
const [remember, setRemember] = useState(false);
const isLogin = mode === "login";
return (
<World primary="#65A30D">
<View className="flex-1 bg-[#1B1B26]">
{/* White filler so the sheet reads to the screen edge, not the inset. */}
<View className="absolute inset-x-0 bottom-0 h-28 bg-white" pointerEvents="none" />
<SafeAreaView className="flex-1" edges={["top"]}>
<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : undefined} style={{ flex: 1 }}>
{/* Dark hero — back, headline, tagline. */}
<View className="px-5 pt-1">
<Press
onPress={() => {
haptics.light();
onBack?.();
}}
accessibilityRole="button"
accessibilityLabel="Go back"
hitSlop={12}
className="h-10 w-10 items-center justify-center rounded-full border border-white/15"
>
<Icon name="chevron-left" size="sm" color="primaryForeground" />
</Press>
<Mount className="mt-8">
<Text className="text-[32px] font-bold tracking-tight text-white">
{isLogin ? "Login" : "Sign up"}
</Text>
<Text className="mt-1.5 text-[14px] leading-5 text-white/55">
Track, budget, save, invest,{"\n"}repeat wisely.
</Text>
</Mount>
</View>
{/* White sheet — the form lives in the curve. */}
<Mount delay={60} className="mt-9 flex-1 rounded-t-[32px] bg-white">
<ScrollView
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps="handled"
contentContainerClassName="gap-4 px-6 pb-10 pt-5"
>
<SegmentedControl
options={[
{ label: "Login", value: "login" },
{ label: "Register", value: "register" },
]}
value={isLogin ? "login" : "register"}
onValueChange={(v) => {
haptics.selection();
setMode(v);
}}
accessibilityLabel="Auth mode"
/>
<View className="gap-3">
<Input
placeholder="Email Address"
value={email}
onChangeText={setEmail}
keyboardType="email-address"
autoCapitalize="none"
leftIcon={<Icon name="mail" size="sm" color="mutedForeground" />}
className="h-14 rounded-2xl"
/>
<Input
placeholder="Password"
secureTextEntry
leftIcon={<Icon name="lock" size="sm" color="mutedForeground" />}
rightIcon={<Icon name="eye" size="sm" color="mutedForeground" />}
className="h-14 rounded-2xl"
/>
{!isLogin && (
<Input
placeholder="Confirm password"
secureTextEntry
leftIcon={<Icon name="lock" size="sm" color="mutedForeground" />}
rightIcon={<Icon name="eye-off" size="sm" color="mutedForeground" />}
className="h-14 rounded-2xl"
/>
)}
</View>
{isLogin && (
<View className="flex-row items-center justify-between">
<View className="flex-row items-center gap-2.5">
<Checkbox checked={remember} onCheckedChange={(c) => setRemember(!!c)} accessibilityLabel="Remember me" />
<Text className="text-[14px] text-muted-foreground">Remember me</Text>
</View>
<Press onPress={onForgot} hitSlop={8} accessibilityRole="button" accessibilityLabel="Forgot password">
<Text className="text-[14px] font-semibold text-[#65A30D]">Forgot password?</Text>
</Press>
</View>
)}
<Button
size="lg"
className="mt-1 h-14 w-full bg-[#1B1B26]"
onPress={() => {
haptics.light();
(isLogin ? onLogin : onSignup)?.(email);
}}
accessibilityLabel={isLogin ? "Log in" : "Create account"}
>
{isLogin ? "Login" : "Sign up"}
</Button>
{isLogin && (
<>
<View className="my-1 flex-row items-center gap-4">
<View className="h-px flex-1 bg-border" />
<Text className="text-[13px] text-muted-foreground">Or</Text>
<View className="h-px flex-1 bg-border" />
</View>
<View className="flex-row gap-3">
<Button
variant="outline"
size="lg"
className="h-14 flex-1 rounded-2xl border-2"
icon={<GoogleLogo size={18} />}
onPress={() => {
haptics.light();
onGoogle?.();
}}
accessibilityLabel="Continue with Google"
>
Google
</Button>
<Button
variant="outline"
size="lg"
className="h-14 flex-1 rounded-2xl border-2"
icon={<AppleLogo size={18} color="#000" />}
onPress={() => {
haptics.light();
onApple?.();
}}
accessibilityLabel="Continue with Apple"
>
Apple
</Button>
</View>
</>
)}
<View className="mt-2 flex-row items-center justify-center gap-1.5">
<Text className="text-[14px] text-muted-foreground">
{isLogin ? "Don't have an account?" : "Already have an account?"}
</Text>
<Press
onPress={() => {
haptics.selection();
setMode(isLogin ? "register" : "login");
}}
hitSlop={8}
accessibilityRole="button"
accessibilityLabel={isLogin ? "Switch to sign up" : "Switch to login"}
>
<Text className="text-[14px] font-semibold text-[#65A30D]">{isLogin ? "Sign up" : "Login"}</Text>
</Press>
</View>
</ScrollView>
</Mount>
</KeyboardAvoidingView>
</SafeAreaView>
</View>
</World>
);
}
SplitAuthScreen.displayName = "SplitAuthScreen";
```
Screen: https://lumioui.dev/screens/auth-split-auth