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

package/Examples/SampleUI/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "SampleUI",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "android": "react-native run-android",
+    "ios": "cd ios && pod install && cd .. && react-native run-ios",
+    "lint": "eslint .",
+    "start": "react-native start",
+    "test": "jest"
+  },
+  "dependencies": {
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+    "@expo/vector-icons": "^14.1.0",
+    "@expo/webpack-config": "^19.0.1",
+    "@pchmn/expo-material3-theme": "^1.3.2",
+    "@react-native-async-storage/async-storage": "1.23.1",
+    "@react-native-masked-view/masked-view": "^0.3.2",
+    "@react-navigation/bottom-tabs": "^7.3.10",
+    "@react-navigation/drawer": "^7.3.9",
+    "@react-navigation/native": "^7.1.6",
+    "@react-navigation/stack": "^7.2.10",
+    "expo": "~52.0.0",
+    "expo-font": "^13.0.4",
+    "expo-status-bar": "^2.0.1",
+    "react": "18.3.1",
+    "react-native": "0.76.9",
+    "react-native-acoustic-connect-beta": "^18.0.7",
+    "react-native-gesture-handler": "~2.20.2",
+    "react-native-get-random-values": "^1.11.0",
+    "react-native-nitro-modules": "^0.25.2",
+    "react-native-paper": "^5.13.5",
+    "react-native-reanimated": "~3.16.1",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "~4.4.0",
+    "react-native-vector-icons": "^10.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/runtime": "^7.25.0",
+    "@react-native-community/cli": "15.0.1",
+    "@react-native-community/cli-platform-android": "15.0.1",
+    "@react-native-community/cli-platform-ios": "15.0.1",
+    "@react-native/babel-preset": "0.76.9",
+    "@react-native/eslint-config": "0.76.9",
+    "@react-native/metro-config": "0.76.9",
+    "@react-native/typescript-config": "0.76.9",
+    "@types/react": "^18.2.6",
+    "@types/react-test-renderer": "^18.0.0",
+    "babel-jest": "^29.6.3",
+    "babel-plugin-module-resolver": "^5.0.2",
+    "eslint": "^8.19.0",
+    "jest": "^29.6.3",
+    "prettier": "2.8.8",
+    "react-test-renderer": "18.3.1",
+    "typescript": "^5.3.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/Examples/SampleUI/src/DrawerItems.tsx

@@ -0,0 +1,322 @@
+import * as React from 'react';
+import { I18nManager, StyleSheet, View, Platform } from 'react-native';
+
+import { DrawerContentScrollView } from '@react-navigation/drawer';
+import Constants, { ExecutionEnvironment } from 'expo-constants';
+// import * as Updates from 'expo-updates';
+import {
+  Badge,
+  Button,
+  Dialog,
+  Drawer,
+  MD2Colors,
+  MD3Colors,
+  Switch,
+  Text,
+  TouchableRipple,
+  Portal,
+} from 'react-native-paper';
+
+import { deviceColorsSupported, isWeb } from '../utils';
+
+import { PreferencesContext, useExampleTheme } from './';
+
+const DrawerItemsData = [
+  {
+    label: 'Inbox',
+    icon: 'inbox',
+    key: 0,
+    right: () => <Text variant="labelLarge">44</Text>,
+  },
+  {
+    label: 'Starred',
+    icon: 'star',
+    key: 1,
+    right: ({ color }: { color: string }) => (
+      <Badge
+        visible
+        size={8}
+        style={[styles.badge, { backgroundColor: color }]}
+      />
+    ),
+  },
+  { label: 'Sent mail', icon: 'send', key: 2 },
+  { label: 'Colored label', icon: 'palette', key: 3 },
+  {
+    label: 'A very long title that will be truncated',
+    icon: 'delete',
+    key: 4,
+    right: () => <Badge visible size={8} style={styles.badge} />,
+  },
+];
+
+const DrawerCollapsedItemsData = [
+  {
+    label: 'Inbox',
+    focusedIcon: 'inbox',
+    unfocusedIcon: 'inbox-outline',
+    key: 0,
+    badge: 44,
+  },
+  {
+    label: 'Starred',
+    focusedIcon: 'star',
+    unfocusedIcon: 'star-outline',
+    key: 1,
+  },
+  {
+    label: 'Sent mail',
+    focusedIcon: 'send',
+    unfocusedIcon: 'send-outline',
+    key: 2,
+  },
+  {
+    label: 'A very long title that will be truncated',
+    focusedIcon: 'delete',
+    unfocusedIcon: 'delete-outline',
+    key: 3,
+  },
+  {
+    label: 'Full width',
+    focusedIcon: 'arrow-all',
+    key: 4,
+  },
+  {
+    focusedIcon: 'bell',
+    unfocusedIcon: 'bell-outline',
+    key: 5,
+    badge: true,
+  },
+];
+
+function DrawerItems() {
+  const [drawerItemIndex, setDrawerItemIndex] = React.useState<number>(0);
+  const [showRTLDialog, setShowRTLDialog] = React.useState(false);
+  const preferences = React.useContext(PreferencesContext);
+
+  const _setDrawerItem = (index: number) => setDrawerItemIndex(index);
+
+  const { isV3, colors } = useExampleTheme();
+  const isIOS = Platform.OS === 'ios';
+  const expoGoExecution =
+    Constants.executionEnvironment === ExecutionEnvironment.StoreClient;
+
+  if (!preferences) throw new Error('PreferencesContext not provided');
+
+  const {
+    toggleShouldUseDeviceColors,
+    toggleTheme,
+    toggleRtl: toggleRTL,
+    toggleThemeVersion,
+    toggleCollapsed,
+    toggleCustomFont,
+    toggleRippleEffect,
+    customFontLoaded,
+    rippleEffectEnabled,
+    collapsed,
+    rtl: isRTL,
+    theme: { dark: isDarkTheme },
+    shouldUseDeviceColors,
+  } = preferences;
+
+  const _handleToggleRTL = () => {
+    if (expoGoExecution) {
+      setShowRTLDialog(true);
+      return;
+    }
+
+    toggleRTL();
+    I18nManager.forceRTL(!isRTL);
+    if (isWeb) {
+      Updates.reloadAsync();
+    }
+  };
+
+  const _handleDismissRTLDialog = () => {
+    setShowRTLDialog(false);
+  };
+
+  const coloredLabelTheme = {
+    colors: isV3
+      ? {
+          secondaryContainer: MD3Colors.tertiary80,
+          onSecondaryContainer: MD3Colors.tertiary20,
+        }
+      : {
+          primary: MD2Colors.tealA200,
+        },
+  };
+
+  return (
+    <DrawerContentScrollView
+      alwaysBounceVertical={false}
+      style={[
+        styles.drawerContent,
+        {
+          backgroundColor: colors.surface,
+        },
+      ]}
+    >
+      {isV3 && collapsed && (
+        <Drawer.Section style={styles.collapsedSection}>
+          {DrawerCollapsedItemsData.map((props, index) => (
+            <Drawer.CollapsedItem
+              {...props}
+              key={props.key}
+              active={drawerItemIndex === index}
+              onPress={() => {
+                _setDrawerItem(index);
+                index === 4 && toggleCollapsed();
+              }}
+            />
+          ))}
+        </Drawer.Section>
+      )}
+      {!collapsed && (
+        <>
+          <Drawer.Section title="Example items">
+            {DrawerItemsData.map((props, index) => (
+              <Drawer.Item
+                {...props}
+                key={props.key}
+                theme={props.key === 3 ? coloredLabelTheme : undefined}
+                active={drawerItemIndex === index}
+                onPress={() => _setDrawerItem(index)}
+              />
+            ))}
+          </Drawer.Section>
+
+          <Drawer.Section title="Preferences">
+            {deviceColorsSupported && isV3 ? (
+              <TouchableRipple onPress={toggleShouldUseDeviceColors}>
+                <View style={[styles.preference, isV3 && styles.v3Preference]}>
+                  <Text variant="labelLarge">Use device colors *</Text>
+                  <View pointerEvents="none">
+                    <Switch value={shouldUseDeviceColors} />
+                  </View>
+                </View>
+              </TouchableRipple>
+            ) : null}
+            <TouchableRipple onPress={toggleTheme}>
+              <View style={[styles.preference, isV3 && styles.v3Preference]}>
+                <Text variant="labelLarge">Dark Theme</Text>
+                <View pointerEvents="none">
+                  <Switch value={isDarkTheme} />
+                </View>
+              </View>
+            </TouchableRipple>
+
+            {!isWeb && (
+              <TouchableRipple onPress={_handleToggleRTL}>
+                <View style={[styles.preference, isV3 && styles.v3Preference]}>
+                  <Text variant="labelLarge">RTL</Text>
+                  <View pointerEvents="none">
+                    <Switch value={isRTL} />
+                  </View>
+                </View>
+              </TouchableRipple>
+            )}
+
+            <TouchableRipple onPress={toggleThemeVersion}>
+              <View style={[styles.preference, isV3 && styles.v3Preference]}>
+                <Text variant="labelLarge">MD 2</Text>
+                <View pointerEvents="none">
+                  <Switch value={!isV3} />
+                </View>
+              </View>
+            </TouchableRipple>
+
+            {isV3 && (
+              <TouchableRipple onPress={toggleCollapsed}>
+                <View style={[styles.preference, isV3 && styles.v3Preference]}>
+                  <Text variant="labelLarge">Collapsed drawer *</Text>
+                  <View pointerEvents="none">
+                    <Switch value={collapsed} />
+                  </View>
+                </View>
+              </TouchableRipple>
+            )}
+
+            {isV3 && (
+              <TouchableRipple onPress={toggleCustomFont}>
+                <View style={[styles.preference, isV3 && styles.v3Preference]}>
+                  <Text variant="labelLarge">Custom font *</Text>
+                  <View pointerEvents="none">
+                    <Switch value={customFontLoaded} />
+                  </View>
+                </View>
+              </TouchableRipple>
+            )}
+
+            <TouchableRipple onPress={toggleRippleEffect}>
+              <View style={[styles.preference, isV3 && styles.v3Preference]}>
+                <Text variant="labelLarge">
+                  {isIOS ? 'Highlight' : 'Ripple'} effect *
+                </Text>
+                <View pointerEvents="none">
+                  <Switch value={rippleEffectEnabled} />
+                </View>
+              </View>
+            </TouchableRipple>
+          </Drawer.Section>
+          {isV3 && !collapsed && (
+            <Text variant="bodySmall" style={styles.annotation}>
+              * - available only for MD3
+            </Text>
+          )}
+          <Text variant="bodySmall" style={styles.annotation}>
+            React Native Paper Version{' '}
+            {require('react-native-paper/package.json').version}
+          </Text>
+        </>
+      )}
+      <Portal>
+        <Dialog visible={showRTLDialog} onDismiss={_handleDismissRTLDialog}>
+          <Dialog.Title>Changing to RTL</Dialog.Title>
+          <Dialog.Content>
+            <Text variant="bodyMedium">
+              Due to Expo Go limitations it is impossible to change RTL
+              dynamically. To do so, you need to create a development build of
+              Example app or change it statically by setting{' '}
+              <Text variant="labelMedium">forcesRTL</Text> property to true in{' '}
+              <Text variant="labelMedium">app.json</Text> within{' '}
+              <Text variant="labelMedium">example</Text> directory.
+            </Text>
+            <Dialog.Actions>
+              <Button onPress={_handleDismissRTLDialog}>Ok</Button>
+            </Dialog.Actions>
+          </Dialog.Content>
+        </Dialog>
+      </Portal>
+    </DrawerContentScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  drawerContent: {
+    flex: 1,
+  },
+  preference: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+  },
+  v3Preference: {
+    height: 56,
+    paddingHorizontal: 28,
+  },
+  badge: {
+    alignSelf: 'center',
+  },
+  collapsedSection: {
+    marginTop: 16,
+  },
+  annotation: {
+    marginHorizontal: 24,
+    marginVertical: 6,
+  },
+});
+
+export default DrawerItems;

