Mobile Profile Card Component

Create a React Native component that displays a user profile card with proper styling practices.

Requirements

Build a ProfileCard component that displays user information:

Display Requirements

The component should accept user data and display:

• A profile picture (image URI)
• User's full name
• User bio (description text)
• An online status indicator (a colored dot)

Styling Requirements

Your implementation must follow React Native best practices for styling:

1. StyleSheet Usage: Define all styles using StyleSheet rather than inline style objects
2. Color Management: Avoid hardcoded color strings in your component; define colors as constants
3. Status Indicator: The status dot should be green when online, gray when offline
4. Layout: Include appropriate spacing, padding, and a border around the card

Component Interface

The component should:

• Accept props: imageUri (string), name (string), bio (string), isOnline (boolean)
• Export as a named export called ProfileCard
• Render all elements in a visually organized card layout

Test Cases

• Given valid props (imageUri="https://example.com/pic.jpg", name="John Doe", bio="Software engineer", isOnline=true), the component renders without errors @test

• Given isOnline=false, the status indicator renders with gray color; given isOnline=true, it renders with green color @test

@generates

API

/**
 * ProfileCard component displays a user profile card with image, name, bio, and online status.
 *
 * @param {Object} props - Component props
 * @param {string} props.imageUri - URI of the profile image
 * @param {string} props.name - User's name
 * @param {string} props.bio - User's bio/description
 * @param {boolean} props.isOnline - Whether the user is online
 * @returns {React.Element} Rendered profile card component
 */
export function ProfileCard({ imageUri, name, bio, isOnline }) {
  // Implementation here
}

Dependencies { .dependencies }

react-native { .dependency }

Provides the core React Native components and APIs for building mobile applications.

@kunalgolani/eslint-config { .dependency }

Provides ESLint configuration for React Native projects to enforce code quality and styling best practices.