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

package/Examples/SampleUI/src/Examples/ThemeExample.tsx

@@ -1,41 +0,0 @@
-import * as React from 'react';
-import { StyleSheet } from 'react-native';
-
-import type { StackNavigationProp } from '@react-navigation/stack';
-import { List, PaperProvider, Banner } from 'react-native-paper';
-
-import ScreenWrapper from '../ScreenWrapper';
-
-type Props = {
-  navigation: StackNavigationProp<{ [key: string]: undefined }>;
-};
-
-const ThemeExample = ({ navigation }: Props) => {
-  return (
-    <PaperProvider>
-      <ScreenWrapper contentContainerStyle={styles.container}>
-        <Banner visible>
-          React Native Paper automatically adapts theme based on system
-          preferences. Please change system theme to dark/light to see the
-          effect
-        </Banner>
-        <List.Section title={`Theme based on the source color`}>
-          <List.Item
-            title="Themed Sport App"
-            description="Go to the example"
-            onPress={() => navigation.navigate('teamsList')}
-            right={(props) => <List.Icon {...props} icon="arrow-right" />}
-          />
-        </List.Section>
-      </ScreenWrapper>
-    </PaperProvider>
-  );
-};
-ThemeExample.title = 'Theme';
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});
-export default ThemeExample;

package/Examples/SampleUI/src/Examples/ThemingWithReactNavigation.tsx

