Specialized Components

/**
 * Pricing plan display component
 */
interface PricingCardProps {
  /** Card container styles */
  containerStyle?: StyleProp<ViewStyle>;
  /** Wrapper styles */
  wrapperStyle?: StyleProp<ViewStyle>;
  /** Pricing plan title */
  title?: string;
  /** Price value */
  price: string | number;
  /** Currency symbol */
  currency?: string;
  /** Feature list */
  info?: string[];
  /** Action button configuration */
  button?: Partial<ButtonProps>;
  /** Title styles */
  titleStyle?: StyleProp<TextStyle>;
  /** Price styles */
  priceStyle?: StyleProp<TextStyle>;
  /** Info text styles */
  infoStyle?: StyleProp<TextStyle>;
  /** Card color theme */
  color?: string;
  /** Touch handler */
  onButtonPress?(): void;
}

import React from 'react';
import { PricingCard } from 'react-native-elements';

// Basic pricing card
<PricingCard
  color="#007AFF"
  title="Basic Plan"
  price="$9.99"
  info={[
    'Up to 5 projects',
    '10GB storage',
    'Email support',
    'Basic analytics'
  ]}
  button={{
    title: 'Get Started',
    icon: 'flight-takeoff',
  }}
  onButtonPress={() => selectPlan('basic')}
/>

// Premium pricing card with custom styling
<PricingCard
  containerStyle={{
    borderWidth: 2,
    borderColor: '#FFD700',
    borderRadius: 15,
    elevation: 5,
  }}
  wrapperStyle={{
    backgroundColor: '#fff',
  }}
  title="Premium Plan"
  titleStyle={{
    fontSize: 20,
    fontWeight: 'bold',
    color: '#333',
  }}
  price="$29.99"
  currency="$"
  priceStyle={{
    fontSize: 36,
    color: '#FFD700',
    fontWeight: 'bold',
  }}
  info={[
    'Unlimited projects',
    '100GB storage',
    'Priority support',
    'Advanced analytics',
    'Custom integrations',
    'Team collaboration'
  ]}
  infoStyle={{
    fontSize: 14,
    color: '#666',
  }}
  button={{
    title: 'Upgrade Now',
    buttonStyle: {
      backgroundColor: '#FFD700',
      borderRadius: 25,
    },
    titleStyle: {
      color: '#333',
      fontWeight: 'bold',
    },
  }}
  color="#FFD700"
/>

// Enterprise pricing card
<PricingCard
  title="Enterprise"
  price="Custom"
  info={[
    'Everything in Premium',
    'Unlimited storage',
    'Dedicated support',
    'Custom SLA',
    'On-premise deployment',
    'Advanced security'
  ]}
  button={{
    title: 'Contact Sales',
    type: 'outline',
  }}
  containerStyle={{
    backgroundColor: '#f8f9fa',
  }}
  color="#333"
  onButtonPress={() => openContactForm()}
/>

// Comparison layout with multiple cards
<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
  <PricingCard
    containerStyle={{ width: '30%' }}
    title="Starter"
    price="Free"
    info={['1 project', '1GB storage']}
    button={{ title: 'Start Free' }}
    color="#6c757d"
  />
  
  <PricingCard
    containerStyle={{ 
      width: '30%',
      borderWidth: 2,
      borderColor: '#007AFF',
    }}
    title="Pro"
    price="$19.99"
    info={['10 projects', '50GB storage', 'Priority support']}
    button={{ 
      title: 'Most Popular',
      buttonStyle: { backgroundColor: '#007AFF' }
    }}
    color="#007AFF"
  />
  
  <PricingCard
    containerStyle={{ width: '30%' }}
    title="Business"
    price="$49.99"
    info={['Unlimited projects', '500GB storage', 'Phone support']}
    button={{ title: 'Contact Us' }}
    color="#28a745"
  />
</View>

/**
 * Social media platform icons with brand colors
 */
