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

package/Examples/SampleUI/src/Examples/Dialogs/index.tsx

@@ -0,0 +1,7 @@
+export { default as DialogWithCustomColors } from './DialogWithCustomColors';
+export { default as DialogWithLoadingIndicator } from './DialogWithLoadingIndicator';
+export { default as DialogWithLongText } from './DialogWithLongText';
+export { default as DialogWithRadioBtns } from './DialogWithRadioBtns';
+export { default as UndismissableDialog } from './UndismissableDialog';
+export { default as DialogWithIcon } from './DialogWithIcon';
+export { default as DialogWithDismissableBackButton } from './DialogWithDismissableBackButton';

package/Examples/SampleUI/src/Examples/DividerExample.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { FlatList } from 'react-native';
+
+import { Divider, List } from 'react-native-paper';
+
+import { useExampleTheme } from '..';
+import ScreenWrapper from '../ScreenWrapper';
+
+const items = ['Apple', 'Banana', 'Coconut', 'Lemon', 'Mango', 'Peach'];
+
+const DividerExample = () => {
+  const { colors } = useExampleTheme();
+
+  return (
+    <ScreenWrapper withScrollView={false}>
+      <FlatList
+        style={{ backgroundColor: colors?.background }}
+        renderItem={({ item }) => <List.Item title={item} />}
+        keyExtractor={(item) => item}
+        ItemSeparatorComponent={Divider}
+        data={items}
+        alwaysBounceVertical={false}
+      />
+    </ScreenWrapper>
+  );
+};
+
+DividerExample.title = 'Divider';
+
+export default DividerExample;

package/Examples/SampleUI/src/Examples/FABExample.tsx

