Skip to Content
React NativeComponentAuthLoginPhone

📱 Login Phone

The LoginWithPhone component enables users to log in using their mobile number through a clean and responsive interface.

It includes input validation, theme support, and easy UI customization using render props.

✨ Features

  • 📱 Mobile number input with validation (using react-hook-form)
  • 🌗 Light/Dark mode support
  • 🧩 Customizable UI (logo, buttons, title, etc.)
  • 🖼️ Background image with optional gradient
  • ⏳ Loading indicator on submit
  • 🔁 “Login with Email” support

📸 Preview

LoginPhone-Light
LoginPhone-Dark

🧠 Authentication Note

⚙️ First, setup the getZezoOtt API client: API Client Setup
🔗 Call getZezoOtt().auth.sendOTP() to send an OTP to the user’s phone number.
📘 See method reference 

👉 See Splash Screen Store Setup

🚀 Usage Example

LoginWithPhone.tsx
import React from "react";
import { Auth } from "@zezosoft/zezo-ott-react-native-ui-kit";
import { goBack, navigate } from "@ZezoOtt/utils/NavigationUtil";
import { Route } from "@navigation/routes";
import { useSplashStore } from "@ZezoOtt/store/splashStore";
 
const PhoneLoginScreen = () => {
  const { splash } = useSplashStore.getState();
 
  return (
    <Auth.LoginWithPhone
      logoUri={splash.logo}
      title="Welcome Back!"
      onSubmit={(data) => {
        console.log("Phone login:", data); //call your api endpoint method send Otp
      }}
      onTopBackBtnPress={() => goBack()}
      backgroundImage={{
        source: splash.login_poster,
        gradientSplitBackground: 0.4,
      }}
      onLoginWithEmail={() => navigate(Route.LoginWithEmail)}
    />
  );
};
 
export default PhoneLoginScreen;

🔗 See related route definition: Route enum from @navigation/routes.ts

🔧 Props

📌 Core Configuration

PropTypeDescription
titlestringTitle shown above the input
logoUristringOptional logo image URL
loadingSubmitBtnbooleanShow loading spinner on login button
themeAppThemeOptional theme override

🔀 Handlers & Navigation

PropTypeDescription
onSubmit(values: FormValues) => voidCalled when the login form is submitted
onTopBackBtnPress() => voidTriggered when top back button is pressed
onLoginWithEmail() => voidTriggered when “Login With Email” is pressed

🧩 Custom Renderers

PropTypeDescription
renderLogo() => ReactNodeCustom logo renderer
renderPhoneHeader() => ReactNodeCustom header above phone input
renderSubmitButton({ onPress, disabled, loading }) => ReactNodeCustom login button renderer
renderLoginWithEmail() => ReactNodeCustom email login button
renderTopBackBtn({ onPress }) => ReactNodeCustom back button renderer

🎨 Styling Props

PropTypeDescription
containerStyleViewStyleStyle override for main container
titleStyleTextStyleStyle override for title
formStyleViewStyleStyle override for form container
inputStyleTextStyleStyle override for input field text
inputContainerStyleViewStyleStyle override for input wrapper
topBackBtnStyleViewStyleStyle override for top back button

📝 Customizable Text

PropTypeDescription
textobjectOverride default field labels and messages
 └── phoneLabelstringLabel for the phone input
 └── phonePlaceholderstringPlaceholder for phone number input
 └── loadingSubmitBtnTextstringText for loading state of submit button
 └── loginButtonstringText for login/submit button
 └── loginWithEmailButtonstringText for “Login With Email” button

🖼️ Background Image

PropTypeDescription
backgroundImageobjectBackground image settings
 └── sourcestring | nullImage URL or path
 └── resizeMode'cover' | 'contain' | 'stretch' | 'repeat'How the background image should resize
 └── onImageError(error: Error) => voidError handler when image fails to load
 └── gradientSplitBackgroundnumberPosition of gradient split (e.g. 0.4)

🧪 Validation

  • Phone number is required and must be at least 10 digits
  • Error message: "Please enter a valid phone number"

📝 Default Texts

{
  phoneLabel: 'Phone Number',
  phonePlaceholder: 'Enter phone number',
  loginButton: 'Login',
  loadingSubmitBtnText: 'Logging in...',
  loginWithEmailButton: 'Login With Email',
}

🎨 UI Overrides

Custom Submit Button

LoginWithPhone.tsx
import { Auth } from "@zezosoft/zezo-ott-react-native-ui-kit";
 
<Auth.LoginWithPhone
  renderSubmitButton={({ onPress, disabled, loading }) => (
    <MyCustomButton
      title="Continue"
      onPress={onPress}
      disabled={disabled}
      loading={loading}
    />
  )}
/>;

Custom Logo & Header

LoginWithPhone.tsx
import { Auth } from "@zezosoft/zezo-ott-react-native-ui-kit";
 
<Auth.LoginWithPhone
  renderLogo={() => <MyLogo />}
  renderPhoneHeader={() => (
    <Text style={{ fontSize: 24 }}>Sign in with Mobile</Text>
  )}
/>;

✅ Summary

  • Runs fully on-device (no server calls)
  • Validates phone number input
  • Supports branding and UI overrides
  • Ideal for OTP or passwordless flows

✍️ Created by Naresh Dhamu – Powered by ZezoSoft

Last updated on
EmailSignUp