react-native-acoustic-connect 19.0.11 → 19.0.28

package/Examples/SampleUI/src/Examples/AvatarExample.tsx

@@ -1,76 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
-
-import { Avatar, List, MD2Colors, MD3Colors } from 'react-native-paper';
-
-import { useExampleTheme } from '..';
-import ScreenWrapper from '../ScreenWrapper';
-
-const AvatarExample = () => {
-  const { isV3 } = useExampleTheme();
-  return (
-    <ScreenWrapper>
-      <List.Section title="Text">
-        <View style={styles.row}>
-          <Avatar.Text
-            style={[
-              styles.avatar,
-              {
-                backgroundColor: isV3 ? MD3Colors.error70 : MD2Colors.yellow500,
-              },
-            ]}
-            label="XD"
-            color={isV3 ? MD3Colors.primary0 : MD2Colors.black}
-          />
-          <Avatar.Text style={styles.avatar} label="XD" />
-          <Avatar.Text style={styles.avatar} label="XD" size={80} />
-        </View>
-      </List.Section>
-      <List.Section title="Icon">
-        <View style={styles.row}>
-          <Avatar.Icon
-            style={[
-              styles.avatar,
-              {
-                backgroundColor: isV3 ? MD3Colors.error70 : MD2Colors.yellow500,
-              },
-            ]}
-            icon="folder"
-            color={isV3 ? MD3Colors.primary0 : MD2Colors.black}
-          />
-          <Avatar.Icon style={styles.avatar} icon="folder" />
-          <Avatar.Icon style={styles.avatar} icon="folder" size={80} />
-        </View>
-      </List.Section>
-      <List.Section title="Image">
-        <View style={styles.row}>
-          <Avatar.Image
-            style={styles.avatar}
-            source={require('../../assets/images/avatar.png')}
-          />
-          <Avatar.Image
-            style={styles.avatar}
-            source={require('../../assets/images/avatar.png')}
-            size={80}
-          />
-        </View>
-      </List.Section>
-    </ScreenWrapper>
-  );
-};
-
-AvatarExample.title = 'Avatar';
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    margin: 8,
-  },
-  avatar: {
-    margin: 8,
-  },
-});
-
-export default AvatarExample;

package/Examples/SampleUI/src/Examples/BadgeExample.tsx

@@ -1,97 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
-
-import {
-  Badge,
-  IconButton,
-  List,
-  MD2Colors,
-  MD3Colors,
-  Text,
-  Switch,
-} from 'react-native-paper';
-
-import { useExampleTheme } from '..';
-import ScreenWrapper from '../ScreenWrapper';
-
-const BadgeExample = () => {
-  const [visible, setVisible] = React.useState<boolean>(true);
-  const { isV3 } = useExampleTheme();
-
-  return (
-    <ScreenWrapper>
-      <View style={[styles.row, styles.item]}>
-        <Text style={styles.label} variant="bodyMedium">
-          Show badges
-        </Text>
-        <Switch
-          value={visible}
-          onValueChange={(visible) => setVisible(visible)}
-        />
-      </View>
-      <List.Section title="Text">
-        <View style={styles.row}>
-          <View style={styles.item}>
-            <IconButton icon="palette-swatch" size={36} style={styles.button} />
-            <Badge visible={visible} style={styles.badge}>
-              12
-            </Badge>
-          </View>
-          <View style={styles.item}>
-            <IconButton icon="inbox" size={36} style={styles.button} />
-            <Badge
-              visible={visible}
-              style={[
-                styles.badge,
-                {
-                  backgroundColor: isV3
-                    ? MD3Colors.primary80
-                    : MD2Colors.blue500,
-                },
-              ]}
-            >
-              999+
-            </Badge>
-          </View>
-        </View>
-      </List.Section>
-      <List.Section title="Dot">
-        <View style={styles.row}>
-          <View style={styles.item}>
-            <IconButton icon="book-open" size={36} style={styles.button} />
-            <Badge visible={visible} style={styles.badge} size={isV3 ? 6 : 8} />
-          </View>
-          <View style={styles.item}>
-            <IconButton icon="receipt" size={36} style={styles.button} />
-            <Badge visible={visible} style={styles.badge} size={isV3 ? 6 : 8} />
-          </View>
-        </View>
-      </List.Section>
-    </ScreenWrapper>
-  );
-};
-
-BadgeExample.title = 'Badge';
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  item: {
-    margin: 16,
-  },
-  button: {
-    opacity: 0.6,
-  },
-  badge: {
-    position: 'absolute',
-    top: 4,
-    right: 0,
-  },
-  label: {
-    flex: 1,
-  },
-});
-
-export default BadgeExample;

