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

package/Examples/SampleUI/src/Examples/SegmentedButtons/SegmentedButtonOnlyIconsWithCheck.tsx

@@ -1,43 +0,0 @@
-import * as React from 'react';
-import { StyleSheet } from 'react-native';
-
-import { List, SegmentedButtons } from 'react-native-paper';
-
-type TransportMode = 'walk' | 'transit' | 'drive';
-
-const SegmentedButtonOnlyIconsWithCheck = () => {
-  const [value, setValue] = React.useState<TransportMode>('walk');
-
-  return (
-    <List.Section title={`Segmented Button - icons + show selected check`}>
-      <SegmentedButtons
-        onValueChange={setValue}
-        style={styles.group}
-        value={value}
-        buttons={[
-          {
-            icon: 'walk',
-            value: 'walk',
-            showSelectedCheck: true,
-          },
-          {
-            icon: 'train',
-            value: 'transit',
-            showSelectedCheck: true,
-          },
-          {
-            icon: 'car',
-            value: 'drive',
-            showSelectedCheck: true,
-          },
-        ]}
-      />
-    </List.Section>
-  );
-};
-
-const styles = StyleSheet.create({
-  group: { paddingHorizontal: 20, justifyContent: 'center' },
-});
-
-export default SegmentedButtonOnlyIconsWithCheck;

package/Examples/SampleUI/src/Examples/SegmentedButtons/SegmentedButtonRealCase.tsx

@@ -1,97 +0,0 @@
-import * as React from 'react';
-import { FlatList, StyleSheet, View } from 'react-native';
-
-import { Card, IconButton, SegmentedButtons } from 'react-native-paper';
-
-import { songsData, albumsData } from '../../../utils';
-
-type MediaType = 'songs' | 'albums';
-
-const SegmentedButtonRealCase = () => {
-  const [value, setValue] = React.useState<MediaType>('songs');
-
-  return (
-    <View style={styles.container}>
-      <SegmentedButtons
-        value={value}
-        onValueChange={setValue}
-        buttons={[
-          {
-            value: 'songs',
-            label: 'Songs',
-            style: styles.button,
-            showSelectedCheck: true,
-          },
-          {
-            value: 'albums',
-            label: 'Albums',
-            style: styles.button,
-            showSelectedCheck: true,
-          },
-        ]}
-        style={styles.group}
-      />
-      <FlatList
-        data={value === 'songs' ? songsData : albumsData}
-        keyExtractor={(item) => item.id}
-        contentContainerStyle={styles.contentContainer}
-        renderItem={({ item }) => {
-          return (
-            <Card mode="contained" style={styles.card}>
-              <Card.Content style={styles.content}>
-                <Card.Cover style={styles.cover} source={item.cover} />
-                <Card.Title
-                  title={item.title}
-                  subtitle={item.artist}
-                  titleVariant="titleMedium"
-                  style={styles.title}
-                  right={() => <IconButton icon={'bookmark-outline'} />}
-                />
-              </Card.Content>
-            </Card>
-          );
-        }}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    marginVertical: 16,
-    flex: 1,
-  },
-  contentContainer: {
-    paddingBottom: 16,
-  },
-  card: {
-    marginHorizontal: 16,
-    marginTop: 16,
-  },
-  content: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 0,
-    paddingVertical: 0,
-  },
-  cover: {
-    width: 72,
-    height: 72,
-  },
-  title: {
-    flexShrink: 1,
-    marginVertical: 0,
-  },
-  button: {
-    flex: 1,
-  },
-  group: {
-    paddingHorizontal: 20,
-    justifyContent: 'center',
-    paddingBottom: 8,
-  },
-});
-
-SegmentedButtonRealCase.title = 'Music player';
-
-export default SegmentedButtonRealCase;

package/Examples/SampleUI/src/Examples/SegmentedButtons/SegmentedButtonWithDensity.tsx

