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

package/Examples/SampleUI/src/components/Typography/v2/Caption.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Text, TextStyle, StyleSheet, StyleProp } from 'react-native';
+
+import StyledText from './StyledText';
+
+export type Props = React.ComponentProps<typeof Text> & {
+  style?: StyleProp<TextStyle>;
+  children: React.ReactNode;
+};
+
+// @component-group Typography
+
+/**
+ * Typography component for showing a caption.
+ *
+ * <div class="screenshots">
+ *   <img src="screenshots/caption.png" />
+ * </div>
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Caption } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <Caption>Caption</Caption>
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ */
+const Caption = (props: Props) => (
+  <StyledText
+    {...props}
+    alpha={0.54}
+    family="regular"
+    style={[styles.text, props.style]}
+  />
+);
+
+export default Caption;
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 12,
+    lineHeight: 20,
+    marginVertical: 2,
+    letterSpacing: 0.4,
+  },
+});

package/Examples/SampleUI/src/components/Typography/v2/Headline.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Text, TextStyle, StyleSheet, StyleProp } from 'react-native';
+
+import StyledText from './StyledText';
+
+export type Props = React.ComponentProps<typeof Text> & {
+  style?: StyleProp<TextStyle>;
+  children: React.ReactNode;
+};
+
+// @component-group Typography
+
+/**
+ * Typography component for showing a headline.
+ *
+ * <div class="screenshots">
+ *   <img src="screenshots/headline.png" />
+ * </div>
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Headline } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <Headline>Headline</Headline>
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ */
+const Headline = (props: Props) => {
+  return (
+    <StyledText
+      {...props}
+      alpha={0.87}
+      family="regular"
+      style={[styles.text, props.style]}
+    />
+  );
+};
+
+export default Headline;
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 24,
+    lineHeight: 32,
+    marginVertical: 2,
+    letterSpacing: 0,
+  },
+});

package/Examples/SampleUI/src/components/Typography/v2/Paragraph.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { TextProps, StyleSheet } from 'react-native';
+
+import StyledText from './StyledText';
+
+export type Props = TextProps & {
+  children: React.ReactNode;
+};
+
+// @component-group Typography
+
+/**
+ * Typography component for showing a paragraph.
+ *
+ * <div class="screenshots">
+ *   <img src="screenshots/paragraph.png" />
+ * </div>
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Paragraph } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <Paragraph>Paragraph</Paragraph>
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ */
+const Paragraph = (props: Props) => (
+  <StyledText
+    {...props}
+    alpha={0.87}
+    family="regular"
+    style={[styles.text, props.style]}
+  />
+);
+
+export default Paragraph;
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 14,
+    lineHeight: 20,
+    marginVertical: 2,
+    letterSpacing: 0.25,
+  },
+});

package/Examples/SampleUI/src/components/Typography/v2/StyledText.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { I18nManager, StyleProp, StyleSheet, TextStyle } from 'react-native';
+
+import color from 'color';
+import type { ThemeProp } from 'src/types';
+
+import Text from './Text';
+import { useInternalTheme } from '../../../core/theming';
+
+type Props = React.ComponentProps<typeof Text> & {
+  alpha?: number;
+  family: 'regular' | 'medium' | 'light' | 'thin';
+  style?: StyleProp<TextStyle>;
+  theme?: ThemeProp;
+};
+
+const StyledText = ({
+  alpha = 1,
+  family,
+  style,
+  theme: themeOverrides,
+  ...rest
+}: Props) => {
+  const theme = useInternalTheme(themeOverrides);
+
+  const textColor = color(
+    theme.isV3 ? theme.colors.onSurface : theme.colors?.text
+  )
+    .alpha(alpha)
+    .rgb()
+    .string();
+  const writingDirection = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr';
+
+  return (
+    <Text
+      {...rest}
+      style={[
+        styles.text,
+        {
+          color: textColor,
+          ...(!theme.isV3 && theme.fonts?.[family]),
+          writingDirection,
+        },
+        style,
+      ]}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  text: {
+    textAlign: 'left',
+  },
+});
+
+export default StyledText;

package/Examples/SampleUI/src/components/Typography/v2/Subheading.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Text, TextStyle, StyleSheet, StyleProp } from 'react-native';
+
+import StyledText from './StyledText';
+
+export type Props = React.ComponentProps<typeof Text> & {
+  style?: StyleProp<TextStyle>;
+  children: React.ReactNode;
+};
+
+// @component-group Typography
+
+/**
+ * Typography component for showing a subheading.
+ *
+ * <div class="screenshots">
+ *   <img src="screenshots/subheading.png" />
+ * </div>
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Subheading } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <Subheading>Subheading</Subheading>
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ */
+const Subheading = (props: Props) => (
+  <StyledText
+    {...props}
+    alpha={0.87}
+    family="regular"
+    style={[styles.text, props.style]}
+  />
+);
+
+export default Subheading;
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 16,
+    lineHeight: 24,
+    marginVertical: 2,
+    letterSpacing: 0.5,
+  },
+});

