react-native-acoustic-connect-beta 18.0.7 → 18.0.8

package/Examples/SampleUI/src/core/theming.tsx

@@ -0,0 +1,170 @@
+import type { ComponentType } from 'react';
+
+import { $DeepPartial, createTheming } from '@callstack/react-theme-provider';
+import color from 'color';
+
+import {
+  MD2DarkTheme,
+  MD2LightTheme,
+  MD3DarkTheme,
+  MD3LightTheme,
+} from '../styles/themes';
+import type {
+  InternalTheme,
+  MD3Theme,
+  MD3AndroidColors,
+  NavigationTheme,
+} from '../types';
+
+export const DefaultTheme = MD3LightTheme;
+
+export const {
+  ThemeProvider,
+  withTheme,
+  useTheme: useAppTheme,
+} = createTheming<unknown>(MD3LightTheme);
+
+export function useTheme<T = MD3Theme>(overrides?: $DeepPartial<T>) {
+  return useAppTheme<T>(overrides);
+}
+
+export const useInternalTheme = (
+  themeOverrides: $DeepPartial<InternalTheme> | undefined
+) => useAppTheme<InternalTheme>(themeOverrides);
+
+export const withInternalTheme = <Props extends { theme: InternalTheme }, C>(
+  WrappedComponent: ComponentType<Props & { theme: InternalTheme }> & C
+) => withTheme<Props, C>(WrappedComponent);
+
+export const defaultThemesByVersion = {
+  2: {
+    light: MD2LightTheme,
+    dark: MD2DarkTheme,
+  },
+  3: {
+    light: MD3LightTheme,
+    dark: MD3DarkTheme,
+  },
+};
+
+export const getTheme = <
+  Scheme extends boolean = false,
+  IsVersion3 extends boolean = true
+>(
+  isDark: Scheme = false as Scheme,
+  isV3: IsVersion3 = true as IsVersion3
+): (typeof defaultThemesByVersion)[IsVersion3 extends true
+  ? 3
+  : 2][Scheme extends true ? 'dark' : 'light'] => {
+  const themeVersion = isV3 ? 3 : 2;
+  const scheme = isDark ? 'dark' : 'light';
+
+  return defaultThemesByVersion[themeVersion][scheme];
+};
+
+// eslint-disable-next-line no-redeclare
+export function adaptNavigationTheme(themes: {
+  reactNavigationLight: NavigationTheme;
+  materialLight?: MD3Theme;
+}): {
+  LightTheme: NavigationTheme;
+};
+// eslint-disable-next-line no-redeclare
+export function adaptNavigationTheme(themes: {
+  reactNavigationDark: NavigationTheme;
+  materialDark?: MD3Theme;
+}): {
+  DarkTheme: NavigationTheme;
+};
+// eslint-disable-next-line no-redeclare
+export function adaptNavigationTheme(themes: {
+  reactNavigationLight: NavigationTheme;
+  reactNavigationDark: NavigationTheme;
+  materialLight?: MD3Theme;
+  materialDark?: MD3Theme;
+}): { LightTheme: NavigationTheme; DarkTheme: NavigationTheme };
+// eslint-disable-next-line no-redeclare
+export function adaptNavigationTheme(themes: any) {
+  const {
+    reactNavigationLight,
+    reactNavigationDark,
+    materialLight,
+    materialDark,
+  } = themes;
+
+  const getAdaptedTheme = (
+    navigationTheme: NavigationTheme,
+    MD3Theme: MD3Theme
+  ) => {
+    return {
+      ...navigationTheme,
+      colors: {
+        ...navigationTheme.colors,
+        primary: MD3Theme.colors.primary,
+        background: MD3Theme.colors.background,
+        card: MD3Theme.colors.elevation.level2,
+        text: MD3Theme.colors.onSurface,
+        border: MD3Theme.colors.outline,
+        notification: MD3Theme.colors.error,
+      },
+    };
+  };
+
+  const MD3Themes = {
+    light: materialLight || MD3LightTheme,
+    dark: materialDark || MD3DarkTheme,
+  };
+
+  if (reactNavigationLight && reactNavigationDark) {
+    const modes = ['light', 'dark'] as const;
+
+    const NavigationThemes = {
+      light: reactNavigationLight,
+      dark: reactNavigationDark,
+    };
+
+    const { light: adaptedLight, dark: adaptedDark } = modes.reduce(
+      (prev, curr) => {
+        return {
+          ...prev,
+          [curr]: getAdaptedTheme(NavigationThemes[curr], MD3Themes[curr]),
+        };
+      },
+      {
+        light: reactNavigationLight,
+        dark: reactNavigationDark,
+      }
+    );
+
+    return {
+      LightTheme: adaptedLight,
+      DarkTheme: adaptedDark,
+    };
+  }
+
+  if (reactNavigationDark) {
+    return {
+      DarkTheme: getAdaptedTheme(reactNavigationDark, MD3Themes.dark),
+    };
+  }
+
+  return {
+    LightTheme: getAdaptedTheme(reactNavigationLight, MD3Themes.light),
+  };
+}
+
+export const getDynamicThemeElevations = (scheme: MD3AndroidColors) => {
+  const elevationValues = ['transparent', 0.05, 0.08, 0.11, 0.12, 0.14];
+  return elevationValues.reduce((elevations, elevationValue, index) => {
+    return {
+      ...elevations,
+      [`level${index}`]:
+        index === 0
+          ? elevationValue
+          : color(scheme.surface)
+              .mix(color(scheme.primary), elevationValue as number)
+              .rgb()
+              .string(),
+    };
+  }, {});
+};