interface SocialIconProps extends TouchableOpacityProps {
  /** Social platform type */
  type: SocialMediaType;
  /** Raised/elevated appearance */
  raised?: boolean;
  /** Light color variant */
  light?: boolean;
  /** Icon size */
  iconSize?: number;
  /** Icon color */
  iconColor?: string;
  /** Container styles */
  style?: StyleProp<ViewStyle>;
  /** Font family */
  fontFamily?: string;
  /** Font weight */
  fontWeight?: string;
  /** Touch handler */
  onPress?(): void;
  /** Long press handler */
  onLongPress?(): void;
  /** Icon styles */
  iconStyle?: StyleProp<TextStyle>;
  /** Underlay color */
  underlayColor?: string;
  /** Title text */
  title?: string;
  /** Button configuration */
  button?: boolean;
  /** Loading state */
  loading?: boolean;
  /** Activity indicator props */
  activityIndicatorStyle?: StyleProp<ViewStyle>;
  /** Small size variant */
  small?: boolean;
  /** Medium size variant */
  medium?: boolean;
  /** Large size variant */
  large?: boolean;
  /** Extra large size variant */
  xlarge?: boolean;
}

/**
 * Supported social media platform types
 */
type SocialMediaType =
  | 'facebook'
  | 'twitter'
  | 'google-plus-official'
  | 'pinterest'
  | 'linkedin'
  | 'youtube'
  | 'vimeo'
  | 'tumblr'
  | 'instagram'
  | 'quora'
  | 'foursquare'
  | 'wordpress'
  | 'stumbleupon'
  | 'github'
  | 'twitch'
  | 'medium'
  | 'soundcloud'
  | 'gitlab'
  | 'angellist'
  | 'codepen';

import React from 'react';
import { SocialIcon } from 'react-native-elements';

// Basic social icons
<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
  <SocialIcon
    type='facebook'
    onPress={() => openSocialProfile('facebook')}
  />
  <SocialIcon
    type='twitter'
    onPress={() => openSocialProfile('twitter')}
  />
  <SocialIcon
    type='instagram'
    onPress={() => openSocialProfile('instagram')}
  />
  <SocialIcon
    type='linkedin'
    onPress={() => openSocialProfile('linkedin')}
  />
</View>

// Raised social icons
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
  <SocialIcon
    raised
    type='facebook'
    onPress={() => shareOnFacebook()}
  />
  <SocialIcon
    raised
    type='twitter'
    onPress={() => shareOnTwitter()}
  />
  <SocialIcon
    raised
    type='google-plus-official'
    onPress={() => shareOnGoogle()}
  />
</View>

// Light variant social icons
<View style={{ backgroundColor: '#333', padding: 20 }}>
  <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
    <SocialIcon type='github' light />
    <SocialIcon type='medium' light />
    <SocialIcon type='youtube' light />
  </View>
</View>

// Custom sized and styled social icons
<SocialIcon
  type='facebook'
  iconSize={30}
  style={{
    width: 80,
    height: 80,
    borderRadius: 40,
  }}
  iconStyle={{
    color: '#fff',
  }}
  onPress={handleFacebookShare}
/>

// Social icon with title (button style)
<SocialIcon
  title='Sign In With Facebook'
  button
  type='facebook'
  style={{ width: 250 }}
  onPress={signInWithFacebook}
/>

// Loading state social icon
<SocialIcon
  type='google-plus-official'
  loading={isSigningIn}
  button
  title={isSigningIn ? 'Signing In...' : 'Sign In With Google'}
  onPress={signInWithGoogle}
/>

// Custom color social icon
<SocialIcon
  type='twitter'
  iconColor='#1DA1F2'
  style={{
    backgroundColor: '#fff',
    borderWidth: 1,
    borderColor: '#1DA1F2',
  }}
  raised
/>

// Different sizes
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
  <SocialIcon type='facebook' small />
  <SocialIcon type='facebook' medium />
  <SocialIcon type='facebook' large />
  <SocialIcon type='facebook' xlarge />
</View>

/**
 * Linear progress indicator
 */
interface LinearProgressProps {
  /** Progress value (0-1) */
  value?: number;
  /** Progress variant type */
  variant?: 'determinate' | 'indeterminate';
  /** Progress bar color */
  color?: 'primary' | 'secondary' | string;
  /** Track color */
  trackColor?: string;
  /** Container styles */
  style?: StyleProp<ViewStyle>;
  /** Animation configuration */
  animation?: {
    duration?: number;
  };
}

import React, { useState, useEffect } from 'react';
import { LinearProgress } from 'react-native-elements';

// Determinate progress bar
const [progress, setProgress] = useState(0);

useEffect(() => {
  const timer = setInterval(() => {
    setProgress(prev => (prev >= 1 ? 0 : prev + 0.1));
  }, 1000);
  return () => clearInterval(timer);
}, []);