package/Examples/SampleUI/src/Examples/BannerExample.tsx

@@ -1,152 +0,0 @@
-import * as React from 'react';
-import {
-  Dimensions,
-  Image,
-  LayoutChangeEvent,
-  Platform,
-  StyleSheet,
-  View,
-} from 'react-native';
-
-import { Banner, FAB, MD2Colors, MD3Colors } from 'react-native-paper';
-
-import { useExampleTheme } from '..';
-import ScreenWrapper from '../ScreenWrapper';
-
-const PHOTOS = Array.from({ length: 24 }).map(
-  (_, i) => `https://unsplash.it/300/300/?random&__id=${i}`
-);
-
-const BannerExample = () => {
-  const [visible, setVisible] = React.useState<boolean>(true);
-  const [useCustomTheme, setUseCustomTheme] = React.useState<boolean>(false);
-  const defaultTheme = useExampleTheme();
-
-  const [height, setHeight] = React.useState(0);
-
-  const handleLayout = ({ nativeEvent }: LayoutChangeEvent) => {
-    const { height: layoutHeight } = nativeEvent.layout;
-    setHeight(layoutHeight);
-  };
-
-  const customTheme = !defaultTheme.isV3
-    ? {
-        ...defaultTheme,
-        colors: {
-          text: MD2Colors.white,
-          surface: MD2Colors.blue200,
-          primary: MD2Colors.purple900,
-        },
-      }
-    : {
-        ...defaultTheme,
-        colors: {
-          onSurface: MD3Colors.tertiary100,
-          elevation: {
-            level1: MD3Colors.tertiary50,
-          },
-          primary: MD3Colors.tertiary10,
-        },
-      };
-
-  return (
-    <>
-      <ScreenWrapper>
-        <View style={[styles.grid, { paddingTop: height }]}>
-          {PHOTOS.map((uri) => (
-            <View key={uri} style={styles.item}>
-              <Image
-                source={{ uri }}
-                style={styles.photo}
-                accessibilityIgnoresInvertColors
-              />
-            </View>
-          ))}
-        </View>
-      </ScreenWrapper>
-      <FAB
-        icon="eye"
-        label={visible ? 'Hide banner' : 'Show banner'}
-        style={styles.fab}
-        onPress={() => setVisible(!visible)}
-      />
-      <Banner
-        onLayout={handleLayout}
-        actions={[
-          {
-            label: `Set ${useCustomTheme ? 'default' : 'custom'} theme`,
-            onPress: () => setUseCustomTheme(!useCustomTheme),
-          },
-          {
-            label: 'Fix it',
-            onPress: () => setVisible(false),
-          },
-        ]}
-        icon={require('../../assets/images/email-icon.png')}
-        visible={visible}
-        onShowAnimationFinished={() =>
-          console.log('Completed opening animation')
-        }
-        onHideAnimationFinished={() =>
-          console.log('Completed closing animation')
-        }
-        theme={useCustomTheme ? customTheme : defaultTheme}
-        style={styles.banner}
-      >
-        Two line text string with two actions. One to two lines is preferable on
-        mobile.
-      </Banner>
-    </>
-  );
-};
-
-BannerExample.title = 'Banner';
-
-const styles = StyleSheet.create({
-  ...Platform.select({
-    web: {
-      grid: {
-        // there is no 'grid' type in RN :(
-        display: 'grid' as 'none',
-        gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',
-        gridRowGap: '8px',
-        gridColumnGap: '8px',
-        padding: 8,
-      },
-      item: {
-        width: '100%',
-        height: 150,
-      },
-    },
-    default: {
-      grid: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        padding: 4,
-      },
-      item: {
-        height: Dimensions.get('window').width / 2,
-        width: '50%',
-        padding: 4,
-      },
-    },
-  }),
-  banner: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-  },
-  photo: {
-    flex: 1,
-    resizeMode: 'cover',
-  },
-  fab: {
-    alignSelf: 'center',
-    position: 'absolute',
-    bottom: 0,
-    margin: 16,
-  },
-});
-
-export default BannerExample;

