// React Native Paper Implementation with Theme Customization
import { MD3LightTheme, MD3DarkTheme, configureFonts } from 'react-native-paper'
import { adaptNavigationTheme } from 'react-navigation/native'
import type { MD3Type } from 'react-native-paper'
const fontConfig: Partial = {
  displayLarge: {
    fontFamily: 'Inter-Bold',
    fontSize: 57,
    lineHeight: 64,
    letterSpacing: -0.25,
    fontWeight: '700'
  },
  displayMedium: {
    fontFamily: 'Inter-SemiBold',
    fontSize: 45,
    lineHeight: 52,
    letterSpacing: 0,
    fontWeight: '600'
  },
  headlineLarge: {
    fontFamily: 'Inter-SemiBold',
    fontSize: 32,
    lineHeight: 40,
    letterSpacing: 0,
    fontWeight: '600'
  },
  bodyLarge: {
    fontFamily: 'Inter-Regular',
    fontSize: 16,
    lineHeight: 24,
    letterSpacing: 0.15,
    fontWeight: '400'
  },
  labelLarge: {
    fontFamily: 'Inter-Medium',
    fontSize: 14,
    lineHeight: 20,
    letterSpacing: 0.1,
    fontWeight: '500'
  }
}
const customLightTheme = {
  ...MD3LightTheme,
  fonts: configureFonts({ config: fontConfig }),
  colors: {
    ...MD3LightTheme.colors,
    primary: '#6366f1',
    primaryContainer: '#e0e7ff',
    secondary: '#64748b',
    secondaryContainer: '#f1f5f9',
    tertiary: '#8b5cf6',
    tertiaryContainer: '#ede9fe',
    error: '#ef4444',
    errorContainer: '#fee2e2',
    background: '#ffffff',
    surface: '#f8fafc',
    surfaceVariant: '#f1f5f9',
    outline: '#cbd5e1',
    outlineVariant: '#e2e8f0'
  }
}
const customDarkTheme = {
  ...MD3DarkTheme,
  fonts: configureFonts({ config: fontConfig }),
  colors: {
    ...MD3DarkTheme.colors,
    primary: '#818cf8',
    primaryContainer: '#4338ca',
    secondary: '#94a3b8',
    secondaryContainer: '#334155',
    tertiary: '#a78bfa',
    tertiaryContainer: '#6d28d9',
    error: '#f87171',
    errorContainer: '#991b1b',
    background: '#0f172a',
    surface: '#1e293b',
    surfaceVariant: '#334155',
    outline: '#475569',
    outlineVariant: '#64748b'
  }
}
// Theme provider setup
import { PaperProvider } from 'react-native-paper'
import { useColorScheme } from 'react-native'
export function AppThemeProvider({ children }: { children: React.ReactNode }) {
  const colorScheme = useColorScheme()
  const theme = colorScheme === 'dark' ? customDarkTheme : customLightTheme
  return (
    
      {children}
    
  )
}

// Universal Button Component with Platform Optimization
import React from 'react'
import { Platform, Pressable, View, Text, ActivityIndicator } from 'react-native'
import { Button as PaperButton, useTheme } from 'react-native-paper'
import { Button as TamaguiButton } from 'tamagui'
import type { IconSource } from 'react-native-paper/lib/typescript/components/Icon'
interface UniversalButtonProps {
  title: string
  onPress: () => void
  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'text'
  size?: 'sm' | 'md' | 'lg'
  icon?: IconSource
  iconPosition?: 'left' | 'right'
  loading?: boolean
  disabled?: boolean
  fullWidth?: boolean
  testID?: string
}
export const UniversalButton: React.FC = ({
  title,
  onPress,
  variant = 'primary',
  size = 'md',
  icon,
  iconPosition = 'left',
  loading = false,
  disabled = false,
  fullWidth = false,
  testID
}) => {
  const theme = useTheme()
  // Platform-specific rendering for optimal performance
  if (Platform.OS === 'web') {
    return (
      
        {loading ?  : title}
      
    )
  }
  // Native implementation with React Native Paper
  const mode = variant === 'primary' ? 'contained' :
               variant === 'outline' ? 'outlined' :
               variant === 'text' ? 'text' : 'elevated'
  return (
    
      {title}
    
  )
}