@@ -1,47 +0,0 @@
-import * as React from 'react';
-import { StyleSheet } from 'react-native';
-
-import { List, SegmentedButtons } from 'react-native-paper';
-
-type TransportMode = 'walk' | 'transit' | 'drive';
-
-const SegmentedButtonWithDensity = () => {
-  const [value, setValue] = React.useState<TransportMode>('walk');
-
-  return (
-    <List.Section title={`Segmented Button - only labels + density`}>
-      <SegmentedButtons
-        onValueChange={setValue}
-        value={value}
-        density="medium"
-        style={styles.group}
-        buttons={[
-          {
-            style: styles.button,
-            value: 'walk',
-            label: 'Walking',
-          },
-          {
-            style: styles.button,
-            value: 'transit',
-            label: 'Transit',
-          },
-          {
-            style: styles.button,
-            value: 'drive',
-            label: 'Driving',
-          },
-        ]}
-      />
-    </List.Section>
-  );
-};
-
-const styles = StyleSheet.create({
-  button: {
-    flex: 1,
-  },
-  group: { paddingHorizontal: 20, justifyContent: 'center' },
-});
-
-export default SegmentedButtonWithDensity;

package/Examples/SampleUI/src/Examples/SegmentedButtons/SegmentedButtonWithSelectedCheck.tsx

@@ -1,52 +0,0 @@
-import * as React from 'react';
-import { StyleSheet } from 'react-native';
-
-import { List, SegmentedButtons } from 'react-native-paper';
-
-type TransportMode = 'walk' | 'train' | 'drive';
-
-const SegmentedButtonWithSelectedCheck = () => {
-  const [value, setValue] = React.useState<TransportMode>('walk');
-
-  return (
-    <List.Section title={`Segmented Button - show selected check`}>
-      <SegmentedButtons
-        onValueChange={setValue}
-        value={value}
-        style={styles.group}
-        buttons={[
-          {
-            icon: 'walk',
-            value: 'walk',
-            label: 'Walking',
-            showSelectedCheck: true,
-            style: styles.button,
-          },
-          {
-            icon: 'train',
-            value: 'train',
-            label: 'Transit',
-            showSelectedCheck: true,
-            style: styles.button,
-          },
-          {
-            icon: 'car',
-            value: 'drive',
-            label: 'Driving',
-            showSelectedCheck: true,
-            style: styles.button,
-          },
-        ]}
-      />
-    </List.Section>
-  );
-};
-
-const styles = StyleSheet.create({
-  button: {
-    flex: 1,
-  },
-  group: { paddingHorizontal: 20, justifyContent: 'center' },
-});
-
-export default SegmentedButtonWithSelectedCheck;

package/Examples/SampleUI/src/Examples/SegmentedButtons/index.ts

@@ -1,9 +0,0 @@
-export { default as SegmentedButtonDefault } from './SegmentedButtonDefault';
-export { default as SegmentedButtonWithSelectedCheck } from './SegmentedButtonWithSelectedCheck';
-export { default as SegmentedButtonWithDensity } from './SegmentedButtonWithDensity';
-export { default as SegmentedButtonOnlyIcons } from './SegmentedButtonOnlyIcons';
-export { default as SegmentedButtonOnlyIconsWithCheck } from './SegmentedButtonOnlyIconsWithCheck';
-export { default as SegmentedButtonMultiselect } from './SegmentedButtonMultiselect';
-export { default as SegmentedButtonMultiselectIcons } from './SegmentedButtonMultiselectIcons';
-export { default as SegmentedButtonDisabled } from './SegmentedButtonDisabled';
-export { default as SegmentButtonCustomColorCheck } from './SegmentedButtonCustomColorCheck';

package/Examples/SampleUI/src/Examples/SegmentedButtonsExample.tsx

