react-native-flex-login-screen

A fully customizable React Native login screen component with built-in API POST support.

Works out of the box with zero props. You can render <LoginScreen /> directly, then override any style or API config via props.

Features

• Username, password, and base URL input support
• Additional payload fields support (additionalPayload)
• Dynamic extra input fields support (extraFields)
• API POST request built in
• Fully customizable:
  • Background image
  • Button colors
  • Text box colors
  • Card background, label, title, and error colors
• TypeScript support

Install

npm install react-native-flex-login-screen

Usage

import React from 'react';
import { Alert } from 'react-native';
import { LoginScreen } from 'react-native-flex-login-screen';

export default function App() {
  return (
    <LoginScreen
      baseUrl="https://api.example.com"
      endpoint="/auth/login"
      usernameField="username"
      passwordField="password"
      additionalPayload={{ deviceType: 'mobile', appVersion: '1.0.0' }}
      extraFields={[
        { key: 'tenantId', label: 'Tenant ID', placeholder: 'Enter tenant ID' },
        { key: 'companyCode', label: 'Company Code', placeholder: 'Enter company code' }
      ]}
      headers={{ 'X-App-Key': 'demo-key' }}
      backgroundImage={{ uri: 'https://images.example.com/background.jpg' }}
      cardBackgroundColor="#ffffff"
      screenBackgroundColor="#e2e8f0"
      titleColor="#0f172a"
      labelColor="#334155"
      inputBackgroundColor="#f8fafc"
      inputTextColor="#0f172a"
      inputBorderColor="#94a3b8"
      placeholderTextColor="#64748b"
      buttonColor="#0ea5e9"
      buttonTextColor="#ffffff"
      onSuccess={(response) => {
        Alert.alert('Login success', JSON.stringify(response.data));
      }}
      onError={(error) => {
        Alert.alert('Login failed', error.message);
      }}
    />
  );
}

Props

• baseUrl?: string - API base URL (default: https://api.example.com).
• endpoint?: string - Login endpoint path (default: /auth/login).
• usernameField?: string - Username key in payload (default: username).
• passwordField?: string - Password key in payload (default: password).
• additionalPayload?: Record<string, unknown> - Add any extra payload data.
• extraFields?: LoginFieldConfig[] - Render extra text inputs and include them in payload.
• headers?: Record<string, string> - Additional headers.
• transformPayload?: (payload) => payload - Modify request payload before API call.
• onSuccess?: (response) => void - Called on successful API response.
• onError?: (error) => void - Called on error.
• timeoutMs?: number - Request timeout (default: 15000).
• title?: string - Main heading (default: Welcome Back).
• subtitle?: string - Sub heading (default: Sign in to continue).
• backgroundImage?: ImageSourcePropType - Optional background image.
• screenBackgroundColor?: string
• cardBackgroundColor?: string
• titleColor?: string
• labelColor?: string
• inputBackgroundColor?: string
• inputTextColor?: string
• inputBorderColor?: string
• placeholderTextColor?: string
• buttonColor?: string
• buttonTextColor?: string
• errorTextColor?: string