@@ -0,0 +1,226 @@
+import * as React from 'react';
+import { Alert, StyleSheet, View } from 'react-native';
+
+import { FAB, Portal, Text } from 'react-native-paper';
+
+import { useExampleTheme } from '..';
+import { isWeb } from '../../utils';
+import ScreenWrapper from '../ScreenWrapper';
+
+type FABVariant = 'primary' | 'secondary' | 'tertiary' | 'surface';
+type FABSize = 'small' | 'medium' | 'large';
+type FABMode = 'flat' | 'elevated';
+
+const FABExample = () => {
+  const [visible, setVisible] = React.useState<boolean>(true);
+  const [toggleStackOnLongPress, setToggleStackOnLongPress] =
+    React.useState<boolean>(false);
+  const [open, setOpen] = React.useState<boolean>(false);
+  const { isV3 } = useExampleTheme();
+
+  const variants = ['primary', 'secondary', 'tertiary', 'surface'];
+  const sizes = ['small', 'medium', 'large'];
+  const modes = ['flat', 'elevated'];
+
+  return (
+    <ScreenWrapper style={styles.container}>
+      <View style={styles.column}>
+        <FAB
+          icon={visible ? 'eye-off' : 'eye'}
+          size="small"
+          style={styles.fab}
+          onPress={() => setVisible(!visible)}
+        />
+      </View>
+      {isV3 && (
+        <>
+          <View style={styles.row}>
+            {variants.map((variant) => (
+              <View style={styles.fabVariant} key={variant}>
+                <FAB
+                  icon="pencil"
+                  style={styles.fab}
+                  onPress={() => {}}
+                  visible={visible}
+                  variant={variant as FABVariant}
+                />
+                {visible && <Text variant="bodyMedium">{variant}</Text>}
+              </View>
+            ))}
+          </View>
+          <View style={styles.row}>
+            {sizes.map((size) => (
+              <View style={styles.fabVariant} key={size}>
+                <FAB
+                  icon="pencil"
+                  style={styles.fab}
+                  onPress={() => {}}
+                  visible={visible}
+                  size={size as FABSize}
+                />
+                {visible && <Text variant="bodyMedium">{size}</Text>}
+              </View>
+            ))}
+          </View>
+          <View style={styles.row}>
+            {modes.map((mode) => (
+              <View style={styles.fabVariant} key={mode}>
+                <FAB
+                  icon="pencil"
+                  style={styles.fab}
+                  onPress={() => {}}
+                  visible={visible}
+                  mode={mode as FABMode}
+                />
+                {visible && <Text variant="bodyMedium">{mode}</Text>}
+              </View>
+            ))}
+          </View>
+        </>
+      )}
+      <View style={styles.column}>
+        {!isV3 && (
+          <>
+            <FAB
+              icon="heart"
+              style={styles.fab}
+              onPress={() => {}}
+              visible={visible}
+            />
+            <FAB
+              icon="heart"
+              style={styles.fab}
+              onPress={() => {}}
+              visible={visible}
+            />
+          </>
+        )}
+        <FAB
+          icon="map"
+          style={styles.fab}
+          customSize={64}
+          onPress={() => {}}
+          visible={visible}
+        />
+        <FAB
+          icon="map"
+          label="Extended FAB with custom size"
+          style={styles.fab}
+          customSize={64}
+          onPress={() => {}}
+          visible={visible}
+        />
+        <FAB
+          icon="check"
+          label="Extended FAB"
+          style={styles.fab}
+          onPress={() => {}}
+          visible={visible}
+        />
+        <FAB
+          icon="cancel"
+          label="Disabled FAB"
+          style={styles.fab}
+          onPress={() => {}}
+          visible={visible}
+          disabled
+        />
+        <FAB
+          icon="format-letter-case"
+          label="Mixed case"
+          style={styles.fab}
+          onPress={() => {}}
+          visible={visible}
+          uppercase
+        />
+        <FAB
+          icon="cancel"
+          label="Loading FAB"
+          style={styles.fab}
+          onPress={() => {}}
+          visible={visible}
+          loading
+        />
+        <Portal>
+          <FAB.Group
+            open={open}
+            icon={open ? 'calendar-today' : 'plus'}
+            accessibilityLabel="Calendar FAB"
+            toggleStackOnLongPress={toggleStackOnLongPress}
+            actions={[
+              { icon: 'plus', onPress: () => {} },
+              { icon: 'star', label: 'Star', onPress: () => {} },
+              { icon: 'email', label: 'Email', onPress: () => {} },
+              {
+                icon: 'bell',
+                label: 'Remind',
+                onPress: () => {},
+                size: isV3 ? 'small' : 'medium',
+              },
+              {
+                icon: toggleStackOnLongPress
+                  ? 'gesture-tap'
+                  : 'gesture-tap-hold',
+                label: toggleStackOnLongPress
+                  ? 'Toggle on Press'
+                  : 'Toggle on Long Press',
+                onPress: () => {
+                  setToggleStackOnLongPress(!toggleStackOnLongPress);
+                },
+              },
+            ]}
+            enableLongPressWhenStackOpened
+            onStateChange={({ open }: { open: boolean }) => setOpen(open)}
+            onPress={() => {
+              if (toggleStackOnLongPress) {
+                isWeb ? alert('Fab is Pressed') : Alert.alert('Fab is Pressed');
+                // do something on press when the speed dial is closed
+              } else if (open) {
+                isWeb ? alert('Fab is Pressed') : Alert.alert('Fab is Pressed');
+                // do something if the speed dial is open
+              }
+            }}
+            onLongPress={() => {
+              if (!toggleStackOnLongPress || open) {
+                isWeb
+                  ? alert('Fab is Long Pressed')
+                  : Alert.alert('Fab is Long Pressed');
+                // do something if the speed dial is open
+              }
+            }}
+            visible={visible}
+          />
+        </Portal>
+      </View>
+    </ScreenWrapper>
+  );
+};
+
+FABExample.title = 'Floating Action Button';
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 4,
+  },
+  row: {
+    marginBottom: 8,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  column: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  fab: {
+    margin: 8,
+  },
+  fabVariant: {
+    flex: 1,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+});
+
+export default FABExample;

