👤 Account

An example implementation of the Account UI component using mock user data. This screen showcases how to render profile details, subscription information, and account actions such as linked devices and logout.

✨ Features

👤 Displays user name, avatar, and contact info
💳 Shows current subscription and next billing date
🛡️ Linked devices and logout actions
🧱 Sections for membership and security
🎨 Works with light/dark themes
🔄 Replace mock data with real API later

📸 Preview

📡 API Call Methods

⚙️ First, set up the getZezoOtt API client: API Client Setup

🧪 The following API methods are used to fetch user data:

🔗 getZezoOtt().auth.whoami() — Fetch current user profile

🚀 Usage Example

AccountScreen.tsx


import React from "react";
import {
  Account,
  SafeAreaWrapper,
} from "@zezosoft/zezo-ott-react-native-ui-kit";
import { MonitorSmartphone, LogOut } from "lucide-react-native";
 
const AccountScreen = () => {
  return (
    <SafeAreaWrapper>
      <Account
        // 🧑‍💼 Replace `userInfo` fields with live data from `getZezoOtt().auth.whoami()`
        userInfo={{
          name: "Naresh Dhamu",
          avatarUri:
            "https://avatars.githubusercontent.com/u/89912059?s=400&u=887606d77116716a20e891cdca74c4e58ec7d60f&v=4",
          emailOrPhone: "nareshsuthar1229@gmail.com",
          onEditPress: () => console.log("Edit profile pressed"),
        }}
        isLoading={false} // Set to true while API data is loading
        sections={[
          {
            title: "MEMBERSHIP",
            items: [
              {
                type: "card",
                // 🔁 Replace title and subtitle with values from `getZezoOtt().auth.whoami().subscription`
                title: "Premium Plan: ₹249/month",
                subtitle: "Next Billing: 22 Sep 2025",
              },
            ],
          },
          {
            title: "ACCOUNT AND SECURITY",
            items: [
              {
                label: "Linked Devices",
                subtitle: "Manage your devices",
                showRightIcon: true,
                leftIcon: <MonitorSmartphone size={22} />,
                onPress: () => console.log("Linked Devices pressed"),
              },
              {
                label: "Log out",
                leftIcon: <LogOut size={22} />,
                onPress: () => console.log("Log out pressed"),
              },
            ],
          },
        ]}
        onBackPress={() => console.log("Back pressed")}
      />
    </SafeAreaWrapper>
  );
};
 
export default AccountScreen;

⚙️ Props in Use

Prop	Type	Description
`userInfo`	`object`	Displays user’s name, avatar, email or phone
`sections`	`array`	Groups cards and action items
`isLoading`	`boolean`	Enables loading skeleton when fetching API data
`onBackPress`	`function`	Triggers back action (e.g. navigation.goBack)

🧲 Mock Data Notes

Replace static fields with data from your API (whoami, subscription)
Use utilities like moment.js to format billing dates
Ideal for connecting with React Query, Zustand, or other global stores

📀 Layout Overview

🔙 Back button (top-left)
🧑‍💼 Avatar, name, and contact
💳 Membership plan and billing info
⚙️ Account actions: linked devices, logout
🧱 Themed, responsive, fully typed