package/Examples/SampleUI/src/Examples/BottomNavigationBarExample.tsx

@@ -1,94 +0,0 @@
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
-
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { CommonActions } from '@react-navigation/native';
-import { Text, BottomNavigation } from 'react-native-paper';
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-
-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>
-  );
-}
-
-export default function BottomNavigationBarExample() {
-  return (
-    <Tab.Navigator
-      screenOptions={{
-        headerShown: false,
-      }}
-      tabBar={({ navigation, state, descriptors, insets }) => (
-        <BottomNavigation.Bar
-          navigationState={state}
-          safeAreaInsets={insets}
-          onTabPress={({ route, preventDefault }) => {
-            const event = navigation.emit({
-              type: 'tabPress',
-              target: route.key,
-              canPreventDefault: true,
-            });
-
-            if (event.defaultPrevented) {
-              preventDefault();
-            } else {
-              navigation.dispatch({
-                ...CommonActions.navigate(route.name, route.params),
-                target: state.key,
-              });
-            }
-          }}
-          renderIcon={({ route, focused, color }) =>
-            descriptors[route.key].options.tabBarIcon?.({
-              focused,
-              color,
-              size: 24,
-            }) || null
-          }
-          getLabelText={({ route }) => descriptors[route.key].route.name}
-        />
-      )}
-    >
-      <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>
-  );
-}
-
-BottomNavigationBarExample.title = 'Bottom Navigation Bar';
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});

package/Examples/SampleUI/src/Examples/BottomNavigationExample.tsx