package/Examples/SampleUI/src/Examples/IconButtonExample.tsx

@@ -0,0 +1,230 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { IconButton, List, MD2Colors, MD3Colors } from 'react-native-paper';
+
+import { useExampleTheme } from '..';
+import ScreenWrapper from '../ScreenWrapper';
+
+const ButtonExample = () => {
+  const { isV3 } = useExampleTheme();
+  if (!isV3) {
+    return (
+      <ScreenWrapper contentContainerStyle={styles.v2Container}>
+        <IconButton icon="camera" size={24} onPress={() => {}} />
+        <IconButton
+          icon="lock"
+          size={24}
+          iconColor={MD2Colors.green500}
+          onPress={() => {}}
+        />
+        <IconButton icon="" size={24} onPress={() => {}} loading />
+        <IconButton icon="camera" size={36} onPress={() => {}} />
+        <IconButton
+          icon="lock"
+          size={36}
+          onPress={() => {}}
+          style={{ backgroundColor: MD2Colors.lightGreen200 }}
+        />
+        <IconButton icon="heart" size={60} onPress={() => {}} />
+      </ScreenWrapper>
+    );
+  }
+
+  return (
+    <ScreenWrapper contentContainerStyle={styles.v3Container}>
+      <List.Section title="Default">
+        <View style={styles.row}>
+          <IconButton icon="camera" size={24} onPress={() => {}} />
+          <IconButton icon="camera" selected size={24} onPress={() => {}} />
+          <IconButton icon="camera" disabled size={24} onPress={() => {}} />
+          <IconButton icon="camera" size={24} onPress={() => {}} loading />
+        </View>
+      </List.Section>
+
+      <List.Section title="Contained">
+        <View style={styles.row}>
+          <IconButton
+            icon="camera"
+            mode="contained"
+            size={24}
+            onPress={() => {}}
+          />
+          <IconButton
+            icon="camera"
+            mode="contained"
+            selected
+            size={24}
+            onPress={() => {}}
+          />
+          <IconButton
+            icon="camera"
+            mode="contained"
+            disabled
+            size={24}
+            onPress={() => {}}
+          />
+          <IconButton
+            icon=""
+            mode="contained"
+            selected
+            loading
+            size={24}
+            onPress={() => {}}
+          />
+        </View>
+      </List.Section>
+
+      <List.Section title="Contained-tonal">
+        <View style={styles.row}>
+          <IconButton
+            icon="camera"
+            mode="contained-tonal"
+            size={24}
+            onPress={() => {}}
+          />
+          <IconButton
+            icon="camera"
+            selected
+            mode="contained-tonal"
+            size={24}
+            onPress={() => {}}
+          />
+          <IconButton
+            icon="camera"
+            mode="contained-tonal"
+            disabled
+            size={24}
+            onPress={() => {}}
+          />
+          <IconButton
+            icon=""
+            mode="contained-tonal"
+            disabled
+            size={24}
+            onPress={() => {}}
+            loading
+          />
+        </View>
+      </List.Section>
+
+      <List.Section title="Outlined">
+        <View style={styles.row}>
+          <IconButton
+            icon="camera-outline"
+            mode="outlined"
+            size={24}
+            onPress={() => {}}
+          />
+          <IconButton
+            selected
+            icon="camera"
+            mode="outlined"
+            size={24}
+            onPress={() => {}}
+          />
+          <IconButton
+            icon="camera"
+            mode="outlined"
+            disabled
+            size={24}
+            onPress={() => {}}
+          />
+          <IconButton
+            icon=""
+            mode="outlined"
+            disabled
+            size={24}
+            onPress={() => {}}
+            loading
+          />
+        </View>
+      </List.Section>
+
+      <List.Section title="Custom">
+        <View style={styles.row}>
+          <IconButton
+            icon="lock"
+            size={24}
+            iconColor={MD3Colors.tertiary50}
+            onPress={() => {}}
+          />
+          <IconButton
+            icon="eye"
+            mode="contained"
+            style={styles.square}
+            size={24}
+            iconColor={MD3Colors.tertiary50}
+            onPress={() => {}}
+          />
+          <IconButton
+            icon="eye"
+            mode="contained"
+            style={styles.slightlyRounded}
+            size={24}
+            contentStyle={{ padding: 8 }}
+            iconColor={MD3Colors.tertiary50}
+            onPress={() => {}}
+          />
+          <IconButton
+            icon="heart"
+            mode="contained-tonal"
+            style={styles.differentBorderRadius}
+            size={24}
+            iconColor={MD3Colors.tertiary50}
+            onPress={() => {}}
+          />
+          <IconButton
+            icon="heart"
+            mode="outlined"
+            style={styles.differentBorderRadius}
+            size={24}
+            iconColor={MD3Colors.tertiary50}
+            onPress={() => {}}
+          />
+          <IconButton icon="camera" size={36} onPress={() => {}} />
+          <IconButton
+            icon="lock"
+            size={36}
+            onPress={() => {}}
+            containerColor={MD3Colors.tertiary60}
+          />
+          <IconButton icon="heart" size={60} onPress={() => {}} />
+          <IconButton icon="" size={60} onPress={() => {}} loading />
+        </View>
+      </List.Section>
+    </ScreenWrapper>
+  );
+};
+
+ButtonExample.title = 'Icon Button';
+
+const styles = StyleSheet.create({
+  v2Container: {
+    flexDirection: 'row',
+    padding: 8,
+  },
+  v3Container: {
+    flexDirection: 'column',
+  },
+  row: {
+    flexDirection: 'row',
+    paddingHorizontal: 12,
+  },
+  square: {
+    borderRadius: 0,
+  },
+  slightlyRounded: {
+    borderRadius: 4,
+    width: 48,
+    height: 48,
+  },
+  differentBorderRadius: {
+    borderTopLeftRadius: 2,
+    borderTopRightRadius: 4,
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 6,
+  },
+});
+
+export default ButtonExample;