// app/_layout.tsx - Root layout
import { Stack } from 'expo-router'
import { AppThemeProvider } from '@/providers/theme'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { GestureHandlerRootView } from 'react-native-gesture-handler'
const queryClient = new QueryClient()
export default function RootLayout() {
  return (
    
      
        
          
            
            
          
        
      
    
  )
}
// app/(tabs)/_layout.tsx - Tab navigation
import { Tabs } from 'expo-router'
import { Icon } from 'react-native-paper'
import { useTheme } from 'react-native-paper'
export default function TabsLayout() {
  const theme = useTheme()
  return (
    
       (
            
          )
        }}
      />
       (
            
          )
        }}
      />
       (
            
          )
        }}
      />
    
  )
}
// app/(tabs)/home/index.tsx - Home screen
import { View, ScrollView, RefreshControl } from 'react-native'
import { Text, Card, Button } from 'react-native-paper'
import { useRouter } from 'expo-router'
import { usePosts } from '@/hooks/api'
import { useState } from 'react'
export default function HomeScreen() {
  const router = useRouter()
  const { data, isLoading, refetch } = usePosts()
  const [refreshing, setRefreshing] = useState(false)
  const onRefresh = async () => {
    setRefreshing(true)
    await refetch()
    setRefreshing(false)
  }
  return (
    
      }
    >
      
        
          Latest Posts
        
        {data?.data.map(post => (
          
            
            
            
              {post.excerpt}
            
            
               router.push(/posts/${post.id})}>
                Read More
              
            
          
        ))}
      
    
  )
}
// app/posts/[id].tsx - Dynamic route for post details
import { useLocalSearchParams } from 'expo-router'
import { usePost } from '@/hooks/api'
import { View, ScrollView } from 'react-native'
import { Text, ActivityIndicator } from 'react-native-paper'
export default function PostDetailScreen() {
  const { id } = useLocalSearchParams<{ id: string }>()
  const { data, isLoading } = usePost(id)
  if (isLoading) {
    return (
      
        
      
    )
  }
  return (
    
      
        
          {data?.data.title}
        
        
          {data?.data.content}
        
      
    
  )
}

// Advanced animations with Reanimated 3
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
  withTiming,
  withRepeat,
  withSequence,
  interpolate,
  Extrapolate
} from 'react-native-reanimated'
import { Gesture, GestureDetector } from 'react-native-gesture-handler'
interface AnimatedCardProps {
  children: React.ReactNode
  onPress?: () => void
}
export function AnimatedCard({ children, onPress }: AnimatedCardProps) {
  const pressed = useSharedValue(false)
  const offset = useSharedValue({ x: 0, y: 0 })
  const panGesture = Gesture.Pan()
    .onBegin(() => {
      pressed.value = true
    })
    .onChange((event) => {
      offset.value = {
        x: event.translationX,
        y: event.translationY
      }
    })
    .onFinalize(() => {
      offset.value = withSpring({ x: 0, y: 0 })
      pressed.value = false
    })
  const animatedStyles = useAnimatedStyle(() => {
    const scale = pressed.value ? withSpring(0.95) : withSpring(1)
    const rotateZ = interpolate(
      offset.value.x,
      [-300, 0, 300],
      [-15, 0, 15],
      Extrapolate.CLAMP
    )
    return {
      transform: [
        { translateX: offset.value.x },
        { translateY: offset.value.y },
        { scale },
        { rotateZ: ${rotateZ}deg }
      ],
      shadowOpacity: pressed.value ? 0.3 : 0.1
    }
  })
  return (
    
      
        {children}
      
    
  )
}
// Skeleton loading animation
export function SkeletonLoader() {
  const shimmer = useSharedValue(0)
  useEffect(() => {
    shimmer.value = withRepeat(
      withTiming(1, { duration: 1500 }),
      -1,
      false
    )
  }, [])
  const animatedStyle = useAnimatedStyle(() => {
    const translateX = interpolate(
      shimmer.value,
      [0, 1],
      [-300, 300]
    )
    return {
      transform: [{ translateX }]
    }
  })
  return (
    
      
    
  )
}