@@ -1,205 +0,0 @@
-import * as React from 'react';
-import {
-  Dimensions,
-  Easing,
-  Image,
-  Platform,
-  StyleSheet,
-  View,
-} from 'react-native';
-
-import type { StackNavigationProp } from '@react-navigation/stack';
-import {
-  Appbar,
-  BottomNavigation,
-  BottomNavigationRoute,
-  Menu,
-} from 'react-native-paper';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-import { useExampleTheme } from '..';
-import ScreenWrapper from '../ScreenWrapper';
-
-type Route = { route: { key: string } };
-
-type Props = {
-  navigation: StackNavigationProp<{}>;
-};
-
-const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';
-
-const PhotoGallery = ({ route }: Route) => {
-  const PHOTOS = Array.from({ length: 24 }).map(
-    (_, i) => `https://unsplash.it/300/300/?random&__id=${route.key}${i}`
-  );
-
-  return (
-    <ScreenWrapper contentContainerStyle={styles.content}>
-      {PHOTOS.map((uri) => (
-        <View key={uri} style={styles.item}>
-          <Image
-            source={{ uri }}
-            style={styles.photo}
-            accessibilityIgnoresInvertColors
-          />
-        </View>
-      ))}
-    </ScreenWrapper>
-  );
-};
-
-const BottomNavigationExample = ({ navigation }: Props) => {
-  const { isV3 } = useExampleTheme();
-  const insets = useSafeAreaInsets();
-  const [index, setIndex] = React.useState(0);
-  const [menuVisible, setMenuVisible] = React.useState(false);
-  const [sceneAnimation, setSceneAnimation] =
-    React.useState<
-      React.ComponentProps<typeof BottomNavigation>['sceneAnimationType']
-    >();
-
-  const [routes] = React.useState<BottomNavigationRoute[]>([
-    {
-      key: 'album',
-      title: 'Album',
-      focusedIcon: 'image-album',
-      ...(!isV3 && { color: '#6200ee' }),
-    },
-    {
-      key: 'library',
-      title: 'Library',
-      focusedIcon: 'inbox',
-      badge: true,
-      ...(isV3
-        ? { unfocusedIcon: 'inbox-outline' }
-        : {
-            color: '#2962ff',
-          }),
-    },
-    {
-      key: 'favorites',
-      title: 'Favorites',
-      focusedIcon: 'heart',
-      ...(isV3
-        ? { unfocusedIcon: 'heart-outline' }
-        : {
-            color: '#00796b',
-          }),
-    },
-    {
-      key: 'purchased',
-      title: 'Purchased',
-      focusedIcon: 'shopping',
-      ...(isV3 ? { unfocusedIcon: 'shopping-outline' } : { color: '#c51162' }),
-    },
-  ]);
-
-  React.useLayoutEffect(() => {
-    navigation.setOptions({
-      headerShown: false,
-    });
-  }, [navigation]);
-
-  return (
-    <View style={styles.screen}>
-      <Appbar.Header elevated>
-        <Appbar.BackAction onPress={() => navigation.goBack()} />
-        <Appbar.Content title="Bottom Navigation" />
-        <Menu
-          visible={menuVisible}
-          onDismiss={() => setMenuVisible(false)}
-          anchor={
-            <Appbar.Action
-              icon={MORE_ICON}
-              onPress={() => setMenuVisible(true)}
-              {...(!isV3 && { color: 'white' })}
-            />
-          }
-        >
-          <Menu.Item
-            trailingIcon={sceneAnimation === undefined ? 'check' : undefined}
-            onPress={() => {
-              setSceneAnimation(undefined);
-              setMenuVisible(false);
-            }}
-            title="Scene animation: none"
-          />
-          <Menu.Item
-            trailingIcon={sceneAnimation === 'shifting' ? 'check' : undefined}
-            onPress={() => {
-              setSceneAnimation('shifting');
-              setMenuVisible(false);
-            }}
-            title="Scene animation: shifting"
-          />
-          <Menu.Item
-            trailingIcon={sceneAnimation === 'opacity' ? 'check' : undefined}
-            onPress={() => {
-              setSceneAnimation('opacity');
-              setMenuVisible(false);
-            }}
-            title="Scene animation: opacity"
-          />
-        </Menu>
-      </Appbar.Header>
-      <BottomNavigation
-        safeAreaInsets={{ bottom: insets.bottom }}
-        navigationState={{ index, routes }}
-        onIndexChange={setIndex}
-        labelMaxFontSizeMultiplier={2}
-        renderScene={BottomNavigation.SceneMap({
-          album: PhotoGallery,
-          library: PhotoGallery,
-          favorites: PhotoGallery,
-          purchased: PhotoGallery,
-        })}
-        sceneAnimationEnabled={sceneAnimation !== undefined}
-        sceneAnimationType={sceneAnimation}
-        sceneAnimationEasing={Easing.ease}
-        getLazy={({ route }) => route.key !== 'album'}
-      />
-    </View>
-  );
-};
-
-BottomNavigationExample.title = 'Bottom Navigation';
-
-export default BottomNavigationExample;
-
-const styles = StyleSheet.create({
-  ...Platform.select({
-    web: {
-      content: {
-        // there is no 'grid' type in RN :(
-        display: 'grid' as 'none',
-        gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',
-        gridRowGap: '8px',
-        gridColumnGap: '8px',
-        padding: 8,
-      },
-      item: {
-        width: '100%',
-        height: 150,
-      },
-    },
-    default: {
-      content: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        padding: 4,
-      },
-      item: {
-        height: Dimensions.get('window').width / 2,
-        width: '50%',
-        padding: 4,
-      },
-    },
-  }),
-  photo: {
-    flex: 1,
-    resizeMode: 'cover',
-  },
-  screen: {
-    flex: 1,
-  },
-});