package/Examples/SampleUI/src/Examples/IconExample.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { StyleSheet, View, Image } from 'react-native';
+
+import { Icon, List } from 'react-native-paper';
+
+import ScreenWrapper from '../ScreenWrapper';
+
+const AssetIcon = ({ size, testID }: { size: number; testID: string }) => (
+  <Image
+    accessibilityIgnoresInvertColors
+    source={require('../../assets/images/paper-icon.png')}
+    style={{ width: size, height: size }}
+    testID={testID}
+  />
+);
+
+const IconExample = () => {
+  return (
+    <ScreenWrapper>
+      <List.Section title="Default icon (MaterialCommunityIcon)">
+        <View style={styles.row}>
+          <Icon source="camera" size={24} />
+        </View>
+      </List.Section>
+      <List.Section title="Image icon">
+        <View style={styles.row}>
+          <Icon source={{ uri: 'https://picsum.photos/700' }} size={48} />
+        </View>
+      </List.Section>
+      <List.Section title="Render function icon">
+        <View style={styles.row}>
+          <Icon source={AssetIcon} size={48} />
+        </View>
+      </List.Section>
+    </ScreenWrapper>
+  );
+};
+
+IconExample.title = 'Icon';
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    marginLeft: 16,
+  },
+});
+
+export default IconExample;

