react-native-acoustic-connect 19.0.11 → 19.0.34

package/Examples/SampleUI/src/Examples/MenuExample.tsx

@@ -1,211 +0,0 @@
-import * as React from 'react';
-import {
-  GestureResponderEvent,
-  Platform,
-  StyleSheet,
-  View,
-} from 'react-native';
-
-import type { StackNavigationProp } from '@react-navigation/stack';
-import {
-  Appbar,
-  Button,
-  Divider,
-  List,
-  Menu,
-  TouchableRipple,
-} from 'react-native-paper';
-
-import { useExampleTheme } from '..';
-import ScreenWrapper from '../ScreenWrapper';
-
-type ContextualMenuCoord = { x: number; y: number };
-
-type Props = {
-  navigation: StackNavigationProp<{}>;
-};
-
-type MenuVisibility = {
-  [key: string]: boolean | undefined;
-};
-
-const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';
-
-const MenuExample = ({ navigation }: Props) => {
-  const [visible, setVisible] = React.useState<MenuVisibility>({});
-  const [contextualMenuCoord, setContextualMenuCoor] =
-    React.useState<ContextualMenuCoord>({ x: 0, y: 0 });
-  const { isV3 } = useExampleTheme();
-
-  const _toggleMenu = (name: string) => () =>
-    setVisible({ ...visible, [name]: !visible[name] });
-
-  const _getVisible = (name: string) => !!visible[name];
-
-  const _handleLongPress = (event: GestureResponderEvent) => {
-    const { nativeEvent } = event;
-    setContextualMenuCoor({
-      x: nativeEvent.pageX,
-      y: nativeEvent.pageY,
-    });
-    setVisible({ menu3: true });
-  };
-
-  React.useLayoutEffect(() => {
-    navigation.setOptions({
-      headerShown: false,
-    });
-  }, [navigation]);
-
-  return (
-    <View style={styles.screen}>
-      <Appbar.Header elevated>
-        <Appbar.BackAction onPress={() => navigation.goBack()} />
-        <Appbar.Content title="Menu" />
-        <Menu
-          visible={_getVisible('menu1')}
-          onDismiss={_toggleMenu('menu1')}
-          anchor={
-            <Appbar.Action
-              icon={MORE_ICON}
-              onPress={_toggleMenu('menu1')}
-              {...(!isV3 && { color: 'white' })}
-            />
-          }
-        >
-          <Menu.Item onPress={() => {}} title="Undo" />
-          <Menu.Item onPress={() => {}} title="Redo" />
-          <Divider style={isV3 && styles.md3Divider} />
-          <Menu.Item onPress={() => {}} title="Cut" disabled />
-          <Menu.Item onPress={() => {}} title="Copy" disabled />
-          <Menu.Item onPress={() => {}} title="Paste" />
-        </Menu>
-      </Appbar.Header>
-      <ScreenWrapper
-        contentContainerStyle={styles.contentContainer}
-        style={styles.container}
-      >
-        <View>
-          <View style={styles.alignCenter}>
-            <Menu
-              visible={_getVisible('menu2')}
-              onDismiss={_toggleMenu('menu2')}
-              anchor={
-                <Button mode="outlined" onPress={_toggleMenu('menu2')}>
-                  Menu with icons
-                </Button>
-              }
-            >
-              <Menu.Item leadingIcon="undo" onPress={() => {}} title="Undo" />
-              <Menu.Item leadingIcon="redo" onPress={() => {}} title="Redo" />
-
-              <Divider style={isV3 && styles.md3Divider} />
-
-              <Menu.Item
-                leadingIcon="content-cut"
-                onPress={() => {}}
-                title="Cut"
-                disabled
-              />
-              <Menu.Item
-                leadingIcon="content-copy"
-                onPress={() => {}}
-                title="Copy"
-                disabled
-              />
-              <Menu.Item
-                leadingIcon="content-paste"
-                onPress={() => {}}
-                title="Paste"
-              />
-              {isV3 && (
-                <Menu.Item
-                  trailingIcon="share-variant"
-                  onPress={() => {}}
-                  title="Share"
-                />
-              )}
-            </Menu>
-          </View>
-          <Menu
-            visible={_getVisible('menu3')}
-            onDismiss={_toggleMenu('menu3')}
-            anchor={contextualMenuCoord}
-          >
-            <Menu.Item onPress={() => {}} title="Item 1" />
-            <Menu.Item onPress={() => {}} title="Item 2" />
-            <Divider style={isV3 && styles.md3Divider} />
-            <Menu.Item onPress={() => {}} title="Item 3" disabled />
-          </Menu>
-          <List.Section style={styles.list} title="Contextual menu">
-            <TouchableRipple onPress={() => {}} onLongPress={_handleLongPress}>
-              <List.Item
-                title="List item"
-                description="Long press me to open contextual menu"
-              />
-            </TouchableRipple>
-          </List.Section>
-        </View>
-        <View style={styles.alignCenter}>
-          <Menu
-            visible={_getVisible('menu5')}
-            onDismiss={_toggleMenu('menu5')}
-            anchorPosition="bottom"
-            anchor={
-              <Button mode="outlined" onPress={_toggleMenu('menu5')}>
-                Menu with anchor position bottom
-              </Button>
-            }
-          >
-            <Menu.Item onPress={() => {}} title="Item 1" />
-            <Menu.Item onPress={() => {}} title="Item 2" />
-            <Menu.Item onPress={() => {}} title="Item 3" />
-          </Menu>
-        </View>
-
-        <View style={styles.bottomMenu}>
-          <Menu
-            visible={_getVisible('menu4')}
-            onDismiss={_toggleMenu('menu4')}
-            anchor={
-              <Button mode="outlined" onPress={_toggleMenu('menu4')}>
-                Menu at bottom
-              </Button>
-            }
-          >
-            <Menu.Item onPress={() => {}} title="Bottom Item 1" />
-            <Menu.Item onPress={() => {}} title="Bottom Item 2" />
-            <Menu.Item onPress={() => {}} title="Bottom Item 3" />
-          </Menu>
-        </View>
-      </ScreenWrapper>
-    </View>
-  );
-};
-
-MenuExample.title = 'Menu';
-
-const styles = StyleSheet.create({
-  screen: {
-    flex: 1,
-  },
-  container: {
-    paddingTop: 48,
-  },
-  list: {
-    marginTop: 48,
-  },
-  alignCenter: {
-    alignItems: 'center',
-  },
-  md3Divider: {
-    marginVertical: 8,
-  },
-  bottomMenu: { width: '40%' },
-  contentContainer: {
-    justifyContent: 'space-between',
-    flex: 1,
-  },
-});
-
-export default MenuExample;