package/Examples/SampleUI/src/components/Typography/v2/Text.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  Text as NativeText,
+  TextStyle,
+} from 'react-native';
+
+import type { MD2Theme } from 'src/types';
+
+import { useInternalTheme } from '../../../core/theming';
+import { forwardRef } from '../../../utils/forwardRef';
+
+type Props = React.ComponentProps<typeof NativeText> & {
+  style?: StyleProp<TextStyle>;
+  /**
+   * @optional
+   */
+  theme?: MD2Theme;
+};
+
+// @component-group Typography
+
+/**
+ * Text component which follows styles from the theme.
+ *
+ * @extends Text props https://reactnative.dev/docs/text#props
+ */
+const Text: React.ForwardRefRenderFunction<{}, Props> = (
+  { style, theme: overrideTheme, ...rest }: Props,
+  ref
+) => {
+  const root = React.useRef<NativeText | null>(null);
+  const theme = useInternalTheme(overrideTheme);
+
+  React.useImperativeHandle(ref, () => ({
+    setNativeProps: (args: Object) => root.current?.setNativeProps(args),
+  }));
+
+  return (
+    <NativeText
+      {...rest}
+      ref={root}
+      style={[
+        {
+          ...(!theme.isV3 && theme.fonts?.regular),
+          color: theme.isV3 ? theme.colors?.onSurface : theme.colors.text,
+        },
+        styles.text,
+        style,
+      ]}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  text: {
+    textAlign: 'left',
+  },
+});
+
+export default forwardRef(Text);

package/Examples/SampleUI/src/components/Typography/v2/Title.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Text, StyleSheet } from 'react-native';
+
+import StyledText from './StyledText';
+
+export type Props = React.ComponentProps<typeof Text> & {
+  children: React.ReactNode;
+};
+
+// @component-group Typography
+
+/**
+ * Typography component for showing a title.
+ *
+ * <div class="screenshots">
+ *   <img src="screenshots/title.png" />
+ * </div>
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Title } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <Title>Title</Title>
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ */
+const Title = (props: Props) => (
+  <StyledText
+    {...props}
+    alpha={0.87}
+    family="medium"
+    style={[styles.text, props.style]}
+  />
+);
+
+export default Title;
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 20,
+    lineHeight: 30,
+    marginVertical: 2,
+    letterSpacing: 0.15,
+  },
+});

package/Examples/SampleUI/src/components/Typography/v2/index.ts

