🔐 Forgot Password

A fully customizable, ready-to-use screen for requesting a password reset via email. Built for React Native OTT-style apps with polished visuals, validation, theming, and flexibility.

✨ Features

📧 Email input with react-hook-form validation
🎨 Theming support (light/dark)
🧹 Customizable texts, title, logo, and background
🖼️ Gradient & background image support
🔄 Submit button with loading state
🔧 Render props for custom logo, buttons, and footer

📸 Preview

📡 API Call

⚙️ First, setup the getZezoOtt API client: API Client Setup
🔗 Call getZezoOtt().auth.forgotPassword() the send a forgot password link to the user’s email.
📘 See method reference

👉 See Splash Screen Store Setup

🚀 Usage Example

ForgotPassword.tsx


import React from "react";
import { Auth } from "@zezosoft/zezo-ott-react-native-ui-kit";
import { goBack, navigate } from "@ZezoOtt/utils/NavigationUtil";
import { useSplashStore } from "@ZezoOtt/store/splashStore";
 
const ForgotPasswordScreen = () => {
  const { splash } = useSplashStore.getState();
 
  return (
    <Auth.ForgotPassword
      logoUri={splash.logo}
      title="Reset Your Password"
      onSubmit={(data) => {
      console.log(data). //call your api endpoint method
      }}
      onTopBackBtnPress={() => goBack()}
      backgroundImage={{
        source: splash.login_poster,
        gradientSplitBackground: 0.4,
      }}
    />
  );
};
 
export default ForgotPasswordScreen;

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

⚙️ Props

📌 Core Configuration

Prop	Type	Description
`title`	`string`	Title displayed above the form
`onSubmit`	`(values: { email: string }) => Promise<void>`	Called on email submit
`onTopBackBtnPress`	`() => void`	Handler for top back button
`logoUri`	`string`	Optional logo image URL
`theme`	`AppTheme`	Optional theme override
`loadingSubmitBtn`	`boolean`	Show loading spinner on submit button
`text`	`TextConfig`	Object to override labels, placeholders, etc.

🎨 Styling Props

Prop	Type	Description
`containerStyle`	`ViewStyle`	Style override for container
`titleStyle`	`TextStyle`	Style override for title
`formStyle`	`ViewStyle`	Style for form wrapper
`inputStyle`	`TextStyle`	Style for input text
`inputContainerStyle`	`ViewStyle`	Style for input container
`topBackBtnStyle`	`ViewStyle`	Style for top back button

🖼️ Background Image

Prop	Type	Description
`backgroundImage`	`object`	Background image settings
└── `source`	`string \| null`	Image URL or path
└── `resizeMode`	`'cover' \| 'contain' \| 'stretch' \| 'repeat'`	How the background image should resize
└── `onImageError`	`(error: Error) => void`	Error handler when image fails to load
└── `gradientSplitBackground`	`number`	Position of gradient split (e.g. 0.4)

🧹 Custom Renderers

Prop	Type	Description
`renderLogo`	`() => ReactNode`	Custom renderer for the logo
`renderForgetPasswordHeader`	`() => ReactNode`	Custom renderer above the forget password form
`renderBottomInfoText`	`() => ReactNode`	Custom renderer bottom info text
`renderSubmitButton`	`({ onPress, disabled, loading }) => ReactNode`	Custom submit button renderer
`renderTopBackBtn`	`({ onPress }) => ReactNode`	Custom bottom info section

📝 Customizable Text

Prop	Type	Description
`text`	`object`	Customize field labels, placeholders, etc.
└─ `emailLabel`	`string`	Label above the email input field
└─ `emailPlaceholder`	`string`	Placeholder inside the email input
└─ `forgetPasswordButton`	`string`	Text shown on the reset/submit button
└─ `loadingSubmitBtnText`	`string`	Text shown while the form is submitting
└─ `bottomInfoText`	`string`	Optional text shown below the form

📝 Default Texts

These can be overridden using the text prop:


{
  emailLabel: 'Email',
  emailPlaceholder: 'Enter your email',
  loadingSubmitBtnText: 'Processing...',
  forgetPasswordButton: 'Send Reset Link'
}

🦪 Validation Rules

✅ Required: User must enter an email
✅ Valid Format: Must match /^\S+@\S+\.\S+$/

📀 Layout Overview

🔙 Top Back Button (optional)
🖼️ Logo (optional)
📝 Title
📧 Email Input Field
🔘 Submit Button
ℹ️ Bottom Info Text (optional)
⌨️ Keyboard-aware, responsive design