// High-performance lists with FlashList
import { FlashList } from '@shopify/flash-list'
import { useInfiniteQuery } from '@tanstack/react-query'
import { ActivityIndicator } from 'react-native-paper'
interface Post {
  id: string
  title: string
  excerpt: string
  author: {
    name: string
    avatar: string
  }
}
export function PostsList() {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    isLoading
  } = useInfiniteQuery({
    queryKey: ['posts'],
    queryFn: ({ pageParam = 1 }) => fetchPosts(pageParam),
    getNextPageParam: (lastPage) => lastPage.nextPage,
    initialPageParam: 1
  })
  const posts = data?.pages.flatMap(page => page.data) ?? []
  const renderItem = ({ item }: { item: Post }) => (
    
  )
  const renderFooter = () => {
    if (!isFetchingNextPage) return null
    return (
      
        
      
    )
  }
  if (isLoading) {
    return 
  }
  return (
     item.id}
      onEndReached={() => {
        if (hasNextPage && !isFetchingNextPage) {
          fetchNextPage()
        }
      }}
      onEndReachedThreshold={0.5}
      ListFooterComponent={renderFooter}
    />
  )
}

// iOS Module (Swift)
// BiometricAuth.swift
import LocalAuthentication
@objc(BiometricAuth)
class BiometricAuth: NSObject {
  @objc
  func authenticate(_ resolve: @escaping RCTPromiseResolveBlock,
                    rejecter reject: @escaping RCTPromiseRejectBlock) {
    let context = LAContext()
    var error: NSError?
    if context.canEvaluatePolicy(.deviceOwnerAuthenticationWithBiometrics, error: &error) {
      context.evaluatePolicy(.deviceOwnerAuthenticationWithBiometrics,
                            localizedReason: "Authenticate to access your account") { success, error in
        if success {
          resolve(true)
        } else {
          reject("AUTH_FAILED", "Authentication failed", error)
        }
      }
    } else {
      reject("NOT_AVAILABLE", "Biometric authentication not available", error)
    }
  }
}
// Android Module (Kotlin)
// BiometricAuthModule.kt
package com.myapp
import androidx.biometric.BiometricPrompt
import androidx.fragment.app.FragmentActivity
import com.facebook.react.bridge.*
class BiometricAuthModule(reactContext: ReactApplicationContext) :
  ReactContextBaseJavaModule(reactContext) {
  override fun getName() = "BiometricAuth"
  @ReactMethod
  fun authenticate(promise: Promise) {
    val activity = currentActivity as? FragmentActivity
    if (activity == null) {
      promise.reject("NO_ACTIVITY", "Activity not available")
      return
    }
    val executor = ContextCompat.getMainExecutor(activity)
    val biometricPrompt = BiometricPrompt(activity, executor,
      object : BiometricPrompt.AuthenticationCallback() {
        override fun onAuthenticationSucceeded(result: BiometricPrompt.AuthenticationResult) {
          promise.resolve(true)
        }
        override fun onAuthenticationFailed() {
          promise.reject("AUTH_FAILED", "Authentication failed")
        }
      }
    )
    val promptInfo = BiometricPrompt.PromptInfo.Builder()
      .setTitle("Biometric Authentication")
      .setSubtitle("Authenticate to access your account")
      .setNegativeButtonText("Cancel")
      .build()
    biometricPrompt.authenticate(promptInfo)
  }
}
// React Native TypeScript wrapper
import { NativeModules } from 'react-native'
interface BiometricAuthInterface {
  authenticate(): Promise
}
const { BiometricAuth } = NativeModules
export const useBiometricAuth = () => {
  const authenticate = async (): Promise => {
    try {
      const result = await BiometricAuth.authenticate()
      return result
    } catch (error) {
      console.error('Biometric authentication failed:', error)
      return false
    }
  }
  return { authenticate }
}