@@ -0,0 +1,5 @@
+export { default as Caption } from './Caption';
+export { default as Headline } from './Headline';
+export { default as Paragraph } from './Paragraph';
+export { default as Subheading } from './Subheading';
+export { default as Title } from './Title';

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

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import {
+  AccessibilityInfo,
+  Appearance,
+  ColorSchemeName,
+  NativeEventSubscription,
+} from 'react-native';
+
+import SafeAreaProviderCompat from './SafeAreaProviderCompat';
+import { Provider as SettingsProvider, Settings } from './settings';
+import { defaultThemesByVersion, ThemeProvider } from './theming';
+import MaterialCommunityIcon from '../components/MaterialCommunityIcon';
+import PortalHost from '../components/Portal/PortalHost';
+import type { ThemeProp } from '../types';
+import { addEventListener } from '../utils/addEventListener';
+
+export type Props = {
+  children: React.ReactNode;
+  theme?: ThemeProp;
+  settings?: Settings;
+};
+
+const PaperProvider = (props: Props) => {
+  const isOnlyVersionInTheme =
+    props.theme && Object.keys(props.theme).length === 1 && props.theme.version;
+
+  const colorSchemeName =
+    ((!props.theme || isOnlyVersionInTheme) && Appearance?.getColorScheme()) ||
+    'light';
+
+  const [reduceMotionEnabled, setReduceMotionEnabled] =
+    React.useState<boolean>(false);
+  const [colorScheme, setColorScheme] =
+    React.useState<ColorSchemeName>(colorSchemeName);
+
+  const handleAppearanceChange = (
+    preferences: Appearance.AppearancePreferences
+  ) => {
+    const { colorScheme } = preferences;
+    setColorScheme(colorScheme);
+  };
+
+  React.useEffect(() => {
+    let subscription: NativeEventSubscription | undefined;
+
+    if (!props.theme) {
+      subscription = addEventListener(
+        AccessibilityInfo,
+        'reduceMotionChanged',
+        setReduceMotionEnabled
+      );
+    }
+    return () => {
+      if (!props.theme) {
+        subscription?.remove();
+      }
+    };
+  }, [props.theme]);
+
+  React.useEffect(() => {
+    let appearanceSubscription: NativeEventSubscription | undefined;
+    if (!props.theme || isOnlyVersionInTheme) {
+      appearanceSubscription = Appearance?.addChangeListener(
+        handleAppearanceChange
+      ) as NativeEventSubscription | undefined;
+    }
+    return () => {
+      if (!props.theme || isOnlyVersionInTheme) {
+        if (appearanceSubscription) {
+          appearanceSubscription.remove();
+        } else {
+          // @ts-expect-error: We keep deprecated listener remove method for backwards compat with old RN versions
+          Appearance?.removeChangeListener(handleAppearanceChange);
+        }
+      }
+    };
+  }, [props.theme, isOnlyVersionInTheme]);
+
+  const theme = React.useMemo(() => {
+    const themeVersion = props.theme?.version || 3;
+    const scheme = colorScheme || 'light';
+    const defaultThemeBase = defaultThemesByVersion[themeVersion][scheme];
+
+    const extendedThemeBase = {
+      ...defaultThemeBase,
+      ...props.theme,
+      version: themeVersion,
+      animation: {
+        ...props.theme?.animation,
+        scale: reduceMotionEnabled ? 0 : 1,
+      },
+    };
+
+    return {
+      ...extendedThemeBase,
+      isV3: extendedThemeBase.version === 3,
+    };
+  }, [colorScheme, props.theme, reduceMotionEnabled]);
+
+  const { children, settings } = props;
+
+  const settingsValue = React.useMemo(
+    () => ({
+      icon: MaterialCommunityIcon,
+      rippleEffectEnabled: true,
+      ...settings,
+    }),
+    [settings]
+  );
+
+  return (
+    <SafeAreaProviderCompat>
+      <PortalHost>
+        <SettingsProvider value={settingsValue}>
+          <ThemeProvider theme={theme}>{children}</ThemeProvider>
+        </SettingsProvider>
+      </PortalHost>
+    </SafeAreaProviderCompat>
+  );
+};
+
+export default PaperProvider;

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

@@ -0,0 +1,65 @@
+/**
+ * Ported from @react-navigation https://github.com/react-navigation/react-navigation/blob/main/packages/elements/src/SafeAreaProviderCompat.tsx
+ */
+import * as React from 'react';
+import {
+  Dimensions,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import {
+  initialWindowMetrics,
+  SafeAreaInsetsContext,
+  SafeAreaProvider,
+} from 'react-native-safe-area-context';
+
+type Props = {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+const { width = 0, height = 0 } = Dimensions.get('window');
+
+// To support SSR on web, we need to have empty insets for initial values
+// Otherwise there can be mismatch between SSR and client output
+// We also need to specify empty values to support tests environments
+const initialMetrics =
+  Platform.OS === 'web' || initialWindowMetrics == null
+    ? {
+        frame: { x: 0, y: 0, width, height },
+        insets: { top: 0, left: 0, right: 0, bottom: 0 },
+      }
+    : initialWindowMetrics;
+
+export default function SafeAreaProviderCompat({ children, style }: Props) {
+  return (
+    <SafeAreaInsetsContext.Consumer>
+      {(insets) => {
+        if (insets) {
+          // If we already have insets, don't wrap the stack in another safe area provider
+          // This avoids an issue with updates at the cost of potentially incorrect values
+          // https://github.com/react-navigation/react-navigation/issues/174
+          return <View style={[styles.container, style]}>{children}</View>;
+        }
+
+        return (
+          <SafeAreaProvider initialMetrics={initialMetrics} style={style}>
+            {children}
+          </SafeAreaProvider>
+        );
+      }}
+    </SafeAreaInsetsContext.Consumer>
+  );
+}
+
+SafeAreaProviderCompat.initialMetrics = initialMetrics;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import MaterialCommunityIcon, {
+  IconProps,
+} from '../components/MaterialCommunityIcon';
+
+export type Settings = {
+  icon?: ({
+    name,
+    color,
+    size,
+    direction,
+    testID,
+  }: IconProps) => React.ReactNode;
+  rippleEffectEnabled?: boolean;
+};
+
+export const SettingsContext = React.createContext<Settings>({
+  icon: MaterialCommunityIcon,
+  rippleEffectEnabled: true,
+});
+
+export const { Provider, Consumer } = SettingsContext;