package/Examples/SampleUI/src/index.native.tsx

@@ -0,0 +1,270 @@
+import * as React from 'react';
+import { I18nManager } from 'react-native';
+
+import { useMaterial3Theme } from '@pchmn/expo-material3-theme';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import {
+  InitialState,
+  NavigationContainer,
+  DarkTheme as NavigationDarkTheme,
+  DefaultTheme as NavigationDefaultTheme,
+} from '@react-navigation/native';
+import { useFonts } from 'expo-font';
+import { useKeepAwake } from 'expo-keep-awake';
+import { StatusBar } from 'expo-status-bar';
+// import * as Updates from 'expo-updates';
+import {
+  Provider as PaperProvider,
+  MD3DarkTheme,
+  MD3LightTheme,
+  MD2DarkTheme,
+  MD2LightTheme,
+  MD2Theme,
+  MD3Theme,
+  useTheme,
+  adaptNavigationTheme,
+  configureFonts,
+} from 'react-native-paper';
+import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
+
+import DrawerItems from './DrawerItems';
+import App from './RootNavigator';
+import { deviceColorsSupported } from '../utils';
+
+const PERSISTENCE_KEY = 'NAVIGATION_STATE';
+const PREFERENCES_KEY = 'APP_PREFERENCES';
+
+export const PreferencesContext = React.createContext<{
+  toggleShouldUseDeviceColors?: () => void;
+  toggleTheme: () => void;
+  toggleRtl: () => void;
+  toggleThemeVersion: () => void;
+  toggleCollapsed: () => void;
+  toggleCustomFont: () => void;
+  toggleRippleEffect: () => void;
+  customFontLoaded: boolean;
+  rippleEffectEnabled: boolean;
+  collapsed: boolean;
+  rtl: boolean;
+  theme: MD2Theme | MD3Theme;
+  shouldUseDeviceColors?: boolean;
+} | null>(null);
+
+export const useExampleTheme = () => useTheme<MD2Theme | MD3Theme>();
+
+const Drawer = createDrawerNavigator<{ Home: undefined }>();
+
+export default function PaperExample() {
+  useKeepAwake();
+
+  const [fontsLoaded] = useFonts({
+    Abel: require('../assets/fonts/Abel-Regular.ttf'),
+  });
+
+  const [isReady, setIsReady] = React.useState(false);
+  const [initialState, setInitialState] = React.useState<
+    InitialState | undefined
+  >();
+
+  const [shouldUseDeviceColors, setShouldUseDeviceColors] =
+    React.useState(true);
+  const [isDarkMode, setIsDarkMode] = React.useState(false);
+  const [themeVersion, setThemeVersion] = React.useState<2 | 3>(3);
+  const [rtl, setRtl] = React.useState<boolean>(
+    I18nManager.getConstants().isRTL
+  );
+  const [collapsed, setCollapsed] = React.useState(false);
+  const [customFontLoaded, setCustomFont] = React.useState(false);
+  const [rippleEffectEnabled, setRippleEffectEnabled] = React.useState(true);
+
+  const { theme: mdTheme } = useMaterial3Theme();
+  const theme = React.useMemo(() => {
+    if (themeVersion === 2) {
+      return isDarkMode ? MD2DarkTheme : MD2LightTheme;
+    }
+
+    if (!deviceColorsSupported || !shouldUseDeviceColors) {
+      return isDarkMode ? MD3DarkTheme : MD3LightTheme;
+    }
+
+    return isDarkMode
+      ? { ...MD3DarkTheme, colors: mdTheme.dark }
+      : { ...MD3LightTheme, colors: mdTheme.light };
+  }, [isDarkMode, mdTheme, shouldUseDeviceColors, themeVersion]);
+
+  React.useEffect(() => {
+    const restoreState = async () => {
+      try {
+        const savedStateString = await AsyncStorage.getItem(PERSISTENCE_KEY);
+        const state = JSON.parse(savedStateString || '');
+
+        setInitialState(state);
+      } catch (e) {
+        // ignore error
+      } finally {
+        setIsReady(true);
+      }
+    };
+
+    if (!isReady) {
+      restoreState();
+    }
+  }, [isReady]);
+
+  React.useEffect(() => {
+    const restorePrefs = async () => {
+      try {
+        const prefString = await AsyncStorage.getItem(PREFERENCES_KEY);
+        const preferences = JSON.parse(prefString || '');
+
+        if (preferences) {
+          setIsDarkMode(preferences.theme === 'dark');
+
+          if (typeof preferences.rtl === 'boolean') {
+            setRtl(preferences.rtl);
+          }
+        }
+      } catch (e) {
+        // ignore error
+      }
+    };
+
+    restorePrefs();
+  }, []);
+
+  React.useEffect(() => {
+    const savePrefs = async () => {
+      try {
+        await AsyncStorage.setItem(
+          PREFERENCES_KEY,
+          JSON.stringify({
+            theme: isDarkMode ? 'dark' : 'light',
+            rtl,
+          })
+        );
+      } catch (e) {
+        // ignore error
+      }
+
+      if (I18nManager.getConstants().isRTL !== rtl) {
+        I18nManager.forceRTL(rtl);
+        Updates.reloadAsync();
+      }
+    };
+
+    savePrefs();
+  }, [rtl, isDarkMode]);
+
+  const preferences = React.useMemo(
+    () => ({
+      toggleShouldUseDeviceColors: () =>
+        setShouldUseDeviceColors((oldValue) => !oldValue),
+      toggleTheme: () => setIsDarkMode((oldValue) => !oldValue),
+      toggleRtl: () => setRtl((rtl) => !rtl),
+      toggleCollapsed: () => setCollapsed(!collapsed),
+      toggleCustomFont: () => setCustomFont(!customFontLoaded),
+      toggleRippleEffect: () => setRippleEffectEnabled(!rippleEffectEnabled),
+      toggleThemeVersion: () => {
+        setCustomFont(false);
+        setCollapsed(false);
+        setThemeVersion((oldThemeVersion) => (oldThemeVersion === 2 ? 3 : 2));
+        setRippleEffectEnabled(true);
+      },
+      customFontLoaded,
+      rippleEffectEnabled,
+      collapsed,
+      rtl,
+      theme,
+      shouldUseDeviceColors,
+    }),
+    [
+      rtl,
+      theme,
+      collapsed,
+      customFontLoaded,
+      shouldUseDeviceColors,
+      rippleEffectEnabled,
+    ]
+  );
+
+  if (!isReady && !fontsLoaded) {
+    return null;
+  }
+
+  const { LightTheme, DarkTheme } = adaptNavigationTheme({
+    reactNavigationLight: NavigationDefaultTheme,
+    reactNavigationDark: NavigationDarkTheme,
+  });
+
+  const CombinedDefaultTheme = {
+    ...MD3LightTheme,
+    ...LightTheme,
+    colors: {
+      ...MD3LightTheme.colors,
+      ...LightTheme.colors,
+    },
+  };
+
+  const CombinedDarkTheme = {
+    ...MD3DarkTheme,
+    ...DarkTheme,
+    colors: {
+      ...MD3DarkTheme.colors,
+      ...DarkTheme.colors,
+    },
+  };
+
+  const combinedTheme = isDarkMode ? CombinedDarkTheme : CombinedDefaultTheme;
+  const configuredFontTheme = {
+    ...combinedTheme,
+    fonts: configureFonts({
+      config: {
+        fontFamily: 'Abel',
+      },
+    }),
+  };
+
+  return (
+    <PaperProvider
+      settings={{ rippleEffectEnabled: preferences.rippleEffectEnabled }}
+      theme={customFontLoaded ? configuredFontTheme : theme}
+    >
+      <PreferencesContext.Provider value={preferences}>
+        <React.Fragment>
+          <NavigationContainer
+            theme={combinedTheme}
+            initialState={initialState}
+            onStateChange={(state) =>
+              AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state))
+            }
+          >
+            <SafeAreaInsetsContext.Consumer>
+              {(insets) => {
+                const { left, right } = insets || { left: 0, right: 0 };
+                const collapsedDrawerWidth = 80 + Math.max(left, right);
+                return (
+                  <Drawer.Navigator
+                    screenOptions={{
+                      drawerStyle: collapsed && {
+                        width: collapsedDrawerWidth,
+                      },
+                    }}
+                    drawerContent={() => <DrawerItems />}
+                  >
+                    <Drawer.Screen
+                      name="Home"
+                      component={App}
+                      options={{ headerShown: false }}
+                    />
+                  </Drawer.Navigator>
+                );
+              }}
+            </SafeAreaInsetsContext.Consumer>
+            <StatusBar style={!theme.isV3 || theme.dark ? 'light' : 'dark'} />
+          </NavigationContainer>
+        </React.Fragment>
+      </PreferencesContext.Provider>
+    </PaperProvider>
+  );
+}

