App Info Display Component

Build a React Native component that displays essential application metadata to users in a settings or about screen.

Requirements

Create a React Native component called AppInfoDisplay that:

1. Displays Basic App Metadata: Shows the application name, application ID (bundle ID), version number, and build number in a formatted display
2. Handles Platform Differences: Gracefully handles cases where metadata might be unavailable (e.g., on web platform)
3. Provides Clear Labels: Each piece of information should have a descriptive label (e.g., "App Name:", "Version:")
4. Returns Structured Data: The component should expose a function getAppMetadata() that returns an object containing all four metadata fields

Expected Behavior

• When rendered on iOS or Android, display all four metadata fields with their values
• When any field is null (e.g., on web), display "Not Available" instead
• The metadata should be synchronously accessible (no loading states required)
• Format the display in a user-friendly way with proper spacing

Test Cases

• The component renders with application name displayed @test
• The component shows application ID (bundle ID) @test
• The component displays version number @test
• The component shows build number @test
• The getAppMetadata() function returns an object with all four fields @test
• When values are null, "Not Available" is displayed @test

Implementation

@generates

API

import React from 'react';

/**
 * Metadata object containing application information
 */
export interface AppMetadata {
  name: string | null;
  id: string | null;
  version: string | null;
  build: string | null;
}

/**
 * Props for AppInfoDisplay component
 */
export interface AppInfoDisplayProps {
  style?: object;
}

/**
 * React Native component that displays application metadata
 */
export function AppInfoDisplay(props: AppInfoDisplayProps): React.ReactElement;

/**
 * Gets current application metadata
 * @returns Object containing app name, id, version, and build
 */
export function getAppMetadata(): AppMetadata;

Dependencies { .dependencies }

expo-application { .dependency }

Provides access to native application information including name, ID, version, and build number.

@satisfied-by