@@ -1,57 +0,0 @@
-import * as React from 'react';
-
-import type { StackNavigationProp } from '@react-navigation/stack';
-import { List } from 'react-native-paper';
-
-import {
-  SegmentedButtonDefault,
-  SegmentedButtonDisabled,
-  SegmentedButtonMultiselect,
-  SegmentedButtonMultiselectIcons,
-  SegmentedButtonOnlyIcons,
-  SegmentedButtonOnlyIconsWithCheck,
-  SegmentedButtonWithDensity,
-  SegmentedButtonWithSelectedCheck,
-  SegmentButtonCustomColorCheck,
-} from './SegmentedButtons';
-import ScreenWrapper from '../ScreenWrapper';
-
-type Props = {
-  navigation: StackNavigationProp<{ [key: string]: undefined }>;
-};
-
-const SegmentedButtonExample = ({ navigation }: Props) => {
-  return (
-    <ScreenWrapper>
-      <List.Section title={`Segmented Button Example Usage`}>
-        <List.Item
-          title="Single select"
-          description="Go to the example"
-          onPress={() => navigation.navigate('segmentedButtonRealCase')}
-          right={(props) => <List.Icon {...props} icon="arrow-right" />}
-        />
-        <List.Item
-          title="Multiselect select"
-          description="Go to the example"
-          onPress={() =>
-            navigation.navigate('segmentedButtonMultiselectRealCase')
-          }
-          right={(props) => <List.Icon {...props} icon="arrow-right" />}
-        />
-      </List.Section>
-      <SegmentedButtonDefault />
-      <SegmentedButtonWithSelectedCheck />
-      <SegmentedButtonOnlyIconsWithCheck />
-      <SegmentedButtonWithDensity />
-      <SegmentedButtonOnlyIcons />
-      <SegmentedButtonMultiselect />
-      <SegmentedButtonMultiselectIcons />
-      <SegmentButtonCustomColorCheck />
-      <SegmentedButtonDisabled />
-    </ScreenWrapper>
-  );
-};
-
-SegmentedButtonExample.title = 'Segmented Buttons';
-
-export default SegmentedButtonExample;

package/Examples/SampleUI/src/Examples/SnackbarExample.tsx

@@ -1,141 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
-
-import { Snackbar, Button, List, Text, Switch } from 'react-native-paper';
-
-import { PreferencesContext, useExampleTheme } from '..';
-import ScreenWrapper from '../ScreenWrapper';
-
-const SHORT_MESSAGE = 'Single-line snackbar';
-const LONG_MESSAGE =
-  'Snackbar with longer message which does not fit in one line';
-
-const SnackbarExample = () => {
-  const preferences = React.useContext(PreferencesContext);
-  const theme = useExampleTheme();
-
-  const [options, setOptions] = React.useState({
-    showSnackbar: false,
-    showAction: true,
-    showCloseIcon: false,
-    showLongerMessage: false,
-    showLongerAction: false,
-  });
-
-  const {
-    showSnackbar,
-    showAction,
-    showCloseIcon,
-    showLongerMessage,
-    showLongerAction,
-  } = options;
-
-  const action = {
-    label: showLongerAction ? 'Toggle Theme' : 'Action',
-    onPress: () => {
-      preferences?.toggleTheme();
-    },
-  };
-
-  return (
-    <>
-      <ScreenWrapper contentContainerStyle={styles.container}>
-        <List.Section title="Snackbar options">
-          <View style={styles.row}>
-            <Text>Action button</Text>
-            <Switch
-              value={showAction}
-              onValueChange={() =>
-                setOptions({ ...options, showAction: !showAction })
-              }
-            />
-          </View>
-          {theme.isV3 && (
-            <View style={styles.row}>
-              <Text>Close icon button</Text>
-              <Switch
-                value={showCloseIcon}
-                onValueChange={() =>
-                  setOptions({ ...options, showCloseIcon: !showCloseIcon })
-                }
-              />
-            </View>
-          )}
-          <View style={styles.row}>
-            <Text>Longer message</Text>
-            <Switch
-              value={showLongerMessage}
-              onValueChange={() =>
-                setOptions({
-                  ...options,
-                  showLongerMessage: !showLongerMessage,
-                })
-              }
-            />
-          </View>
-          <View style={styles.row}>
-            <Text>Longer action</Text>
-            <Switch
-              value={showLongerAction}
-              onValueChange={() =>
-                setOptions({
-                  ...options,
-                  showLongerAction: !showLongerAction,
-                })
-              }
-            />
-          </View>
-        </List.Section>
-
-        <View style={styles.wrapper}>
-          <Button
-            mode="outlined"
-            onPress={() =>
-              setOptions({ ...options, showSnackbar: !showSnackbar })
-            }
-          >
-            {showSnackbar ? 'Hide' : 'Show'}
-          </Button>
-        </View>
-      </ScreenWrapper>
-      <Snackbar
-        visible={showSnackbar}
-        onDismiss={() => setOptions({ ...options, showSnackbar: false })}
-        action={showAction ? action : undefined}
-        onIconPress={
-          showCloseIcon
-            ? () => setOptions({ ...options, showSnackbar: false })
-            : undefined
-        }
-        duration={Snackbar.DURATION_MEDIUM}
-        style={showLongerAction && styles.longerAction}
-      >
-        {showLongerMessage ? LONG_MESSAGE : SHORT_MESSAGE}
-      </Snackbar>
-    </>
-  );
-};
-
-SnackbarExample.title = 'Snackbar';
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  wrapper: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-  },
-  longerAction: {
-    flexDirection: 'column',
-  },
-});
-
-export default SnackbarExample;