package/Examples/SampleUI/src/Examples/ProgressBarExample.tsx

@@ -1,142 +0,0 @@
-import * as React from 'react';
-import { View, StyleSheet, Animated } from 'react-native';
-
-import {
-  Button,
-  ProgressBar,
-  MD2Colors,
-  MD3Colors,
-  ProgressBarProps,
-  Text,
-} from 'react-native-paper';
-
-import { useExampleTheme } from '..';
-import ScreenWrapper from '../ScreenWrapper';
-
-class ClassProgressBar extends React.Component {
-  constructor(props: ProgressBarProps) {
-    super(props);
-  }
-
-  render() {
-    return <ProgressBar {...this.props} />;
-  }
-}
-
-const AnimatedProgressBar = Animated.createAnimatedComponent(ClassProgressBar);
-
-const ProgressBarExample = () => {
-  const [visible, setVisible] = React.useState<boolean>(true);
-  const [progress, setProgress] = React.useState<number>(0.3);
-  const theme = useExampleTheme();
-  const { isV3 } = theme;
-  const { current: progressBarValue } = React.useRef(new Animated.Value(0));
-
-  const runCustomAnimation = () => {
-    progressBarValue.setValue(0);
-    Animated.timing(progressBarValue, {
-      toValue: 1,
-      duration: 2000,
-      useNativeDriver: false,
-    }).start();
-  };
-
-  return (
-    <ScreenWrapper contentContainerStyle={styles.container}>
-      <Button onPress={() => setVisible(!visible)}>Toggle visibility</Button>
-      <Button onPress={() => setProgress(Math.random())}>
-        Random progress
-      </Button>
-      <Button onPress={runCustomAnimation}>Toggle animation</Button>
-
-      <View style={styles.row}>
-        <Text variant="bodyMedium">Default ProgressBar</Text>
-        <ProgressBar progress={progress} visible={visible} />
-      </View>
-
-      <View style={styles.row}>
-        <Text variant="bodyMedium">Indeterminate ProgressBar</Text>
-        <ProgressBar indeterminate visible={visible} />
-      </View>
-
-      <View style={styles.row}>
-        <Text variant="bodyMedium">ProgressBar with custom color</Text>
-        <ProgressBar
-          progress={progress}
-          visible={visible}
-          color={isV3 ? MD3Colors.error50 : MD2Colors.red800}
-        />
-      </View>
-
-      <View style={styles.row}>
-        <Text variant="bodyMedium">
-          ProgressBar with custom background color
-        </Text>
-        <ProgressBar
-          progress={progress}
-          visible={visible}
-          color={MD2Colors.red800}
-          style={{
-            backgroundColor: isV3 ? MD3Colors.secondary50 : MD2Colors.teal500,
-          }}
-        />
-      </View>
-
-      <View style={styles.row}>
-        <Text variant="bodyMedium">ProgressBar with custom height</Text>
-        <ProgressBar
-          progress={progress}
-          visible={visible}
-          style={styles.customHeight}
-        />
-      </View>
-
-      <View style={styles.row}>
-        <Text variant="bodyMedium">ProgressBar with animated value</Text>
-        <AnimatedProgressBar
-          visible={visible}
-          style={styles.progressBar}
-          animatedValue={progressBarValue}
-          theme={theme}
-        />
-      </View>
-
-      <View style={[styles.row, styles.fullRow]}>
-        <Text variant="bodyMedium">
-          ProgressBar with custom percentage height
-        </Text>
-        <ProgressBar
-          style={styles.customPercentageHeight}
-          indeterminate
-          visible={visible}
-        />
-      </View>
-    </ScreenWrapper>
-  );
-};
-
-ProgressBarExample.title = 'Progress Bar';
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 16,
-  },
-  row: {
-    marginVertical: 10,
-  },
-  fullRow: {
-    height: '100%',
-    width: '100%',
-  },
-  customHeight: {
-    height: 20,
-  },
-  customPercentageHeight: {
-    height: '50%',
-  },
-  progressBar: {
-    height: 15,
-  },
-});
-
-export default ProgressBarExample;