package/Examples/SampleUI/src/index.tsx

@@ -0,0 +1,226 @@
+import * as React from 'react';
+
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import {
+  InitialState,
+  NavigationContainer,
+  DarkTheme as NavigationDarkTheme,
+  DefaultTheme as NavigationDefaultTheme,
+} from '@react-navigation/native';
+import { useFonts } from 'expo-font';
+import { useKeepAwake } from 'expo-keep-awake';
+import {
+  PaperProvider,
+  MD3DarkTheme,
+  MD3LightTheme,
+  MD2DarkTheme,
+  MD2LightTheme,
+  MD2Theme,
+  MD3Theme,
+  useTheme,
+  adaptNavigationTheme,
+  configureFonts,
+} from 'react-native-paper';
+import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
+
+import DrawerItems from './DrawerItems';
+import App from './RootNavigator';
+
+const PERSISTENCE_KEY = 'NAVIGATION_STATE';
+const PREFERENCES_KEY = 'APP_PREFERENCES';
+
+export const PreferencesContext = React.createContext<{
+  toggleTheme: () => void;
+  toggleThemeVersion: () => void;
+  toggleCollapsed: () => void;
+  toggleCustomFont: () => void;
+  toggleRippleEffect: () => void;
+  customFontLoaded: boolean;
+  rippleEffectEnabled: boolean;
+  collapsed: boolean;
+  theme: MD2Theme | MD3Theme;
+} | null>(null);
+
+export const useExampleTheme = () => useTheme<MD2Theme | MD3Theme>();
+
+const Drawer = createDrawerNavigator<{ Home: undefined }>();
+
+export default function PaperExample() {
+  useKeepAwake();
+
+  const [fontsLoaded] = useFonts({
+    Abel: require('../assets/fonts/Abel-Regular.ttf'),
+  });
+
+  const [isReady, setIsReady] = React.useState(false);
+  const [initialState, setInitialState] = React.useState<
+    InitialState | undefined
+  >();
+
+  const [isDarkMode, setIsDarkMode] = React.useState(false);
+  const [themeVersion, setThemeVersion] = React.useState<2 | 3>(3);
+  const [collapsed, setCollapsed] = React.useState(false);
+  const [customFontLoaded, setCustomFont] = React.useState(false);
+  const [rippleEffectEnabled, setRippleEffectEnabled] = React.useState(true);
+
+  const theme = React.useMemo(() => {
+    if (themeVersion === 2) {
+      return isDarkMode ? MD2DarkTheme : MD2LightTheme;
+    }
+
+    return isDarkMode ? MD3DarkTheme : MD3LightTheme;
+  }, [isDarkMode, themeVersion]);
+
+  React.useEffect(() => {
+    const restoreState = async () => {
+      try {
+        const savedStateString = await AsyncStorage.getItem(PERSISTENCE_KEY);
+        const state = JSON.parse(savedStateString || '');
+
+        setInitialState(state);
+      } catch (e) {
+        // ignore error
+      } finally {
+        setIsReady(true);
+      }
+    };
+
+    if (!isReady) {
+      restoreState();
+    }
+  }, [isReady]);
+
+  React.useEffect(() => {
+    const restorePrefs = async () => {
+      try {
+        const prefString = await AsyncStorage.getItem(PREFERENCES_KEY);
+        const preferences = JSON.parse(prefString || '');
+
+        if (preferences) {
+          setIsDarkMode(preferences.theme === 'dark');
+        }
+      } catch (e) {
+        // ignore error
+      }
+    };
+
+    restorePrefs();
+  }, []);
+
+  React.useEffect(() => {
+    const savePrefs = async () => {
+      try {
+        await AsyncStorage.setItem(
+          PREFERENCES_KEY,
+          JSON.stringify({
+            theme: isDarkMode ? 'dark' : 'light',
+          })
+        );
+      } catch (e) {
+        // ignore error
+      }
+    };
+
+    savePrefs();
+  }, [isDarkMode]);
+
+  const preferences = React.useMemo(
+    () => ({
+      toggleTheme: () => setIsDarkMode((oldValue) => !oldValue),
+      toggleCollapsed: () => setCollapsed(!collapsed),
+      toggleCustomFont: () => setCustomFont(!customFontLoaded),
+      toggleRippleEffect: () => setRippleEffectEnabled(!rippleEffectEnabled),
+      toggleThemeVersion: () => {
+        setCustomFont(false);
+        setCollapsed(false);
+        setThemeVersion((oldThemeVersion) => (oldThemeVersion === 2 ? 3 : 2));
+        setRippleEffectEnabled(true);
+      },
+      customFontLoaded,
+      rippleEffectEnabled,
+      collapsed,
+      theme,
+    }),
+    [theme, collapsed, customFontLoaded, rippleEffectEnabled]
+  );
+
+  if (!isReady && !fontsLoaded) {
+    return null;
+  }
+
+  const { LightTheme, DarkTheme } = adaptNavigationTheme({
+    reactNavigationLight: NavigationDefaultTheme,
+    reactNavigationDark: NavigationDarkTheme,
+  });
+
+  const CombinedDefaultTheme = {
+    ...MD3LightTheme,
+    ...LightTheme,
+    colors: {
+      ...MD3LightTheme.colors,
+      ...LightTheme.colors,
+    },
+  };
+
+  const CombinedDarkTheme = {
+    ...MD3DarkTheme,
+    ...DarkTheme,
+    colors: {
+      ...MD3DarkTheme.colors,
+      ...DarkTheme.colors,
+    },
+  };
+
+  const combinedTheme = isDarkMode ? CombinedDarkTheme : CombinedDefaultTheme;
+  const configuredFontTheme = {
+    ...combinedTheme,
+    fonts: configureFonts({
+      config: {
+        fontFamily: 'Abel',
+      },
+    }),
+  };
+
+  return (
+    <PaperProvider
+      settings={{ rippleEffectEnabled: preferences.rippleEffectEnabled }}
+      theme={customFontLoaded ? configuredFontTheme : theme}
+    >
+      <PreferencesContext.Provider value={preferences}>
+        <React.Fragment>
+          <NavigationContainer
+            theme={combinedTheme}
+            initialState={initialState}
+            onStateChange={(state) =>
+              AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state))
+            }
+          >
+            <SafeAreaInsetsContext.Consumer>
+              {(insets) => {
+                const { left, right } = insets || { left: 0, right: 0 };
+                const collapsedDrawerWidth = 80 + Math.max(left, right);
+                return (
+                  <Drawer.Navigator
+                    screenOptions={{
+                      drawerStyle: collapsed && {
+                        width: collapsedDrawerWidth,
+                      },
+                    }}
+                    drawerContent={() => <DrawerItems />}
+                  >
+                    <Drawer.Screen
+                      name="Home"
+                      component={App}
+                      options={{ headerShown: false }}
+                    />
+                  </Drawer.Navigator>
+                );
+              }}
+            </SafeAreaInsetsContext.Consumer>
+          </NavigationContainer>
+        </React.Fragment>
+      </PreferencesContext.Provider>
+    </PaperProvider>
+  );
+}

package/Examples/SampleUI/src/react-navigation/index.tsx

@@ -0,0 +1,19 @@
+/**
+ * Navigators
+ */
+export { default as createMaterialBottomTabNavigator } from './navigators/createMaterialBottomTabNavigator';
+
+/**
+ * Views
+ */
+export { default as MaterialBottomTabView } from './views/MaterialBottomTabView';
+
+/**
+ * Types
+ */
+export type {
+  MaterialBottomTabNavigationEventMap,
+  MaterialBottomTabNavigationOptions,
+  MaterialBottomTabNavigationProp,
+  MaterialBottomTabScreenProps,
+} from './types';