Expo Login Screen

A reusable, customizable Expo login package for React Native/Expo apps. Supports login, signup, forgot password, and phone number (OTP) login, with flexible navigation and styling. Monorepo-friendly, Expo-first, and easy to integrate with Expo Router or React Navigation.

Features

• Login, Signup, Forgot Password screens
• Phone number login with OTP verification
• Customizable styles via props
• Parent-controlled navigation (no navigation dependency)
• TypeScript support
• Easy Expo/React Native integration

Installation

yarn add @knlgpt/expo-login-screen
# or
npm install @knlgpt/expo-login-screen

Usage

Basic Auth Flow

import { AuthFlow } from "@knlgpt/expo-login-screen";

<AuthFlow initialScreen="login" />;

initialScreen options:"login" | "signup" | "forgot" | "phone" | "otp" defaultScreen : login

Standalone Screens

import { LoginScreen, SignupScreen, ForgotPasswordScreen, PhoneLoginScreen, OTPEntryScreen } from '@knlgpt/expo-login-screen';

<LoginScreen onLogin={...} />
<SignupScreen onSignup={...} />
<ForgotPasswordScreen onReset={...} />
<PhoneLoginScreen onLogin={...} />
<OTPEntryScreen onSubmit={...} digits={6} />

📱 Phone Login Screen The PhoneLoginScreen provides a simple, OTP-ready login interface using a phone number. | Prop | Type | Required | Description | | ------------- | ---------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------ | | onLogin | (phone: string, callback: (otp: string) => void) => void | ✅ | Called when the user enters a valid phone number. Pass the OTP (if needed) through the callback. | | countryCode | string | ❌ | Country code prefix (default: "+91") | | digits | number | ❌ | Number of digits required to enable the submit button (default: 10) | | styles | PhoneLoginScreenStyleProps | ❌ | Optional style overrides |

Customization

• Pass a styles prop to any screen to override default styles.
• All navigation is handled by the parent app (works with Expo Router, React Navigation, etc).

Example

onLogin function is expecting an object in return {res: "success"|"failure", tokenUserId, error: optional} userLoginID: Phone or email tokenUserId: system generated unique ID