Provider & Theming

/**
 * Main provider component for React Native Paper
 * @param props - Provider configuration options
 * @returns JSX Element wrapping your app
 */
function PaperProvider(props: ProviderProps): JSX.Element;

interface ProviderProps {
  /** Theme object (MD2 or MD3) */
  theme?: MD3Theme | MD2Theme;
  /** App content */
  children: React.ReactNode;
  /** Global settings */
  settings?: {
    /** Default icon source for components */
    icon?: IconSource;
  };
}

import React from 'react';
import { PaperProvider, MD3LightTheme } from 'react-native-paper';
import { MyApp } from './MyApp';

export default function App() {
  return (
    <PaperProvider theme={MD3LightTheme}>
      <MyApp />
    </PaperProvider>
  );
}

/**
 * Hook to access the current theme with optional overrides
 * @param overrides - Partial theme overrides
 * @returns Complete theme object
 */
function useTheme<T = MD3Theme>(overrides?: $DeepPartial<T>): T;

/**
 * Internal theme hook used by Paper components
 * @param themeOverrides - Partial theme overrides
 * @returns Internal theme with component-specific extensions
 */
function useInternalTheme(themeOverrides?: $DeepPartial<InternalTheme>): InternalTheme;

import React from 'react';
import { View, Text } from 'react-native';
import { useTheme } from 'react-native-paper';

function ThemedComponent() {
  const theme = useTheme();
  
  return (
    <View style={{ backgroundColor: theme.colors.surface }}>
      <Text style={{ color: theme.colors.onSurface }}>
        Themed content
      </Text>
    </View>
  );
}

/**
 * Higher-order component that injects theme as a prop
 * @param WrappedComponent - Component to wrap with theme
 * @returns Component with theme prop injected
 */
function withTheme<Props, C>(
  WrappedComponent: ComponentType<Props & { theme: MD3Theme | MD2Theme }> & C
): ComponentType<Props> & C;

/**
 * Internal HOC for Paper components
 * @param WrappedComponent - Component to wrap with internal theme
 * @returns Component with internal theme injected
 */
function withInternalTheme<Props extends { theme: InternalTheme }, C>(
  WrappedComponent: ComponentType<Props & { theme: InternalTheme }> & C
): ComponentType<Omit<Props, 'theme'>> & C;

/**
 * Theme context provider component
 * @param props - Provider props with theme and children
 * @returns Provider element
 */
function ThemeProvider(props: { theme: MD3Theme | MD2Theme; children: React.ReactNode }): JSX.Element;

/** Default Material Design 3 light theme */
const DefaultTheme: MD3Theme;

/** Material Design 3 light theme */
const MD3LightTheme: MD3Theme;

/** Material Design 3 dark theme */
const MD3DarkTheme: MD3Theme;

/** Material Design 2 light theme */
const MD2LightTheme: MD2Theme;

/** Material Design 2 dark theme */
const MD2DarkTheme: MD2Theme;

/**
 * Get theme by version and scheme
 * @param isDark - Whether to return dark theme
 * @param isV3 - Whether to use Material Design 3
 * @returns Appropriate theme object
 */
function getTheme<Scheme extends boolean = false, IsVersion3 extends boolean = true>(
  isDark?: Scheme,
  isV3?: IsVersion3  
): (typeof defaultThemesByVersion)[IsVersion3 extends true ? 3 : 2][Scheme extends true ? 'dark' : 'light'];

/** Theme configuration by version and scheme */
const defaultThemesByVersion: {
  2: { light: MD2Theme; dark: MD2Theme };
  3: { light: MD3Theme; dark: MD3Theme };
};

/**
 * Adapts Material Design themes for React Navigation
 * @param themes - Navigation and material theme configuration
 * @returns Adapted navigation themes
 */
function adaptNavigationTheme<T extends NavigationTheme>(themes: {
  reactNavigationLight?: T;
  reactNavigationDark?: T;
  materialLight?: MD3Theme;
  materialDark?: MD3Theme;
}): { LightTheme?: T; DarkTheme?: T };

interface NavigationTheme {
  dark: boolean;
  colors: {
    primary: string;
    background: string;
    card: string;
    text: string;
    border: string;
    notification: string;
  };
}

import { DefaultTheme as NavigationDefaultTheme, DarkTheme as NavigationDarkTheme } from '@react-navigation/native';
import { MD3LightTheme, MD3DarkTheme, adaptNavigationTheme } from 'react-native-paper';

const { LightTheme, DarkTheme } = adaptNavigationTheme({
  reactNavigationLight: NavigationDefaultTheme,
  reactNavigationDark: NavigationDarkTheme,
  materialLight: MD3LightTheme,
  materialDark: MD3DarkTheme,
});

