@atom-design-mog/login

A sleek, animated React Native Login component for the Atom Design System — supports a customizable logo, background image, and a loading animation.

🚀 Installation

Install using npm:

npm install @atom-design-mog/login

Or with yarn:

yarn add @atom-design-mog/login

📦 Peer dependencies

Make sure your project includes:

• react
• react-native

🔧 Usage Example

import React, { useState } from 'react';
import { SafeAreaView } from 'react-native';
import Login from '@atom-design-mog/login';

export default function TestLoginScreen() {
  const [isLoading, setIsLoading] = useState(false);

  const handleLogin = () => {
    setIsLoading(true);

    setTimeout(() => {
      setIsLoading(false);
      alert('Logged in!');
    }, 2000);
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Login
        onLogin={handleLogin}
        isLoading={isLoading}
        logoSource={{ uri: 'https://atom.moglix.com/assets/img/moglix-logo.png' }}
        backgroundSource={{
          uri: 'https://atom.moglix.com/assets/img/[email protected]',
        }}
      />
    </SafeAreaView>
  );
}

📋 Props

| Prop | Type | Default | Description | | -------------------- | --------------------- | ------------ | ------------------------------------------------------------ | | onLogin | () => void | Required | Called when the login button is pressed | | isLoading | boolean | false | Whether to show the loader animation inside the login button | | logoSource | ImageSourcePropType | undefined | Image for the logo at the top of the login container | | backgroundSource | ImageSourcePropType | undefined | Background image behind the login container |

🎨 Features

• Animated loading indicator built from 4 dots
• Looping animation while isLoading === true
• Custom logo and background support
• Button disables itself during loading
• Clean, centered UI box with rounded corners
• Styled with Atom design system colors

📝 Notes

• The loading animation uses React Native’s Animated.loop and Animated.timing.
• Ensure logoSource and backgroundSource are valid React Native image sources (local require() or remote { uri }).
• The button icon is a Segoe UI glyph (). If that glyph is not available on your platform, replace it or use a custom icon component.

👤 Author Avi Gupta