// eas.json
{
  "cli": {
    "version": ">= 5.0.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "channel": "development"
    },
    "preview": {
      "distribution": "internal",
      "channel": "preview"
    },
    "production": {
      "channel": "production"
    }
  },
  "submit": {
    "production": {
      "ios": {
        "appleId": "your@email.com",
        "ascAppId": "1234567890",
        "appleTeamId": "ABCD123456"
      },
      "android": {
        "serviceAccountKeyPath": "./google-service-account.json",
        "track": "production"
      }
    }
  },
  "update": {
    "development": {
      "channel": "development"
    },
    "preview": {
      "channel": "preview"
    },
    "production": {
      "channel": "production"
    }
  }
}

// Update manager component
import * as Updates from 'expo-updates'
import { useEffect, useState } from 'react'
import { View, Text, Button } from 'react-native'
export function UpdateManager() {
  const [updateAvailable, setUpdateAvailable] = useState(false)
  const [isUpdating, setIsUpdating] = useState(false)
  useEffect(() => {
    checkForUpdates()
  }, [])
  const checkForUpdates = async () => {
    try {
      const update = await Updates.checkForUpdateAsync()
      if (update.isAvailable) {
        setUpdateAvailable(true)
      }
    } catch (error) {
      console.error('Error checking for updates:', error)
    }
  }
  const downloadAndApplyUpdate = async () => {
    try {
      setIsUpdating(true)
      await Updates.fetchUpdateAsync()
      await Updates.reloadAsync()
    } catch (error) {
      console.error('Error updating app:', error)
      setIsUpdating(false)
    }
  }
  if (!updateAvailable) return null
  return (
    
      A new update is available!
      
    
  )
}

// PostCard.test.tsx
import { render, fireEvent, waitFor } from '@testing-library/react-native'
import { PostCard } from '../PostCard'
describe('PostCard', () => {
  const mockPost = {
    id: '1',
    title: 'Test Post',
    excerpt: 'This is a test post',
    author: {
      name: 'John Doe',
      avatar: 'https://example.com/avatar.jpg'
    }
  }
  it('renders post information correctly', () => {
    const { getByText } = render()
    expect(getByText('Test Post')).toBeTruthy()
    expect(getByText('This is a test post')).toBeTruthy()
    expect(getByText('John Doe')).toBeTruthy()
  })
  it('calls onPress when card is tapped', () => {
    const onPressMock = jest.fn()
    const { getByTestId } = render(
      
    )
    fireEvent.press(getByTestId('post-card'))
    expect(onPressMock).toHaveBeenCalledWith(mockPost.id)
  })
  it('shows loading state while favoriting', async () => {
    const { getByTestId, getByA11yHint } = render()
    fireEvent.press(getByTestId('favorite-button'))
    await waitFor(() => {
      expect(getByA11yHint('Loading')).toBeTruthy()
    })
  })
})

// e2e/firstTest.e2e.ts
import { device, element, by, expect as detoxExpect } from 'detox'
describe('Home Screen', () => {
  beforeAll(async () => {
    await device.launchApp()
  })
  beforeEach(async () => {
    await device.reloadReactNative()
  })
  it('should display home screen', async () => {
    await detoxExpect(element(by.text('Latest Posts'))).toBeVisible()
  })
  it('should navigate to post detail when card is tapped', async () => {
    await element(by.id('post-card-1')).tap()
    await detoxExpect(element(by.id('post-detail-screen'))).toBeVisible()
  })
  it('should refresh posts on pull down', async () => {
    await element(by.id('posts-scroll-view')).swipe('down', 'slow', 0.5)
    await detoxExpect(element(by.id('refresh-control'))).toBeVisible()
  })
})