@@ -1,75 +0,0 @@
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
-
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { createStackNavigator } from '@react-navigation/stack';
-import { Text } from 'react-native-paper';
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-
-const Stack = createStackNavigator();
-const Tab = createBottomTabNavigator();
-
-function HomeScreen() {
-  return (
-    <View style={styles.container}>
-      <Text variant="headlineMedium">Home!</Text>
-    </View>
-  );
-}
-
-function SettingsScreen() {
-  return (
-    <View style={styles.container}>
-      <Text variant="headlineMedium">Settings!</Text>
-    </View>
-  );
-}
-
-const HomeTab = () => {
-  return (
-    <Tab.Navigator
-      screenOptions={{
-        headerShown: false,
-      }}
-    >
-      <Tab.Screen
-        name="Home"
-        component={HomeScreen}
-        options={{
-          tabBarIcon: ({ color, size }) => {
-            return <Icon name="home" size={size} color={color} />;
-          },
-        }}
-      />
-      <Tab.Screen
-        name="Settings"
-        component={SettingsScreen}
-        options={{
-          tabBarIcon: ({ color, size }) => {
-            return <Icon name="cog" size={size} color={color} />;
-          },
-        }}
-      />
-    </Tab.Navigator>
-  );
-};
-
-function ThemingWithReactNavigation() {
-  return (
-    <Stack.Navigator initialRouteName="Home">
-      <Stack.Screen name="React Navigation" component={HomeTab} />
-    </Stack.Navigator>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-ThemingWithReactNavigation.title = 'Theming With React Navigation';
-
-export default ThemingWithReactNavigation;

package/Examples/SampleUI/src/Examples/ToggleButtonExample.tsx

@@ -1,128 +0,0 @@
-import * as React from 'react';
-import { View, StyleSheet, ImageBackground } from 'react-native';
-
-import { ToggleButton, List } from 'react-native-paper';
-
-import ScreenWrapper from '../ScreenWrapper';
-
-type StatusState = 'checked' | 'unchecked';
-type Fruits = 'watermelon' | 'strawberries';
-
-enum FontsEnum {
-  NoFormat = 'no-format',
-  Italic = 'italic',
-  Bold = 'bold',
-  Underline = 'underlined',
-  ColorText = 'format-color',
-}
-
-const ToggleButtonExample = () => {
-  const [first, setFirst] = React.useState('bold');
-  const [fruit, setFruit] = React.useState<Fruits>('watermelon');
-  const [status, setStatus] = React.useState<StatusState>('checked');
-  const [font, setFont] = React.useState<FontsEnum>(FontsEnum.NoFormat);
-
-  const handleFruit = (value: Fruits) => setFruit(value);
-
-  return (
-    <ScreenWrapper>
-      <List.Section title="Single">
-        <View style={styles.padding}>
-          <ToggleButton
-            icon="android"
-            value="android"
-            status={status}
-            onPress={() =>
-              setStatus(status === 'checked' ? 'unchecked' : 'checked')
-            }
-          />
-        </View>
-      </List.Section>
-      <List.Section title="Row">
-        <ToggleButton.Row
-          value={first}
-          onValueChange={(value: string) => setFirst(value)}
-          style={styles.padding}
-        >
-          <ToggleButton disabled icon="format-italic" value="italic" />
-          <ToggleButton icon="format-bold" value="bold" />
-          <ToggleButton icon="format-underline" value="underlined" />
-          <ToggleButton icon="format-color-text" value="format-color" />
-        </ToggleButton.Row>
-      </List.Section>
-      <List.Section title="Group & enums">
-        <View style={styles.padding}>
-          <ToggleButton.Group value={font} onValueChange={setFont}>
-            <ToggleButton
-              disabled
-              icon="format-italic"
-              value={FontsEnum.Italic}
-            />
-            <ToggleButton icon="format-bold" value={FontsEnum.Bold} />
-            <ToggleButton icon="format-underline" value={FontsEnum.Underline} />
-            <ToggleButton
-              icon="format-color-text"
-              value={FontsEnum.ColorText}
-            />
-          </ToggleButton.Group>
-        </View>
-      </List.Section>
-      <List.Section title="Custom & union types">
-        <View style={[styles.padding, styles.row]}>
-          <ToggleButton.Group value={fruit} onValueChange={handleFruit}>
-            <ImageBackground
-              style={styles.customImage}
-              source={{
-                uri: 'https://images.pexels.com/photos/5946081/pexels-photo-5946081.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
-              }}
-            >
-              <ToggleButton
-                value="watermelon"
-                size={24}
-                style={styles.customButton}
-                iconColor="white"
-                icon={fruit === 'watermelon' ? 'heart' : 'heart-outline'}
-              />
-            </ImageBackground>
-            <ImageBackground
-              style={styles.customImage}
-              source={{
-                uri: 'https://images.pexels.com/photos/46174/strawberries-berries-fruit-freshness-46174.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
-              }}
-            >
-              <ToggleButton
-                value="strawberries"
-                size={24}
-                style={styles.customButton}
-                iconColor="white"
-                icon={fruit === 'strawberries' ? 'heart' : 'heart-outline'}
-              />
-            </ImageBackground>
-          </ToggleButton.Group>
-        </View>
-      </List.Section>
-    </ScreenWrapper>
-  );
-};
-
-ToggleButtonExample.title = 'Toggle Button';
-
-const styles = StyleSheet.create({
-  padding: {
-    paddingHorizontal: 16,
-  },
-  row: {
-    flexDirection: 'row',
-  },
-  customImage: {
-    width: 143,
-    height: 153,
-    margin: 2,
-  },
-  customButton: {
-    position: 'absolute',
-    right: 0,
-  },
-});
-
-export default ToggleButtonExample;

package/Examples/SampleUI/src/Examples/TooltipExample.tsx

@@ -1,191 +0,0 @@
-import * as React from 'react';
-import { Platform, StyleSheet, View, Image } from 'react-native';
-
-import type { StackNavigationProp } from '@react-navigation/stack';
-import {
-  Appbar,
-  Avatar,
-  Banner,
-  Chip,
-  FAB,
-  IconButton,
-  List,
-  ToggleButton,
-  Tooltip,
-  Card,
-} from 'react-native-paper';
-
-import { isWeb } from '../../utils';
-import ScreenWrapper from '../ScreenWrapper';
-
-type Props = {
-  navigation: StackNavigationProp<{}>;
-};
-
-const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';
-
-const DURATION_MEDIUM = 1500;
-const DURATION_LONG = 3000;
-
-const formOfTransport = [
-  { title: 'Car - default delays' },
-  { title: 'Airplane - default delays' },
-  { title: 'Taxi - long enter delay', enterTouchDelay: DURATION_MEDIUM },
-  { title: 'Train - long enter delay', enterTouchDelay: DURATION_MEDIUM },
-  { title: 'Ferry - long leave delay', leaveTouchDelay: DURATION_MEDIUM },
-  { title: 'Bus - long leave delay', leaveTouchDelay: DURATION_MEDIUM },
-  {
-    title: 'Walk - long both delays',
-    enterTouchDelay: DURATION_MEDIUM,
-    leaveTouchDelay: DURATION_LONG,
-  },
-];
-
-const TooltipExample = ({ navigation }: Props) => {
-  const [textAlign, setTextAlign] = React.useState('bold');
-  React.useLayoutEffect(() => {
-    navigation.setOptions({
-      header: () => (
-        <Appbar.Header elevated>
-          <Tooltip title="Go back">
-            <Appbar.BackAction onPress={() => navigation.goBack()} />
-          </Tooltip>
-          <Appbar.Content title="Tooltips" />
-          <Tooltip title="Print ⌘ + P">
-            <Appbar.Action icon="printer" onPress={() => {}} />
-          </Tooltip>
-          <Tooltip title="Search">
-            <Appbar.Action icon="magnify" onPress={() => {}} />
-          </Tooltip>
-          <Tooltip title="More options">
-            <Appbar.Action icon={MORE_ICON} onPress={() => {}} />
-          </Tooltip>
-        </Appbar.Header>
-      ),
-    });
-  });
-
-  return (
-    <>
-      <ScreenWrapper>
-        <Banner visible>
-          A tooltip is displayed upon
-          {!isWeb
-            ? ' tapping and holding a screen element or component'
-            : ' hovering over a screen element or component'}
-          . Continuously display the tooltip as long as the user long-presses or
-          hovers over the element.
-        </Banner>
-        <List.Section title="Icon Buttons">
-          <View style={styles.iconButtonContainer}>
-            {formOfTransport.map((transport, index) => (
-              <Tooltip
-                key={index}
-                title={transport.title}
-                enterTouchDelay={transport.enterTouchDelay}
-                leaveTouchDelay={transport.leaveTouchDelay}
-              >
-                <IconButton
-                  icon={transport.title.split(' ')[0].toLowerCase()}
-                  size={24}
-                  onPress={() => {}}
-                />
-              </Tooltip>
-            ))}
-          </View>
-        </List.Section>
-        <List.Section title="Toggle Buttons">
-          <ToggleButton.Row
-            value={textAlign}
-            style={styles.toggleButtonRow}
-            onValueChange={setTextAlign}
-          >
-            <Tooltip title="Align left">
-              <ToggleButton icon="format-align-left" value="left" />
-            </Tooltip>
-            <Tooltip title="Align center">
-              <ToggleButton icon="format-align-center" value="center" />
-            </Tooltip>
-            <Tooltip title="Align right">
-              <ToggleButton icon="format-align-right" value="right" disabled />
-            </Tooltip>
-          </ToggleButton.Row>
-        </List.Section>
-        <List.Section title="Avatar">
-          <View style={styles.avatarContainer}>
-            <Tooltip title="Username">
-              <Avatar.Text label="U" />
-            </Tooltip>
-          </View>
-        </List.Section>
-        <List.Section title="Chip">
-          <View style={styles.chipContainer}>
-            <Tooltip title="Copied">
-              <Chip
-                mode="outlined"
-                avatar={
-                  <Image
-                    source={require('../../assets/images/avatar.png')}
-                    accessibilityIgnoresInvertColors
-                  />
-                }
-              >
-                John Doe
-              </Chip>
-            </Tooltip>
-          </View>
-        </List.Section>
-        <List.Section title="Card">
-          <Tooltip title="Cafeteria, 1st floor">
-            <Card style={styles.cardContainer}>
-              <Card.Title
-                title="Lunch break"
-                subtitle="1:00-2:00 PM"
-                left={(props) => (
-                  <Avatar.Icon {...props} icon="food-fork-drink" />
-                )}
-              />
-            </Card>
-          </Tooltip>
-        </List.Section>
-      </ScreenWrapper>
-      <View style={styles.fabContainer}>
-        <Tooltip title="Press Me">
-          <FAB size="medium" icon="plus" onPress={() => {}} />
-        </Tooltip>
-      </View>
-    </>
-  );
-};
-
-TooltipExample.title = 'Tooltip';
-
-export default TooltipExample;
-
-const styles = StyleSheet.create({
-  avatarContainer: {
-    marginHorizontal: 16,
-    width: 64,
-  },
-  chipContainer: {
-    marginHorizontal: 16,
-    alignItems: 'center',
-    flexDirection: 'row',
-  },
-  fabContainer: {
-    margin: 16,
-    right: 0,
-    position: 'absolute',
-    bottom: 0,
-  },
-  cardContainer: {
-    margin: 16,
-  },
-  toggleButtonRow: {
-    paddingHorizontal: 16,
-  },
-  iconButtonContainer: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-});

package/Examples/SampleUI/src/Examples/TouchableRippleExample.tsx

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
-
-import { Text, TouchableRipple } from 'react-native-paper';
-
-import ScreenWrapper from '../ScreenWrapper';
-
-const RippleExample = () => {
-  return (
-    <ScreenWrapper contentContainerStyle={styles.container}>
-      <TouchableRipple
-        style={styles.ripple}
-        onPress={() => {}}
-        rippleColor="rgba(0, 0, 0, .32)"
-      >
-        <View pointerEvents="none">
-          <Text variant="bodyMedium">Press anywhere</Text>
-        </View>
-      </TouchableRipple>
-    </ScreenWrapper>
-  );
-};
-
-RippleExample.title = 'TouchableRipple';
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  ripple: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export default RippleExample;

package/Examples/SampleUI/src/RootNavigator.tsx

@@ -1,95 +0,0 @@
-import * as React from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
-
-import type { DrawerNavigationProp } from '@react-navigation/drawer';
-import { getHeaderTitle } from '@react-navigation/elements';
-import {
-  CardStyleInterpolators,
-  createStackNavigator,
-} from '@react-navigation/stack';
-import { Appbar } from 'react-native-paper';
-
-import ExampleList, { examples } from './ExampleList';
-
-// import { AcousticConnectRN, Connect } from 'react-native-acoustic-connect-beta';
-// Log all exported items from the module
-import AcousticConnectRN from 'react-native-acoustic-connect-beta';
-import * as AcousticConnectBeta from 'react-native-acoustic-connect-beta';
-console.log('RootNavigator.tsx:Exported items from react-native-acoustic-connect-beta:', AcousticConnectBeta);
-
-const result = AcousticConnectRN.logCustomEvent('test', {test: 'test'}, 1); 
-console.log('result', result);
-
-const Stack = createStackNavigator();
-
-export default function Root() {
-  const cardStyleInterpolator =
-    Platform.OS === 'android'
-      ? CardStyleInterpolators.forFadeFromBottomAndroid
-      : CardStyleInterpolators.forHorizontalIOS;
-  return (
-    <View style={styles.stackWrapper}>
-      <Stack.Navigator
-        screenOptions={({ navigation }) => {
-          return {
-            detachPreviousScreen: !navigation.isFocused(),
-            cardStyleInterpolator,
-            header: ({ navigation, route, options, back }) => {
-              const title = getHeaderTitle(options, route.name);
-              return (
-                <Appbar.Header elevated>
-                  {back ? (
-                    <Appbar.BackAction onPress={() => navigation.goBack()} />
-                  ) : (navigation as any).openDrawer ? (
-                    <Appbar.Action
-                      icon="menu"
-                      isLeading
-                      onPress={() =>
-                        (
-                          navigation as any as DrawerNavigationProp<{}>
-                        ).openDrawer()
-                      }
-                    />
-                  ) : null}
-                  <Appbar.Content title={title} />
-                </Appbar.Header>
-              );
-            },
-          };
-        }}
-      >
-        <Stack.Screen
-          name="ExampleList"
-          component={ExampleList}
-          options={{
-            title: 'Examples: Acoustic Connect',
-          }}
-        />
-        {(Object.keys(examples) as Array<keyof typeof examples>).map((id) => {
-          return (
-            <Stack.Screen
-              key={id}
-              name={id}
-              component={examples[id]}
-              options={{
-                title: examples[id].title,
-                headerShown: id !== 'themingWithReactNavigation',
-              }}
-            />
-          );
-        })}
-      </Stack.Navigator>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  stackWrapper: {
-    flex: 1,
-    ...Platform.select({
-      web: {
-        overflow: 'scroll',
-      },
-    }),
-  },
-});

package/Examples/SampleUI/src/ScreenWrapper.tsx

@@ -1,67 +0,0 @@
-import * as React from 'react';
-import {
-  ScrollView,
-  ScrollViewProps,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-import { useExampleTheme } from '.';
-
-type Props = ScrollViewProps & {
-  children: React.ReactNode;
-  withScrollView?: boolean;
-  style?: StyleProp<ViewStyle>;
-  contentContainerStyle?: StyleProp<ViewStyle>;
-};
-
-export default function ScreenWrapper({
-  children,
-  withScrollView = true,
-  style,
-  contentContainerStyle,
-  ...rest
-}: Props) {
-  const theme = useExampleTheme();
-
-  const insets = useSafeAreaInsets();
-
-  const containerStyle = [
-    styles.container,
-    {
-      backgroundColor: theme.colors.background,
-      paddingBottom: insets.bottom,
-      paddingLeft: insets.left,
-      paddingRight: insets.left,
-    },
-  ];
-
-  return (
-    <>
-      {withScrollView ? (
-        <ScrollView
-          {...rest}
-          contentContainerStyle={contentContainerStyle}
-          keyboardShouldPersistTaps="always"
-          alwaysBounceVertical={false}
-          showsVerticalScrollIndicator={false}
-          style={[containerStyle, style]}
-        >
-          {children}
-        </ScrollView>
-      ) : (
-        <View style={[containerStyle, style]}>{children}</View>
-      )}
-    </>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});