package/Examples/SampleUI/src/Examples/RadioButtonExample.tsx

@@ -1,104 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
-
-import {
-  MD2Colors,
-  MD3Colors,
-  Paragraph,
-  RadioButton,
-  Text,
-  TouchableRipple,
-} from 'react-native-paper';
-
-import { useExampleTheme } from '..';
-import ScreenWrapper from '../ScreenWrapper';
-
-type State = 'normal' | 'normal-ios' | 'normal-item' | 'custom';
-
-const RadioButtonExample = () => {
-  const [checked, setChecked] = React.useState<State>('normal');
-  const { isV3 } = useExampleTheme();
-  const TextComponent = isV3 ? Text : Paragraph;
-
-  return (
-    <ScreenWrapper style={styles.container}>
-      <TouchableRipple onPress={() => setChecked('normal')}>
-        <View style={styles.row}>
-          <TextComponent>Normal - Material Design</TextComponent>
-          <View pointerEvents="none">
-            <RadioButton.Android
-              value="normal"
-              status={checked === 'normal' ? 'checked' : 'unchecked'}
-            />
-          </View>
-        </View>
-      </TouchableRipple>
-      <TouchableRipple onPress={() => setChecked('normal-ios')}>
-        <View style={styles.row}>
-          <TextComponent>Normal 2 - IOS</TextComponent>
-          <View pointerEvents="none">
-            <RadioButton.IOS
-              value="normal-ios"
-              status={checked === 'normal-ios' ? 'checked' : 'unchecked'}
-            />
-          </View>
-        </View>
-      </TouchableRipple>
-      <TouchableRipple onPress={() => setChecked('custom')}>
-        <View style={styles.row}>
-          <TextComponent>Custom</TextComponent>
-          <View pointerEvents="none">
-            <RadioButton
-              value="custom"
-              color={isV3 ? MD3Colors.error70 : MD2Colors.blue500}
-              status={checked === 'custom' ? 'checked' : 'unchecked'}
-            />
-          </View>
-        </View>
-      </TouchableRipple>
-      <RadioButton.Item
-        label="Normal 3 - Item"
-        value="normal-item"
-        status={checked === 'normal-item' ? 'checked' : 'unchecked'}
-        onPress={() => setChecked('normal-item')}
-      />
-      <View style={styles.row}>
-        <TextComponent>Checked (Disabled)</TextComponent>
-        <RadioButton value="first" status="checked" disabled />
-      </View>
-      <View style={styles.row}>
-        <TextComponent>Unchecked (Disabled)</TextComponent>
-        <RadioButton value="second" status="unchecked" disabled />
-      </View>
-      <RadioButton.Item
-        label="Checked - Item (Disabled)"
-        value="third"
-        status="checked"
-        disabled
-      />
-      <RadioButton.Item
-        label="Unchecked - Item (Disabled)"
-        value="fourth"
-        status="unchecked"
-        disabled
-      />
-    </ScreenWrapper>
-  );
-};
-
-RadioButtonExample.title = 'Radio Button';
-
-const styles = StyleSheet.create({
-  container: {
-    paddingVertical: 8,
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-  },
-});
-
-export default RadioButtonExample;

package/Examples/SampleUI/src/Examples/RadioButtonGroupExample.tsx

