ppc_amnet/amnet-native/App.tsx

import React from "react";
import {StatusBar} from "expo-status-bar";
import {Server, WalletCards} from "lucide-react-native";
import {Platform, useColorScheme, View} from "react-native";
import {NavigationContainer} from "@react-navigation/native";
import {SafeAreaProvider} from "react-native-safe-area-context";
import {MD3Colors} from "react-native-paper/lib/typescript/types";
import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
import {createNativeStackNavigator} from "@react-navigation/native-stack";
import {JetBrainsMono_400Regular, useFonts} from "@expo-google-fonts/jetbrains-mono";
import {DefaultTheme as NavigationLightTheme, DarkTheme as NavigationDarkTheme} from '@react-navigation/native';
import {
    ActivityIndicator,
    adaptNavigationTheme,
    MD3DarkTheme,
    MD3LightTheme,
    MD3Theme,
    PaperProvider,
    Text
} from 'react-native-paper';

import linking from "./Linking";
import RealmContext from "./models/RealmContext";

import {AMUITabBar} from "./components/AMUITabBar";

import CardEditorModal from "./app/card/CardEditorModal";
import CardAddModal from "./app/card/CardAddModal";
import ServerAddModal from "./app/ServerAddModal";

import CardManagerStack from "./app/CardManagerStack";
import ServerManagerStack from "./app/ServerManagerStack";

const AMColors: Partial<MD3Colors> = {
    primary: '#e11d48',
    secondary: "#f97316",
    tertiary: "#2563eb",
}

const AMUITheme: Partial<MD3Theme> = {
    roundness: 2
}

// blend themes to be a combination of react-native-paper and shadcn/ui
const AMDarkTheme: MD3Theme = {
    ...MD3DarkTheme,
    ...AMUITheme,
    colors: {
        ...MD3DarkTheme.colors,
        ...AMColors,
        background: "#09090b",
        surface: "#1c1917",
    },
};

const AMLightTheme: MD3Theme = {
    ...MD3LightTheme,
    ...AMUITheme,
    colors: {
        ...MD3LightTheme.colors,
        ...AMColors,
        background: "#f9f9f9",
        surface: "#ffffff",
    }
}

const {LightTheme, DarkTheme} = adaptNavigationTheme({
    materialDark: AMDarkTheme,
    materialLight: AMLightTheme,
    reactNavigationDark: NavigationDarkTheme,
    reactNavigationLight: NavigationLightTheme
});

const {RealmProvider} = RealmContext;

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();

function AppContent() {
    return (<Tab.Navigator tabBar={p => <AMUITabBar {...p}/>} screenOptions={{headerShown: false}}>
        <Tab.Screen name="servers"
                    component={ServerManagerStack}
                    options={{tabBarIcon: ({color, size}) => (<Server color={color} size={size}/>)}}/>

        <Tab.Screen name="cards"
                    component={CardManagerStack}
                    options={{tabBarIcon: ({color, size}) => (<WalletCards color={color} size={size}/>)}}/>
    </Tab.Navigator>)
}

export default function AppRoot() {
    const colorScheme = useColorScheme();
    const [fontsLoaded] = useFonts({
        JetBrainsMono_400Regular
    });

    if (!fontsLoaded) {
        return (
            <View style={{flex: 1, justifyContent: "center", alignItems: "center", gap: 10}}>
                <ActivityIndicator animating/>
                <Text variant="bodyMedium">Starting...</Text>
            </View>
        )
    }

    return (
        <RealmProvider>
            <SafeAreaProvider>
                <PaperProvider theme={colorScheme === 'dark' ? AMDarkTheme : AMLightTheme}>
                    {/* @ts-ignore */}
                    <NavigationContainer theme={colorScheme === 'dark' ? DarkTheme : LightTheme} linking={linking}>
                        <StatusBar/>
                        <Stack.Navigator initialRouteName="app">
                            {/* main app */}
                            <Stack.Screen name="app" component={AppContent} options={{headerShown: false}}/>

                            <Stack.Group screenOptions={{
                                    presentation: "modal",
                                    headerTitleStyle: {
                                        fontWeight: "bold"
                                    }
                                }}>
                                <Stack.Screen name="add-server" component={ServerAddModal} options={{title: "Add Server"}}/>
                                <Stack.Screen name="add-card" component={CardAddModal} options={{title: "Add Card", headerShown: Platform.OS !== 'ios'}}/>
                                <Stack.Screen name="edit-card" component={CardEditorModal} options={{title: "Edit Card"}}/>
                            </Stack.Group>
                        </Stack.Navigator>
                    </NavigationContainer>
                </PaperProvider>
            </SafeAreaProvider>
        </RealmProvider>
    )
}