package/Examples/SampleUI/src/ExampleList.tsx

@@ -0,0 +1,175 @@
+import * as React from 'react';
+import { FlatList } from 'react-native';
+
+import type { StackNavigationProp } from '@react-navigation/stack';
+import { Divider, List } from 'react-native-paper';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import ActivityIndicatorExample from './Examples/ActivityIndicatorExample';
+import AnimatedFABExample from './Examples/AnimatedFABExample';
+import AppbarExample from './Examples/AppbarExample';
+import AvatarExample from './Examples/AvatarExample';
+import BadgeExample from './Examples/BadgeExample';
+import BannerExample from './Examples/BannerExample';
+import BottomNavigationBarExample from './Examples/BottomNavigationBarExample';
+import BottomNavigationExample from './Examples/BottomNavigationExample';
+import ButtonExample from './Examples/ButtonExample';
+import CardExample from './Examples/CardExample';
+import CheckboxExample from './Examples/CheckboxExample';
+import CheckboxItemExample from './Examples/CheckboxItemExample';
+import ChipExample from './Examples/ChipExample';
+import DataTableExample from './Examples/DataTableExample';
+import DialogExample from './Examples/DialogExample';
+import DividerExample from './Examples/DividerExample';
+import FABExample from './Examples/FABExample';
+import IconButtonExample from './Examples/IconButtonExample';
+import IconExample from './Examples/IconExample';
+import ListAccordionExample from './Examples/ListAccordionExample';
+import ListAccordionExampleGroup from './Examples/ListAccordionGroupExample';
+import ListItemExample from './Examples/ListItemExample';
+import ListSectionExample from './Examples/ListSectionExample';
+import MaterialBottomTabNavigatorExample from './Examples/MaterialBottomTabNavigatorExample';
+import MenuExample from './Examples/MenuExample';
+import ProgressBarExample from './Examples/ProgressBarExample';
+import RadioButtonExample from './Examples/RadioButtonExample';
+import RadioButtonGroupExample from './Examples/RadioButtonGroupExample';
+import RadioButtonItemExample from './Examples/RadioButtonItemExample';
+import SearchbarExample from './Examples/SearchbarExample';
+import SegmentedButtonMultiselectRealCase from './Examples/SegmentedButtons/SegmentedButtonMultiselectRealCase';
+import SegmentedButtonRealCase from './Examples/SegmentedButtons/SegmentedButtonRealCase';
+import SegmentedButtonExample from './Examples/SegmentedButtonsExample';
+import SnackbarExample from './Examples/SnackbarExample';
+import SurfaceExample from './Examples/SurfaceExample';
+import SwitchExample from './Examples/SwitchExample';
+import TeamDetails from './Examples/TeamDetails';
+import TeamsList from './Examples/TeamsList';
+import TextExample from './Examples/TextExample';
+import TextInputExample from './Examples/TextInputExample';
+import ThemeExample from './Examples/ThemeExample';
+import ThemingWithReactNavigation from './Examples/ThemingWithReactNavigation';
+import ToggleButtonExample from './Examples/ToggleButtonExample';
+import TooltipExample from './Examples/TooltipExample';
+import TouchableRippleExample from './Examples/TouchableRippleExample';
+
+import { useExampleTheme } from '.';
+
+export const mainExamples: Record<
+  string,
+  React.ComponentType<any> & { title: string }
+> = {
+  animatedFab: AnimatedFABExample,
+  activityIndicator: ActivityIndicatorExample,
+  appbar: AppbarExample,
+  avatar: AvatarExample,
+  badge: BadgeExample,
+  banner: BannerExample,
+  bottomNavigationBarExample: BottomNavigationBarExample,
+  bottomNavigation: BottomNavigationExample,
+  button: ButtonExample,
+  card: CardExample,
+  checkbox: CheckboxExample,
+  checkboxItem: CheckboxItemExample,
+  chip: ChipExample,
+  dataTable: DataTableExample,
+  dialog: DialogExample,
+  divider: DividerExample,
+  fab: FABExample,
+  iconButton: IconButtonExample,
+  icon: IconExample,
+  listAccordion: ListAccordionExample,
+  listAccordionGroup: ListAccordionExampleGroup,
+  listSection: ListSectionExample,
+  listItem: ListItemExample,
+  materialBottomTabNavigator: MaterialBottomTabNavigatorExample,
+  menu: MenuExample,
+  progressbar: ProgressBarExample,
+  radio: RadioButtonExample,
+  radioGroup: RadioButtonGroupExample,
+  radioItem: RadioButtonItemExample,
+  searchbar: SearchbarExample,
+  segmentedButton: SegmentedButtonExample,
+  snackbar: SnackbarExample,
+  surface: SurfaceExample,
+  switch: SwitchExample,
+  text: TextExample,
+  textInput: TextInputExample,
+  toggleButton: ToggleButtonExample,
+  tooltipExample: TooltipExample,
+  touchableRipple: TouchableRippleExample,
+  theme: ThemeExample,
+  themingWithReactNavigation: ThemingWithReactNavigation,
+};
+
+export const nestedExamples: Record<
+  string,
+  React.ComponentType<any> & { title: string }
+> = {
+  themingWithReactNavigation: ThemingWithReactNavigation,
+  teamDetails: TeamDetails,
+  teamsList: TeamsList,
+  segmentedButtonRealCase: SegmentedButtonRealCase,
+  segmentedButtonMultiselectRealCase: SegmentedButtonMultiselectRealCase,
+};
+
+export const examples: Record<
+  string,
+  React.ComponentType<any> & { title: string }
+> = {
+  ...mainExamples,
+  ...nestedExamples,
+};
+
+type Props = {
+  navigation: StackNavigationProp<{ [key: string]: undefined }>;
+};
+
+type Item = {
+  id: string;
+  data: (typeof mainExamples)[string];
+};
+
+const data = Object.keys(mainExamples).map(
+  (id): Item => ({ id, data: mainExamples[id] })
+);
+
+export default function ExampleList({ navigation }: Props) {
+  const keyExtractor = (item: { id: string }) => item.id;
+
+  const { colors, isV3 } = useExampleTheme();
+  const safeArea = useSafeAreaInsets();
+
+  const renderItem = ({ item }: { item: Item }) => {
+    const { data, id } = item;
+
+    if (!isV3 && data.title === mainExamples.themingWithReactNavigation.title) {
+      return null;
+    }
+
+    return (
+      <List.Item
+        unstable_pressDelay={65}
+        title={data.title}
+        onPress={() => navigation.navigate(id)}
+      />
+    );
+  };
+
+  return (
+    <FlatList
+      contentContainerStyle={{
+        backgroundColor: colors.background,
+        paddingBottom: safeArea.bottom,
+        paddingLeft: safeArea.left,
+        paddingRight: safeArea.right,
+      }}
+      style={{
+        backgroundColor: colors.background,
+      }}
+      showsVerticalScrollIndicator={false}
+      ItemSeparatorComponent={Divider}
+      renderItem={renderItem}
+      keyExtractor={keyExtractor}
+      data={data}
+    />
+  );
+}