<View>
  <Text>Upload Progress: {Math.round(progress * 100)}%</Text>
  <LinearProgress
    value={progress}
    variant="determinate"
    color="#007AFF"
    trackColor="#E0E0E0"
    style={{ marginVertical: 10, height: 8, borderRadius: 4 }}
  />
</View>

// Indeterminate progress bar (loading)
<LinearProgress
  variant="indeterminate"
  color="#4caf50"
  style={{ marginVertical: 20 }}
/>

// Custom styled progress bars
<View>
  <Text h4>File Processing</Text>
  <LinearProgress
    value={0.7}
    color="#ff9800"
    trackColor="#fff3e0"
    style={{
      height: 12,
      borderRadius: 6,
      backgroundColor: '#fff3e0',
      marginVertical: 10,
    }}
  />
  
  <Text h4>Download Complete</Text>
  <LinearProgress
    value={1}
    color="#4caf50"
    trackColor="#e8f5e8"
    style={{
      height: 6,
      borderRadius: 3,
      marginVertical: 10,
    }}
  />
</View>

// Multiple progress indicators
<View>
  <View style={{ marginBottom: 15 }}>
    <Text>CPU Usage: 45%</Text>
    <LinearProgress
      value={0.45}
      color="#2196f3"
      style={{ marginTop: 5, height: 4 }}
    />
  </View>
  
  <View style={{ marginBottom: 15 }}>
    <Text>Memory: 78%</Text>
    <LinearProgress
      value={0.78}
      color="#ff9800"
      style={{ marginTop: 5, height: 4 }}
    />
  </View>
  
  <View style={{ marginBottom: 15 }}>
    <Text>Storage: 23%</Text>
    <LinearProgress
      value={0.23}
      color="#4caf50"
      style={{ marginTop: 5, height: 4 }}
    />
  </View>
</View>

// Animated progress with steps
const steps = ['Preparing', 'Processing', 'Finalizing', 'Complete'];
const [currentStep, setCurrentStep] = useState(0);

<View>
  <Text h4>{steps[currentStep]}</Text>
  <LinearProgress
    value={(currentStep + 1) / steps.length}
    color="#9c27b0"
    style={{
      marginVertical: 15,
      height: 10,
      borderRadius: 5,
    }}
    animation={{ duration: 500 }}
  />
  <Text style={{ textAlign: 'center', color: '#666' }}>
    Step {currentStep + 1} of {steps.length}
  </Text>
</View>

/**
 * Tab navigation component
 */
interface TabProps {
  /** Tab value/key */
  value: number;
  /** Value change handler */
  onChange(value: number): void;
  /** Disable tab functionality */
  disableIndicator?: boolean;
  /** Indicator styles */
  indicatorStyle?: StyleProp<ViewStyle>;
  /** Variant type */
  variant?: 'primary' | 'default';
  /** Scrollable tabs */
  scrollable?: boolean;
  /** Dense layout */
  dense?: boolean;
  /** Tab container styles */
  containerStyle?: StyleProp<ViewStyle>;
}

/**
 * Individual tab item
 */
interface TabItemProps extends ButtonProps {
  /** Tab title */
  title?: string;
  /** Tab icon */
  icon?: IconNode;
  /** Title styles */
  titleStyle?: StyleProp<TextStyle | ViewStyle>;
  /** Button styles */
  buttonStyle?: StyleProp<ViewStyle>;
  /** Container styles */
  containerStyle?: StyleProp<ViewStyle>;
}

/**
 * TabView component for swipeable content
 */
interface TabViewProps {
  /** Current tab value */
  value: number;
  /** Value change handler */
  onChange(value: number): void;
  /** Tab items configuration */
  children: React.ReactElement<TabViewItemProps>[];
  /** Animation type */
  animationType?: 'spring' | 'timing';
  /** Disable swipe */
  disableSwipe?: boolean;
  /** Tab bar position */
  tabBarPosition?: 'top' | 'bottom';
  /** Container styles */
  containerStyle?: StyleProp<ViewStyle>;
}

/**
 * TabView item component
 */
interface TabViewItemProps {
  /** Item children */
  children?: React.ReactNode;
  /** Container styles */
  style?: StyleProp<ViewStyle>;
}

import React, { useState } from 'react';
import { Tab, TabView, Text, Avatar } from 'react-native-elements';

// Basic tab navigation
const [tabIndex, setTabIndex] = useState(0);

