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

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

@@ -0,0 +1,211 @@
+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

@@ -0,0 +1,142 @@
+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

@@ -0,0 +1,104 @@
+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

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,77 @@
+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;