React Native Paper

npx create-expo-app@latest MyPaperApp --template blank-typescript
cd MyPaperApp
npx expo install react-native-paper react-native-safe-area-context
npm install @react-navigation/native

// theme/paper.ts
import {
  MD3DarkTheme,
  MD3LightTheme,
  adaptNavigationTheme,
  configureFonts,
} from "react-native-paper";
import {
  DarkTheme as NavDarkTheme,
  DefaultTheme as NavDefaultTheme,
} from "@react-navigation/native";
 
const fontConfig = configureFonts({ config: { fontFamily: "System" } });
 
export const lightTheme = {
  ...MD3LightTheme,
  fonts: fontConfig,
  colors: {
    ...MD3LightTheme.colors,
    primary: "#2563eb",
    secondary: "#7c3aed",
  },
  roundness: 10,
};
 
export const darkTheme = {
  ...MD3DarkTheme,
  fonts: fontConfig,
  colors: {
    ...MD3DarkTheme.colors,
    primary: "#60a5fa",
    secondary: "#a78bfa",
  },
  roundness: 10,
};
 
export const { LightTheme: NavLight, DarkTheme: NavDark } = adaptNavigationTheme({
  reactNavigationLight: NavDefaultTheme,
  reactNavigationDark: NavDarkTheme,
  materialLight: lightTheme,
  materialDark: darkTheme,
});

// App.tsx
import { useColorScheme } from "react-native";
import { PaperProvider } from "react-native-paper";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { HomeScreen } from "./screens/HomeScreen";
import { darkTheme, lightTheme, NavDark, NavLight } from "./theme/paper";
 
const Stack = createNativeStackNavigator();
 
export default function App() {
  const scheme = useColorScheme() ?? "light";
  const paperTheme = scheme === "dark" ? darkTheme : lightTheme;
  const navTheme = scheme === "dark" ? NavDark : NavLight;
 
  return (
    <PaperProvider theme={paperTheme}>
      <NavigationContainer theme={navTheme}>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} options={{ title: "Inbox" }} />
        </Stack.Navigator>
      </NavigationContainer>
    </PaperProvider>
  );
}

// screens/HomeScreen.tsx
import { View } from "react-native";
import { Button, Card, Text, TextInput } from "react-native-paper";
 
export function HomeScreen() {
  return (
    <View style={{ flex: 1, padding: 16, gap: 12 }}>
      <Card mode="elevated">
        <Card.Title title="Welcome" subtitle="Material 3 on Expo" />
        <Card.Content>
          <Text variant="bodyMedium">Compose forms and actions from Paper primitives.</Text>
        </Card.Content>
        <Card.Actions>
          <Button mode="text">Dismiss</Button>
          <Button mode="contained">Continue</Button>
        </Card.Actions>
      </Card>
      <TextInput mode="outlined" label="Email" placeholder="you@example.com" />
    </View>
  );
}

// providers/AppProviders.tsx
import { useMemo } from "react";
import { useColorScheme } from "react-native";
import { PaperProvider, MD3Theme } from "react-native-paper";
import { NavigationContainer, Theme } from "@react-navigation/native";
import { darkTheme, lightTheme, NavDark, NavLight } from "../theme/paper";
 
export function AppProviders({
  children,
  navigationRef,
}: {
  children: React.ReactNode;
  navigationRef?: React.RefObject<object>;
}) {
  const scheme = useColorScheme() ?? "light";
  const paperTheme = useMemo<MD3Theme>(
    () => (scheme === "dark" ? darkTheme : lightTheme),
    [scheme],
  );
  const navTheme = useMemo<Theme>(
    () => (scheme === "dark" ? NavDark : NavLight),
    [scheme],
  );
 
  return (
    <PaperProvider theme={paperTheme}>
      <NavigationContainer ref={navigationRef} theme={navTheme}>
        {children}
      </NavigationContainer>
    </PaperProvider>
  );
}

// screens/LoginScreen.tsx
import { useState } from "react";
import { KeyboardAvoidingView, Platform, View } from "react-native";
import { Button, HelperText, Snackbar, Text, TextInput } from "react-native-paper";
 
export function LoginScreen() {
  const [email, setEmail] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [snack, setSnack] = useState(false);
 
  function handleSubmit() {
    if (!email.includes("@")) {
      setError("Enter a valid email");
      return;
    }
    setError(null);
    setSnack(true);
  }
 
  return (
    <KeyboardAvoidingView
      style={{ flex: 1 }}
      behavior={Platform.OS === "ios" ? "padding" : undefined}
    >
      <View style={{ flex: 1, padding: 24, justifyContent: "center", gap: 12 }}>
        <Text variant="headlineMedium">Sign in</Text>
        <TextInput
          mode="outlined"
          label="Email"
          value={email}
          onChangeText={setEmail}
          keyboardType="email-address"
          autoCapitalize="none"
          error={!!error}
          accessibilityLabel="Email address"
        />
        <HelperText type="error" visible={!!error}>
          {error}
        </HelperText>
        <Button mode="contained" onPress={handleSubmit} accessibilityLabel="Sign in">
          Sign in
        </Button>
      </View>
      <Snackbar visible={snack} onDismiss={() => setSnack(false)} duration={3000}>
        Signed in as {email}
      </Snackbar>
    </KeyboardAvoidingView>
  );
}

import { MD3LightTheme } from "react-native-paper";
 
const theme = {
  ...MD3LightTheme,
  colors: {
    ...MD3LightTheme.colors,
    primary: "#2563eb",       // brand actions
    onPrimary: "#ffffff",     // text on primary buttons
    surface: "#ffffff",       // cards, sheets
    onSurface: "#1c1b1f",     // body text on surface
    background: "#f8fafc",    // screen backdrop
  },
  roundness: 10,              // global corner radius baseline
};

import { adaptNavigationTheme } from "react-native-paper";
import { DefaultTheme, DarkTheme } from "@react-navigation/native";
 
const { LightTheme, DarkTheme: NavDark } = adaptNavigationTheme({
  reactNavigationLight: DefaultTheme,
  reactNavigationDark: DarkTheme,
  materialLight: lightTheme,
  materialDark: darkTheme,
});

import type { MD3Theme } from "react-native-paper";
 
export const lightTheme: MD3Theme = { ... };