<View>
  <Tab
    value={tabIndex}
    onChange={setTabIndex}
    indicatorStyle={{ backgroundColor: '#007AFF', height: 3 }}
    variant="primary"
  >
    <Tab.Item title="Tab 1" />
    <Tab.Item title="Tab 2" />
    <Tab.Item title="Tab 3" />
  </Tab>
  
  <TabView value={tabIndex} onChange={setTabIndex}>
    <TabView.Item>
      <Text h4>Content for Tab 1</Text>
    </TabView.Item>
    <TabView.Item>
      <Text h4>Content for Tab 2</Text>
    </TabView.Item>
    <TabView.Item>
      <Text h4>Content for Tab 3</Text>
    </TabView.Item>
  </TabView>
</View>

// Tabs with icons
<Tab
  value={activeTab}
  onChange={setActiveTab}
  indicatorStyle={{
    backgroundColor: '#FF6B6B',
    height: 2,
  }}
>
  <Tab.Item
    title="Home"
    icon={{ name: 'home', type: 'material', color: '#666' }}
  />
  <Tab.Item
    title="Search"
    icon={{ name: 'search', type: 'material', color: '#666' }}
  />
  <Tab.Item
    title="Profile"
    icon={{ name: 'person', type: 'material', color: '#666' }}
  />
</Tab>

// Scrollable tabs
<Tab
  value={scrollableIndex}
  onChange={setScrollableIndex}
  scrollable
  containerStyle={{ backgroundColor: '#f8f9fa' }}
>
  <Tab.Item title="Dashboard" />
  <Tab.Item title="Analytics" />
  <Tab.Item title="Reports" />
  <Tab.Item title="Settings" />
  <Tab.Item title="Users" />
  <Tab.Item title="Billing" />
</Tab>

// Custom styled tabs
<Tab
  value={customIndex}
  onChange={setCustomIndex}
  indicatorStyle={{
    backgroundColor: '#4caf50',
    height: 4,
    borderRadius: 2,
  }}
  containerStyle={{
    backgroundColor: '#fff',
    elevation: 2,
  }}
>
  <Tab.Item
    title="Recent"
    titleStyle={{ fontSize: 16, fontWeight: 'bold' }}
    buttonStyle={{
      paddingVertical: 15,
    }}
  />
  <Tab.Item
    title="Popular"
    titleStyle={{ fontSize: 16, fontWeight: 'bold' }}
    buttonStyle={{
      paddingVertical: 15,
    }}
  />
</Tab>

// Complete TabView with content
<TabView
  value={viewIndex}
  onChange={setViewIndex}
  animationType="spring"
  disableSwipe={false}
  containerStyle={{ flex: 1 }}
>
  <TabView.Item style={{ padding: 20 }}>
    <View>
      <Text h3>Dashboard</Text>
      <Text>Welcome to your dashboard</Text>
      {/* Dashboard content */}
    </View>
  </TabView.Item>
  
  <TabView.Item style={{ padding: 20 }}>
    <View>
      <Text h3>Messages</Text>
      <Text>Your recent messages</Text>
      {/* Messages content */}
    </View>
  </TabView.Item>
  
  <TabView.Item style={{ padding: 20 }}>
    <View>
      <Text h3>Settings</Text>
      <Text>App configuration</Text>
      {/* Settings content */}
    </View>
  </TabView.Item>
</TabView>

/**
 * Material Design floating action button
 */
interface FABProps extends TouchableOpacityProps {
  /** FAB title text */
  title?: string;
  /** FAB icon */
  icon?: IconNode;
  /** FAB color */
  color?: string;
  /** FAB size */
  size?: 'small' | 'large';
  /** Button styles */
  buttonStyle?: StyleProp<ViewStyle>;
  /** Title styles */
  titleStyle?: StyleProp<TextStyle>;
  /** Icon styles */
  iconStyle?: StyleProp<ViewStyle>;
  /** Container styles */
  containerStyle?: StyleProp<ViewStyle>;
  /** Placement position */
  placement?: 'left' | 'right';
  /** Loading state */
  loading?: boolean;
  /** Loading props */
  loadingProps?: ActivityIndicatorProps;
  /** Visible state */
  visible?: boolean;
  /** Upper case title */
  upperCase?: boolean;
}

/**
 * Expandable floating action button with multiple actions
 */