package/Examples/SampleUI/src/Examples/SurfaceExample.tsx

@@ -1,130 +0,0 @@
-import * as React from 'react';
-import { ScrollView, StyleSheet, View } from 'react-native';
-
-import {
-  MD3Elevation,
-  Surface,
-  Text,
-  MD3Colors,
-  List,
-} from 'react-native-paper';
-
-import { useExampleTheme } from '..';
-import ScreenWrapper from '../ScreenWrapper';
-
-const SurfaceExample = () => {
-  const { isV3 } = useExampleTheme();
-  const v2Elevation = [1, 2, 4, 8, 12];
-  const elevationValues = isV3 ? Array.from({ length: 6 }) : v2Elevation;
-
-  const renderSurface = (index: number, mode: 'flat' | 'elevated') => (
-    <Surface
-      key={index}
-      style={[
-        styles.surface,
-        isV3 ? styles.v3Surface : { elevation: v2Elevation[index] },
-      ]}
-      mode={mode}
-      {...(isV3 && { elevation: index as MD3Elevation })}
-    >
-      <Text variant="bodyLarge">
-        {isV3
-          ? `Elevation ${index === 1 ? '(default)' : ''} ${index}`
-          : `${elevationValues[index]}`}
-      </Text>
-    </Surface>
-  );
-
-  return (
-    <ScreenWrapper>
-      <List.Section title="Elevated surface">
-        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-          {elevationValues.map((_, index) => renderSurface(index, 'elevated'))}
-        </ScrollView>
-      </List.Section>
-
-      <List.Section title="Flat surface">
-        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-          {elevationValues.map((_, index) => renderSurface(index, 'flat'))}
-        </ScrollView>
-      </List.Section>
-
-      <List.Section title="Layout">
-        <View style={styles.content}>
-          <View style={styles.horizontalSurfacesContainer}>
-            <Surface style={styles.horizontalSurface}>
-              <Text style={styles.centerText}>Left</Text>
-            </Surface>
-            <Surface style={styles.horizontalSurface}>
-              <Text style={styles.centerText}>Right</Text>
-            </Surface>
-          </View>
-          <View style={styles.verticalSurfacesContainer}>
-            <Surface style={styles.verticalSurface}>
-              <Text style={styles.centerText}>Top</Text>
-            </Surface>
-            <Surface style={styles.verticalSurface}>
-              <Text style={styles.centerText}>Bottom</Text>
-            </Surface>
-          </View>
-        </View>
-      </List.Section>
-    </ScreenWrapper>
-  );
-};
-
-SurfaceExample.title = 'Surface';
-
-const styles = StyleSheet.create({
-  content: {
-    padding: 24,
-    alignItems: 'center',
-  },
-  surface: {
-    margin: 24,
-    height: 80,
-    width: 80,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  v3Surface: {
-    borderRadius: 16,
-    height: 200,
-    width: 200,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-
-  horizontalSurfacesContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    width: '100%',
-    marginBottom: 20,
-    borderColor: MD3Colors.tertiary50,
-    padding: 10,
-    borderWidth: 1,
-  },
-  horizontalSurface: {
-    width: '48%',
-  },
-
-  verticalSurfacesContainer: {
-    height: 400,
-    justifyContent: 'space-between',
-    width: '100%',
-    marginBottom: 100,
-    borderColor: MD3Colors.tertiary50,
-    padding: 10,
-    borderWidth: 1,
-  },
-  verticalSurface: {
-    height: '48%',
-    justifyContent: 'center',
-  },
-
-  centerText: {
-    textAlign: 'center',
-  },
-});
-
-export default SurfaceExample;

package/Examples/SampleUI/src/Examples/SwitchExample.tsx

@@ -1,105 +0,0 @@
-import * as React from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
-
-import {
-  MD2Colors,
-  MD3Colors,
-  Paragraph,
-  Switch,
-  Text,
-  TouchableRipple,
-} from 'react-native-paper';
-
-import { useExampleTheme } from '..';
-import ScreenWrapper from '../ScreenWrapper';
-
-const SwitchExample = () => {
-  const [valueNormal, setNormalValue] = React.useState<boolean>(true);
-  const [valueCustom, setCustomValue] = React.useState<boolean>(true);
-
-  const { isV3 } = useExampleTheme();
-
-  const switchValueNormalLabel = `switch ${
-    valueNormal === true ? 'on' : 'off'
-  }`;
-  const switchValueCustomlLabel = `switch ${
-    valueCustom === true ? 'on' : 'off'
-  }`;
-
-  const TextComponent = isV3 ? Text : Paragraph;
-
-  return Platform.OS === 'android' ? (
-    <ScreenWrapper style={styles.container}>
-      <TouchableRipple onPress={() => setNormalValue(!valueNormal)}>
-        <View style={styles.row}>
-          <TextComponent>Normal {switchValueNormalLabel}</TextComponent>
-          <View pointerEvents="none">
-            <Switch value={valueNormal} />
-          </View>
-        </View>
-      </TouchableRipple>
-      <TouchableRipple onPress={() => setCustomValue(!valueCustom)}>
-        <View style={styles.row}>
-          <TextComponent>Custom {switchValueCustomlLabel}</TextComponent>
-          <View pointerEvents="none">
-            <Switch
-              value={valueCustom}
-              color={isV3 ? MD3Colors.tertiary50 : MD2Colors.blue500}
-            />
-          </View>
-        </View>
-      </TouchableRipple>
-      <View style={styles.row}>
-        <TextComponent>Switch on (disabled)</TextComponent>
-        <Switch disabled value />
-      </View>
-      <View style={styles.row}>
-        <TextComponent>Switch off (disabled)</TextComponent>
-        <Switch disabled />
-      </View>
-    </ScreenWrapper>
-  ) : (
-    <ScreenWrapper style={styles.container}>
-      <View style={styles.row}>
-        <TextComponent>Normal {switchValueNormalLabel}</TextComponent>
-        <Switch
-          value={valueNormal}
-          onValueChange={() => setNormalValue(!valueNormal)}
-        />
-      </View>
-      <View style={styles.row}>
-        <TextComponent>Custom {switchValueCustomlLabel}</TextComponent>
-        <Switch
-          value={valueCustom}
-          onValueChange={() => setCustomValue(!valueCustom)}
-          color={isV3 ? MD3Colors.tertiary50 : MD2Colors.blue500}
-        />
-      </View>
-      <View style={styles.row}>
-        <TextComponent>Switch on (disabled)</TextComponent>
-        <Switch value disabled />
-      </View>
-      <View style={styles.row}>
-        <TextComponent>Switch off (disabled)</TextComponent>
-        <Switch value={false} disabled />
-      </View>
-    </ScreenWrapper>
-  );
-};
-
-SwitchExample.title = 'Switch';
-
-const styles = StyleSheet.create({
-  container: {
-    paddingVertical: 8,
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-  },
-});
-
-export default SwitchExample;