package/Examples/SampleUI/src/Examples/ActivityIndicatorExample.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import {
+  ActivityIndicator,
+  FAB,
+  List,
+  MD2Colors,
+  MD3Colors,
+} from 'react-native-paper';
+
+import { useExampleTheme } from '..';
+import ScreenWrapper from '../ScreenWrapper';
+
+const ActivityIndicatorExample = () => {
+  const [animating, setAnimating] = React.useState<boolean>(true);
+  const { isV3 } = useExampleTheme();
+
+  return (
+    <ScreenWrapper style={styles.container}>
+      <View style={styles.row}>
+        <FAB
+          size="small"
+          icon={animating ? 'pause' : 'play'}
+          onPress={() => setAnimating(!animating)}
+        />
+      </View>
+
+      <List.Section title="Default">
+        <ActivityIndicator animating={animating} hidesWhenStopped={false} />
+      </List.Section>
+
+      <List.Section title="Large">
+        <ActivityIndicator
+          animating={animating}
+          size="large"
+          hidesWhenStopped={false}
+        />
+      </List.Section>
+
+      <List.Section title="Custom size">
+        <ActivityIndicator
+          animating={animating}
+          size={100}
+          hidesWhenStopped={false}
+        />
+      </List.Section>
+
+      <List.Section title="Custom color">
+        <ActivityIndicator
+          animating={animating}
+          color={isV3 ? MD3Colors.error20 : MD2Colors.red500}
+          hidesWhenStopped={false}
+        />
+      </List.Section>
+    </ScreenWrapper>
+  );
+};
+
+ActivityIndicatorExample.title = 'Activity Indicator';
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 4,
+  },
+  row: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: 10,
+  },
+});
+
+export default ActivityIndicatorExample;