package/Examples/SampleUI/src/Examples/ListAccordionExample.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+
+import { List, Divider } from 'react-native-paper';
+
+import ScreenWrapper from '../ScreenWrapper';
+
+const ListAccordionExample = () => {
+  const [expanded, setExpanded] = React.useState<boolean>(true);
+
+  const _handlePress = () => {
+    setExpanded(!expanded);
+  };
+
+  return (
+    <ScreenWrapper>
+      <List.Section title="Expandable list item">
+        <List.Accordion
+          left={(props) => <List.Icon {...props} icon="folder" />}
+          title="Expandable list item"
+        >
+          <List.Item title="List item 1" />
+          <List.Item title="List item 2" />
+        </List.Accordion>
+        <List.Accordion
+          left={(props) => <List.Icon {...props} icon="folder" />}
+          title="Start expanded"
+          expanded={expanded}
+          onPress={_handlePress}
+        >
+          <List.Item title="List item 1" />
+        </List.Accordion>
+      </List.Section>
+      <Divider />
+      <List.Section title="Expandable & multiline list item">
+        <List.Accordion
+          title="Expandable list item"
+          description="Describes the expandable list item"
+        >
+          <List.Item title="List item 1" />
+          <List.Item title="List item 2" />
+        </List.Accordion>
+      </List.Section>
+      <Divider />
+      <List.Section title="Expandable list with icons">
+        <List.Accordion
+          left={(props) => <List.Icon {...props} icon="star" />}
+          title="Accordion item 1"
+        >
+          <List.Item
+            left={(props) => <List.Icon {...props} icon="thumb-up" />}
+            title="List item 1"
+          />
+          <List.Item
+            left={(props) => <List.Icon {...props} icon="thumb-down" />}
+            title="List item 2"
+          />
+        </List.Accordion>
+      </List.Section>
+    </ScreenWrapper>
+  );
+};
+
+ListAccordionExample.title = 'List.Accordion';
+
+export default ListAccordionExample;

package/Examples/SampleUI/src/Examples/ListAccordionGroupExample.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+
+import { List } from 'react-native-paper';
+
+import ScreenWrapper from '../ScreenWrapper';
+
+type State = string | number | undefined;
+
+const ListAccordionGroupExample = () => {
+  const [expandedId, setExpandedId] = React.useState<State>(undefined);
+
+  const _onAccordionPress = (newExpandedId: string | number) =>
+    expandedId === newExpandedId
+      ? setExpandedId(undefined)
+      : setExpandedId(newExpandedId);
+
+  return (
+    <ScreenWrapper>
+      <List.AccordionGroup>
+        <List.Section title="Uncontrolled Accordion Group example">
+          <List.Accordion
+            left={(props) => <List.Icon {...props} icon="folder" />}
+            title="Expandable list item"
+            id="1"
+          >
+            <List.Item title="List item 1" />
+            <List.Item title="List item 2" />
+          </List.Accordion>
+          <List.Accordion
+            left={(props) => <List.Icon {...props} icon="folder" />}
+            title="Expandable list item 2"
+            id="2"
+          >
+            <List.Item title="List item 1" />
+          </List.Accordion>
+          <List.Accordion
+            left={(props) => <List.Icon {...props} icon="folder" />}
+            title="Expandable list item 2"
+            id="3"
+          >
+            <List.Item title="Another item" />
+          </List.Accordion>
+        </List.Section>
+      </List.AccordionGroup>
+      <List.AccordionGroup
+        expandedId={expandedId}
+        onAccordionPress={_onAccordionPress}
+      >
+        <List.Section title="Controlled Accordion Group example">
+          <List.Accordion
+            left={(props) => <List.Icon {...props} icon="folder" />}
+            title="Expandable list item"
+            id="1"
+          >
+            <List.Item title="List item 1" />
+            <List.Item title="List item 2" />
+          </List.Accordion>
+          <List.Accordion
+            left={(props) => <List.Icon {...props} icon="folder" />}
+            title="Expandable list item 2"
+            id="2"
+          >
+            <List.Item title="List item 1" />
+          </List.Accordion>
+          <List.Accordion
+            left={(props) => <List.Icon {...props} icon="folder" />}
+            title="Expandable list item 2"
+            id="3"
+          >
+            <List.Item title="Another item" />
+          </List.Accordion>
+        </List.Section>
+      </List.AccordionGroup>
+    </ScreenWrapper>
+  );
+};
+
+ListAccordionGroupExample.title = 'List.AccordionGroup';
+
+export default ListAccordionGroupExample;