@@ -1,67 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
-
-import { List, Paragraph, RadioButton, Text } from 'react-native-paper';
-
-import { useExampleTheme } from '..';
-import ScreenWrapper from '../ScreenWrapper';
-
-const RadioButtonGroupExample = () => {
-  const [value, setValue] = React.useState('first');
-  const [value2, setValue2] = React.useState('first');
-
-  const { colors, isV3 } = useExampleTheme();
-  const TextComponent = isV3 ? Text : Paragraph;
-
-  return (
-    <ScreenWrapper>
-      <List.Section title="With RadioButton">
-        <RadioButton.Group
-          value={value}
-          onValueChange={(value: string) => setValue(value)}
-        >
-          <View style={styles.row}>
-            <TextComponent>First</TextComponent>
-            <RadioButton value="first" />
-          </View>
-          <View style={styles.row}>
-            <TextComponent>Second</TextComponent>
-            <RadioButton.Android value="second" />
-          </View>
-          <View style={styles.row}>
-            <TextComponent>Third</TextComponent>
-            <RadioButton.IOS value="third" />
-          </View>
-        </RadioButton.Group>
-      </List.Section>
-      <List.Section title="With RadioButton.Item">
-        <RadioButton.Group
-          value={value2}
-          onValueChange={(value: string) => setValue2(value)}
-        >
-          <RadioButton.Item label="First item" value="first" />
-          <RadioButton.Item label="Second item" value="second" />
-          <RadioButton.Item
-            label="Third item"
-            value="third"
-            labelStyle={{ color: colors?.primary }}
-          />
-        </RadioButton.Group>
-      </List.Section>
-    </ScreenWrapper>
-  );
-};
-
-RadioButtonGroupExample.title = 'Radio Button Group';
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-  },
-});
-
-export default RadioButtonGroupExample;

package/Examples/SampleUI/src/Examples/RadioButtonItemExample.tsx

@@ -1,77 +0,0 @@
-import * as React from 'react';
-import { StyleSheet } from 'react-native';
-
-import { RadioButton } from 'react-native-paper';
-
-import { useExampleTheme } from '..';
-import ScreenWrapper from '../ScreenWrapper';
-
-const RadioButtonItemExample = () => {
-  const [checkedDefault, setCheckedDefault] = React.useState(true);
-  const [checkedAndroid, setCheckedAndroid] = React.useState(true);
-  const [checkedIOS, setCheckedIOS] = React.useState(true);
-  const [checkedLeadingControl, setCheckedLeadingControl] =
-    React.useState(true);
-  const [checkedDisabled, setCheckedDisabled] = React.useState<boolean>(true);
-  const [checkedLabelVariant, setCheckedLabelVariant] = React.useState(true);
-
-  const { isV3 } = useExampleTheme();
-
-  return (
-    <ScreenWrapper style={styles.container}>
-      <RadioButton.Item
-        label="Default (will look like whatever system this is running on)"
-        status={checkedDefault ? 'checked' : 'unchecked'}
-        onPress={() => setCheckedDefault(!checkedDefault)}
-        value="default"
-      />
-      <RadioButton.Item
-        label="Material Design"
-        mode="android"
-        status={checkedAndroid ? 'checked' : 'unchecked'}
-        onPress={() => setCheckedAndroid(!checkedAndroid)}
-        value="android"
-      />
-      <RadioButton.Item
-        label="iOS"
-        mode="ios"
-        status={checkedIOS ? 'checked' : 'unchecked'}
-        onPress={() => setCheckedIOS(!checkedIOS)}
-        value="iOS"
-      />
-      <RadioButton.Item
-        label="Default with leading control"
-        status={checkedLeadingControl ? 'checked' : 'unchecked'}
-        onPress={() => setCheckedLeadingControl(!checkedLeadingControl)}
-        value="iOS"
-        position="leading"
-      />
-      <RadioButton.Item
-        label="Disabled checkbox"
-        status={checkedDisabled ? 'checked' : 'unchecked'}
-        onPress={() => setCheckedDisabled(!checkedDisabled)}
-        value="iOS"
-        disabled
-      />
-      {isV3 && (
-        <RadioButton.Item
-          label="Default with titleLarge title variant"
-          labelVariant="titleLarge"
-          status={checkedLabelVariant ? 'checked' : 'unchecked'}
-          onPress={() => setCheckedLabelVariant(!checkedLabelVariant)}
-          value="default"
-        />
-      )}
-    </ScreenWrapper>
-  );
-};
-
-RadioButtonItemExample.title = 'Radio Button Item';
-
-const styles = StyleSheet.create({
-  container: {
-    paddingVertical: 8,
-  },
-});
-
-export default RadioButtonItemExample;