/**
 * Generate shadow styles for elevation
 * @param elevation - Elevation level (0-24)
 * @returns Shadow style object
 */
function shadow(elevation: number): {
  shadowOffset: { width: number; height: number };
  shadowOpacity: number;
  shadowRadius: number;
  elevation: number;
};

/**
 * Generate overlay color for surfaces
 * @param elevation - Elevation level
 * @param surfaceColor - Base surface color
 * @returns Overlay color string
 */
function overlay(elevation: number, surfaceColor?: string): string;

/**
 * Configure custom fonts for themes
 * @param config - Font configuration
 * @returns Font configuration object
 */
function configureFonts(config: {
  ios?: Partial<Fonts>;
  android?: Partial<Fonts>;
  web?: Partial<Fonts>;
}): Fonts;

/** Material Design 2 color tokens */
namespace MD2Colors {
  const red50: string;
  const red100: string;
  const red200: string;
  // ... additional color tokens
  const purple500: string;
  const purple600: string;
  // ... complete MD2 color palette
}

/** Material Design 3 color tokens */
namespace MD3Colors {
  const primary0: string;
  const primary10: string;
  const primary20: string;
  // ... complete MD3 color palette
  const neutral99: string;
  const neutralVariant99: string;
}

/**
 * Generate dynamic elevation colors based on Material You
 * @param scheme - Android dynamic color scheme
 * @returns Elevation color mapping
 */
function getDynamicThemeElevations(scheme: MD3AndroidColors): MD3ElevationColors;

interface MD3AndroidColors {
  primary: number;
  primaryContainer: number;
  secondary: number;
  secondaryContainer: number;
  tertiary: number;
  tertiaryContainer: number;
  surface: number;
  surfaceVariant: number;
  background: number;
  error: number;
  errorContainer: number;
  onPrimary: number;
  onPrimaryContainer: number;
  onSecondary: number;
  onSecondaryContainer: number;
  onTertiary: number;
  onTertiaryContainer: number;
  onSurface: number;
  onSurfaceVariant: number;
  onError: number;
  onErrorContainer: number;
  onBackground: number;
  outline: number;
  outlineVariant: number;
  inverseSurface: number;
  inverseOnSurface: number;
  inversePrimary: number;
  shadow: number;
  scrim: number;
}

interface MD3Theme extends ThemeBase {
  version: 3;
  isV3: true;
  colors: MD3Colors;
  fonts: MD3Typescale;
}

interface MD2Theme extends ThemeBase {
  version: 2;
  isV3: false;
  colors: MD2Colors;
  fonts: Fonts;
}

interface ThemeBase {
  dark: boolean;
  mode?: 'adaptive' | 'exact';
  roundness: number;
  animation: {
    scale: number;
    defaultAnimationDuration?: number;
  };
}

interface MD3Colors {
  primary: string;
  primaryContainer: string;
  secondary: string;
  secondaryContainer: string;
  tertiary: string;
  tertiaryContainer: string;
  surface: string;
  surfaceVariant: string;
  surfaceDisabled: string;
  background: string;
  error: string;
  errorContainer: string;
  onPrimary: string;
  onPrimaryContainer: string;
  onSecondary: string;
  onSecondaryContainer: string;
  onTertiary: string;
  onTertiaryContainer: string;
  onSurface: string;
  onSurfaceVariant: string;
  onSurfaceDisabled: string;
  onError: string;
  onErrorContainer: string;
  onBackground: string;
  outline: string;
  outlineVariant: string;
  inverseSurface: string;
  inverseOnSurface: string;
  inversePrimary: string;
  shadow: string;
  scrim: string;
  backdrop: string;
  elevation: MD3ElevationColors;
}

interface MD2Colors {
  primary: string;
  background: string;
  surface: string;
  accent: string;
  error: string;
  text: string;
  onSurface: string;
  disabled: string;
  placeholder: string;
  backdrop: string;
  notification: string;
  tooltip: string;
}

interface MD3ElevationColors {
  level0: string;
  level1: string;
  level2: string;
  level3: string;
  level4: string;
  level5: string;
}

interface Fonts {
  regular: Font;
  medium: Font;
  light: Font;
  thin: Font;
}

interface Font {
  fontFamily: string;
  fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
  fontStyle?: 'normal' | 'italic';
}

type MD3Typescale = {
  [key in MD3TypescaleKey]: MD3Type;
} & {
  default: Omit<MD3Type, 'lineHeight' | 'fontSize'>;
};

interface MD3Type {
  fontFamily: string;
  letterSpacing: number;
  fontWeight: Font['fontWeight'];
  lineHeight: number;
  fontSize: number;
  fontStyle?: Font['fontStyle'];
}

type InternalTheme = MD2Theme | MD3Theme;
type ThemeProp = $DeepPartial<InternalTheme>;