react-native-acoustic-connect-beta 19.0.26 → 19.0.28

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

@@ -1,170 +0,0 @@
-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

@@ -1,285 +0,0 @@
-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 {
-  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';
-
-import * as AcousticConnectBeta from 'react-native-acoustic-connect-beta';
-console.log('index.native.tsx:Exported items from react-native-acoustic-connect-beta:', AcousticConnectBeta);
-import { NavigationContainerRef } from '@react-navigation/native';
-import { useRef } from 'react';
-
-
-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();
-
-  // Add for  Acoustic Connect SDK
-  const navigationRef = useRef<NavigationContainerRef<any>>(null);
-
-  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(); // Removed as expo-updates is not available
-      }
-    };
-
-    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>
-          <AcousticConnectBeta.Connect
-            captureKeyboardEvents={true}
-            captureDialogEvents={true}
-  >
-            <NavigationContainer
-              ref={navigationRef} // Pass the ref to NavigationContainer
-              theme={combinedTheme}
-              initialState={initialState}
-              onStateChange={(state) =>
-                AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state))
-              }
-              onReady={() => console.log('NavigationContainer is ready!')}
-            >
-              <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>
-          </AcousticConnectBeta.Connect>
-        </React.Fragment>
-      </PreferencesContext.Provider>
-    </PaperProvider>
-  );
-}

package/Examples/SampleUI/src/index.tsx

@@ -1,226 +0,0 @@
-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

@@ -1,19 +0,0 @@
-/**
- * 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';