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

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

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

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

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

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

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

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

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

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

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