interface SpeedDialProps {
  /** SpeedDial visibility */
  isOpen: boolean;
  /** Icon for closed state */
  icon?: IconNode;
  /** Icon for open state */
  openIcon?: IconNode;
  /** SpeedDial actions */
  actions: SpeedDialActionProps[];
  /** Open handler */
  onOpen?(): void;
  /** Close handler */
  onClose?(): void;
  /** Toggle handler */
  onToggle?(): void;
  /** Button styles */
  buttonStyle?: StyleProp<ViewStyle>;
  /** Container styles */
  containerStyle?: StyleProp<ViewStyle>;
  /** Overlay color */
  overlayColor?: string;
  /** Label placement */
  labelPressable?: boolean;
  /** Transition delay */
  transitionDelay?: number;
}

/**
 * SpeedDial action configuration
 */
interface SpeedDialActionProps {
  /** Action icon */
  icon: IconNode;
  /** Action title/label */
  title?: string;
  /** Action handler */
  onPress(): void;
  /** Button styles */
  buttonStyle?: StyleProp<ViewStyle>;
  /** Title styles */
  titleStyle?: StyleProp<TextStyle>;
  /** Container styles */
  containerStyle?: StyleProp<ViewStyle>;
}

import React, { useState } from 'react';
import { FAB, SpeedDial } from 'react-native-elements';

// Basic FAB
<FAB
  icon={{ name: 'add', color: 'white' }}
  color="#007AFF"
  onPress={() => console.log('FAB pressed')}
  placement="right"
/>

// FAB with title
<FAB
  title="Create"
  icon={{ name: 'create', color: 'white' }}
  color="#4caf50"
  onPress={handleCreate}
  upperCase
/>

// Small FAB with loading state
<FAB
  icon={{ name: 'save', color: 'white' }}
  size="small"
  color="#ff9800"
  loading={isSaving}
  onPress={handleSave}
/>

// SpeedDial with multiple actions
const [speedDialOpen, setSpeedDialOpen] = useState(false);

<SpeedDial
  isOpen={speedDialOpen}
  icon={{ name: 'add', color: '#fff' }}
  openIcon={{ name: 'close', color: '#fff' }}
  onOpen={() => setSpeedDialOpen(!speedDialOpen)}
  onClose={() => setSpeedDialOpen(!speedDialOpen)}
  actions={[
    {
      icon: { name: 'email', color: '#fff' },
      title: 'Email',
      onPress: () => console.log('Email pressed'),
    },
    {
      icon: { name: 'phone', color: '#fff' },
      title: 'Call',
      onPress: () => console.log('Call pressed'),
    },
    {
      icon: { name: 'message', color: '#fff' },
      title: 'Message',
      onPress: () => console.log('Message pressed'),
    },
  ]}
/>

// Custom styled SpeedDial
<SpeedDial
  isOpen={customSpeedDialOpen}
  icon={{ name: 'menu', color: '#fff' }}
  openIcon={{ name: 'close', color: '#fff' }}
  onOpen={() => setCustomSpeedDialOpen(!customSpeedDialOpen)}
  onClose={() => setCustomSpeedDialOpen(!customSpeedDialOpen)}
  buttonStyle={{
    backgroundColor: '#9c27b0',
  }}
  actions={[
    {
      icon: { name: 'camera', color: '#fff' },
      title: 'Take Photo',
      onPress: openCamera,
      buttonStyle: { backgroundColor: '#2196f3' },
    },
    {
      icon: { name: 'photo-library', color: '#fff' },
      title: 'Gallery',
      onPress: openGallery,
      buttonStyle: { backgroundColor: '#4caf50' },
    },
    {
      icon: { name: 'videocam', color: '#fff' },
      title: 'Record Video',
      onPress: recordVideo,
      buttonStyle: { backgroundColor: '#ff5722' },
    },
  ]}
  overlayColor="rgba(0,0,0,0.5)"
  transitionDelay={50}
/>

// FAB with different placements
<View style={{ flex: 1 }}>
  <FAB
    icon={{ name: 'share', color: 'white' }}
    placement="left"
    color="#e91e63"
    onPress={handleShare}
  />
  
  <FAB
    icon={{ name: 'favorite', color: 'white' }}
    placement="right"
    color="#f44336"
    onPress={handleFavorite}
    containerStyle={{ bottom: 80 }}
  />
</View>

// Conditional FAB visibility
<FAB
  icon={{ name: 'edit', color: 'white' }}
  color="#607d8b"
  visible={showEditFAB}
  onPress={handleEdit}
  buttonStyle={{
    borderRadius: 28,
  }}
/>