react-native-acoustic-connect-beta 19.0.25 → 19.0.27

package/Examples/SampleUI/src/Examples/ButtonExample.tsx

@@ -1,405 +0,0 @@
-import * as React from 'react';
-import { Image, StyleSheet, View } from 'react-native';
-
-import { Button, List, Text } from 'react-native-paper';
-
-import { useExampleTheme } from '..';
-import ScreenWrapper from '../ScreenWrapper';
-
-const ButtonExample = () => {
-  const theme = useExampleTheme();
-
-  const color = theme.isV3 ? theme.colors.inversePrimary : theme.colors.accent;
-
-  return (
-    <ScreenWrapper>
-      <List.Section title={`Text button ${theme.isV3 ? '(text)' : ''}`}>
-        <View style={styles.row}>
-          <Button onPress={() => {}} style={styles.button}>
-            Default
-          </Button>
-          <Button textColor={color} onPress={() => {}} style={styles.button}>
-            Custom
-          </Button>
-          <Button disabled onPress={() => {}} style={styles.button}>
-            Disabled
-          </Button>
-          <Button icon="camera" onPress={() => {}} style={styles.button}>
-            Icon
-          </Button>
-          <Button loading onPress={() => {}} style={styles.button}>
-            Loading
-          </Button>
-          <Button
-            icon="camera"
-            onPress={() => {}}
-            style={styles.button}
-            contentStyle={styles.flexReverse}
-          >
-            Icon right
-          </Button>
-        </View>
-      </List.Section>
-      {theme.isV3 && (
-        <List.Section title="Contained-tonal button (tonal)">
-          <View style={styles.row}>
-            <Button
-              mode="contained-tonal"
-              onPress={() => {}}
-              style={styles.button}
-            >
-              Default
-            </Button>
-            <Button
-              mode="contained-tonal"
-              buttonColor={color}
-              onPress={() => {}}
-              style={styles.button}
-            >
-              Custom
-            </Button>
-            <Button
-              mode="contained-tonal"
-              disabled
-              onPress={() => {}}
-              style={styles.button}
-            >
-              Disabled
-            </Button>
-            <Button
-              mode="contained-tonal"
-              icon="camera"
-              onPress={() => {}}
-              style={styles.button}
-            >
-              Icon
-            </Button>
-            <Button
-              mode="contained-tonal"
-              loading
-              onPress={() => {}}
-              style={styles.button}
-            >
-              Loading
-            </Button>
-            <Button
-              mode="contained-tonal"
-              icon="camera"
-              onPress={() => {}}
-              style={styles.button}
-              contentStyle={styles.flexReverse}
-            >
-              Icon right
-            </Button>
-          </View>
-        </List.Section>
-      )}
-      <List.Section title={`Outlined button ${theme.isV3 ? '(outlined)' : ''}`}>
-        <View style={styles.row}>
-          <Button mode="outlined" onPress={() => {}} style={styles.button}>
-            Default
-          </Button>
-          <Button
-            mode="outlined"
-            textColor={color}
-            onPress={() => {}}
-            style={styles.button}
-          >
-            Custom
-          </Button>
-          <Button
-            mode="outlined"
-            disabled
-            onPress={() => {}}
-            style={styles.button}
-          >
-            Disabled
-          </Button>
-          <Button
-            mode="outlined"
-            icon="camera"
-            onPress={() => {}}
-            style={styles.button}
-          >
-            Icon
-          </Button>
-          <Button
-            mode="outlined"
-            loading
-            onPress={() => {}}
-            style={styles.button}
-          >
-            Loading
-          </Button>
-          <Button
-            mode="outlined"
-            icon="camera"
-            onPress={() => {}}
-            style={styles.button}
-            contentStyle={styles.flexReverse}
-          >
-            Icon right
-          </Button>
-        </View>
-      </List.Section>
-      <List.Section title={`Contained button ${theme.isV3 ? '(filled)' : ''}`}>
-        <View style={styles.row}>
-          <Button mode="contained" onPress={() => {}} style={styles.button}>
-            Default
-          </Button>
-          <Button
-            mode="contained"
-            buttonColor={color}
-            onPress={() => {}}
-            style={styles.button}
-          >
-            Custom
-          </Button>
-          <Button
-            mode="contained"
-            disabled
-            onPress={() => {}}
-            style={styles.button}
-          >
-            Disabled
-          </Button>
-          <Button
-            mode="contained"
-            icon="camera"
-            onPress={() => {}}
-            style={styles.button}
-          >
-            Icon
-          </Button>
-          <Button
-            mode="contained"
-            loading
-            onPress={() => {}}
-            style={styles.button}
-          >
-            Loading
-          </Button>
-          <Button
-            mode="contained"
-            icon="camera"
-            onPress={() => {}}
-            style={styles.button}
-            contentStyle={styles.flexReverse}
-          >
-            Icon right
-          </Button>
-        </View>
-      </List.Section>
-      {theme.isV3 && (
-        <List.Section title={'Elevated button (elevated)'}>
-          <View style={styles.row}>
-            <Button mode="elevated" onPress={() => {}} style={styles.button}>
-              Default
-            </Button>
-            <Button
-              mode="elevated"
-              buttonColor={color}
-              onPress={() => {}}
-              style={styles.button}
-            >
-              Custom
-            </Button>
-            <Button
-              mode="elevated"
-              disabled
-              onPress={() => {}}
-              style={styles.button}
-            >
-              Disabled
-            </Button>
-            <Button
-              mode="elevated"
-              icon="camera"
-              onPress={() => {}}
-              style={styles.button}
-            >
-              Icon
-            </Button>
-            <Button
-              mode="elevated"
-              loading
-              onPress={() => {}}
-              style={styles.button}
-            >
-              Loading
-            </Button>
-            <Button
-              mode="elevated"
-              icon="camera"
-              onPress={() => {}}
-              style={styles.button}
-              contentStyle={styles.flexReverse}
-            >
-              Icon right
-            </Button>
-          </View>
-        </List.Section>
-      )}
-      <List.Section title="Custom">
-        <View style={styles.row}>
-          <Button
-            mode="outlined"
-            icon={{
-              uri: 'https://avatars0.githubusercontent.com/u/17571969?v=3&s=400',
-            }}
-            onPress={() => {}}
-            style={styles.button}
-          >
-            Remote image
-          </Button>
-          <Button
-            mode="outlined"
-            icon={require('../../assets/images/favorite.png')}
-            onPress={() => {}}
-            style={styles.button}
-          >
-            Required asset
-          </Button>
-          <Button
-            mode="outlined"
-            icon={({ size }) => (
-              <Image
-                source={require('../../assets/images/chameleon.jpg')}
-                style={{ width: size, height: size, borderRadius: size / 2 }}
-                accessibilityIgnoresInvertColors
-              />
-            )}
-            onPress={() => {}}
-            style={styles.button}
-          >
-            Custom component
-          </Button>
-          <Button
-            icon="heart"
-            mode="outlined"
-            onPress={() => {}}
-            style={styles.button}
-            labelStyle={[styles.fontStyles, theme.isV3 && styles.md3FontStyles]}
-          >
-            Custom Font
-          </Button>
-          <Button mode="outlined" onPress={() => {}} style={styles.button}>
-            <Text variant="titleLarge">Custom text</Text>
-          </Button>
-          <Button
-            mode="outlined"
-            onPress={() => {}}
-            style={styles.customRadius}
-          >
-            Custom radius
-          </Button>
-          <Button mode="contained" onPress={() => {}} style={styles.noRadius}>
-            Without radius
-          </Button>
-          <Button
-            mode="contained-tonal"
-            onPress={() => {}}
-            style={{ borderRadius: styles.customRadiusAndPadding.borderRadius }}
-            contentStyle={styles.customRadiusAndPadding}
-          >
-            Custom radius and padding
-          </Button>
-        </View>
-
-        <View style={styles.row}>
-          <Button
-            mode="contained"
-            onPress={() => {}}
-            style={styles.flexGrow1Button}
-          >
-            flex-grow: 1
-          </Button>
-        </View>
-        <View style={styles.row}>
-          <Button
-            mode="contained"
-            onPress={() => {}}
-            style={styles.width100PercentButton}
-          >
-            width: 100%
-          </Button>
-        </View>
-      </List.Section>
-      <List.Section title="Compact">
-        <View style={styles.row}>
-          {(
-            [
-              'text',
-              'outlined',
-              'contained',
-              'elevated',
-              'contained-tonal',
-            ] as const
-          ).map((mode) => {
-            return (
-              <Button
-                key={mode}
-                mode={mode}
-                compact
-                onPress={() => {}}
-                style={styles.button}
-                icon="camera"
-              >
-                Compact {mode}
-              </Button>
-            );
-          })}
-        </View>
-      </List.Section>
-    </ScreenWrapper>
-  );
-};
-
-ButtonExample.title = 'Button';
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    paddingHorizontal: 12,
-    alignItems: 'center',
-    gap: 12,
-  },
-  button: {
-    margin: 4,
-  },
-  flexReverse: {
-    flexDirection: 'row-reverse',
-  },
-  md3FontStyles: {
-    lineHeight: 32,
-  },
-  fontStyles: {
-    fontWeight: '800',
-    fontSize: 24,
-  },
-  flexGrow1Button: {
-    flexGrow: 1,
-    marginTop: 10,
-  },
-  width100PercentButton: {
-    width: '100%',
-    marginTop: 10,
-  },
-  customRadius: {
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 0,
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 16,
-  },
-  noRadius: {
-    borderRadius: 0,
-  },
-  customRadiusAndPadding: {
-    borderRadius: 4,
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-  },
-});
-
-export default ButtonExample;

package/Examples/SampleUI/src/Examples/CardExample.tsx

@@ -1,245 +0,0 @@
-import * as React from 'react';
-import { Alert, ScrollView, StyleSheet, View } from 'react-native';
-
-import {
-  Avatar,
-  Button,
-  Card,
-  Chip,
-  IconButton,
-  Paragraph,
-  Text,
-} from 'react-native-paper';
-
-import { PreferencesContext, useExampleTheme } from '..';
-import { isWeb } from '../../utils';
-import ScreenWrapper from '../ScreenWrapper';
-
-type Mode = 'elevated' | 'outlined' | 'contained';
-
-const CardExample = () => {
-  const { colors, isV3 } = useExampleTheme();
-  const [selectedMode, setSelectedMode] = React.useState('elevated' as Mode);
-  const [isSelected, setIsSelected] = React.useState(false);
-  const preferences = React.useContext(PreferencesContext);
-
-  const modes = isV3
-    ? ['elevated', 'outlined', 'contained']
-    : ['elevated', 'outlined'];
-
-  const TextComponent = isV3 ? Text : Paragraph;
-
-  return (
-    <ScreenWrapper contentContainerStyle={styles.content}>
-      <View style={styles.preference}>
-        {(modes as Mode[]).map((mode) => (
-          <Chip
-            key={mode}
-            selected={selectedMode === mode}
-            mode="outlined"
-            onPress={() => setSelectedMode(mode)}
-            style={styles.chip}
-          >
-            {mode}
-          </Chip>
-        ))}
-      </View>
-      <ScrollView
-        style={[styles.container, { backgroundColor: colors?.background }]}
-        contentContainerStyle={styles.content}
-      >
-        <Card style={styles.card} mode={selectedMode}>
-          <Card.Cover
-            source={require('../../assets/images/wrecked-ship.jpg')}
-          />
-          <Card.Title title="Abandoned Ship" />
-          <Card.Content>
-            <TextComponent variant="bodyMedium">
-              The Abandoned Ship is a wrecked ship located on Route 108 in
-              Hoenn, originally being a ship named the S.S. Cactus. The second
-              part of the ship can only be accessed by using Dive and contains
-              the Scanner.
-            </TextComponent>
-          </Card.Content>
-        </Card>
-        {isV3 && (
-          <Card style={styles.card} mode={selectedMode}>
-            <Card.Cover source={require('../../assets/images/bridge.jpg')} />
-            <Card.Title
-              title="Title variant"
-              subtitle="Subtitle variant"
-              titleVariant="headlineMedium"
-              subtitleVariant="bodyLarge"
-            />
-            <Card.Content>
-              <TextComponent variant="bodyMedium">
-                This is a card using title and subtitle with specified variants.
-              </TextComponent>
-            </Card.Content>
-          </Card>
-        )}
-        <Card style={styles.card} mode={selectedMode}>
-          <Card.Cover source={require('../../assets/images/forest.jpg')} />
-          <Card.Actions>
-            <Button onPress={() => {}}>Share</Button>
-            <Button onPress={() => {}}>Explore</Button>
-          </Card.Actions>
-        </Card>
-        <Card style={styles.card} mode={selectedMode}>
-          <Card.Title
-            title="Berries that are trimmed at the end"
-            subtitle="Omega Ruby"
-            left={(props: any) => <Avatar.Icon {...props} icon="folder" />}
-            right={(props: any) => (
-              <IconButton {...props} icon="dots-vertical" onPress={() => {}} />
-            )}
-          />
-          <Card.Content>
-            <TextComponent variant="bodyMedium">
-              Dotted around the Hoenn region, you will find loamy soil, many of
-              which are housing berries. Once you have picked the berries, then
-              you have the ability to use that loamy soil to grow your own
-              berries. These can be any berry and will require attention to get
-              the best crop.
-            </TextComponent>
-          </Card.Content>
-        </Card>
-        <Card style={styles.card} mode={selectedMode}>
-          <Card.Cover
-            source={require('../../assets/images/restaurant-1.jpg')}
-          />
-          <Card.Title title="Custom Button styles" />
-          <Card.Actions>
-            <Button style={styles.button} onPress={() => {}}>
-              Share
-            </Button>
-            <Button style={styles.button} onPress={() => {}}>
-              Explore
-            </Button>
-          </Card.Actions>
-        </Card>
-        <Card
-          style={[styles.card, styles.customCardRadius]}
-          mode={selectedMode}
-        >
-          <Card.Title
-            title="Custom border radius"
-            subtitle="... for card and cover"
-          />
-          <Card.Cover
-            source={require('../../assets/images/artist-2.jpg')}
-            style={styles.customCoverRadius}
-          />
-        </Card>
-        <Card style={styles.card} mode={selectedMode}>
-          <Card.Cover
-            source={require('../../assets/images/strawberries.jpg')}
-          />
-          <Card.Title
-            title="Just Strawberries"
-            subtitle="... and only Strawberries"
-            right={(props: any) => (
-              <IconButton
-                {...props}
-                icon={isSelected ? 'heart' : 'heart-outline'}
-                onPress={() => setIsSelected(!isSelected)}
-              />
-            )}
-          />
-        </Card>
-        <Card
-          style={styles.card}
-          onPress={() => {
-            isWeb
-              ? alert('The Chameleon is Pressed')
-              : Alert.alert('The Chameleon is Pressed');
-          }}
-          mode={selectedMode}
-        >
-          <Card.Cover source={require('../../assets/images/chameleon.jpg')} />
-          <Card.Title title="Pressable Chameleon" />
-          <Card.Content>
-            <TextComponent variant="bodyMedium">
-              This is a pressable chameleon. If you press me, I will alert.
-            </TextComponent>
-          </Card.Content>
-        </Card>
-        <Card
-          style={styles.card}
-          onLongPress={() => {
-            isWeb
-              ? alert('The City is Long Pressed')
-              : Alert.alert('The City is Long Pressed');
-          }}
-          mode={selectedMode}
-        >
-          <Card.Cover source={require('../../assets/images/city.jpg')} />
-          <Card.Title
-            title="Long Pressable City"
-            left={(props) => <Avatar.Icon {...props} icon="city" />}
-          />
-          <Card.Content>
-            <TextComponent variant="bodyMedium">
-              This is a long press only city. If you long press me, I will
-              alert.
-            </TextComponent>
-          </Card.Content>
-        </Card>
-        <Card
-          style={styles.card}
-          onPress={() => {
-            preferences?.toggleTheme();
-          }}
-          mode={selectedMode}
-        >
-          <Card.Title
-            title="Pressable Theme Change"
-            left={(props) => <Avatar.Icon {...props} icon="format-paint" />}
-          />
-          <Card.Content>
-            <TextComponent variant="bodyMedium">
-              This is pressable card. If you press me, I will switch the theme.
-            </TextComponent>
-          </Card.Content>
-        </Card>
-      </ScrollView>
-    </ScreenWrapper>
-  );
-};
-
-CardExample.title = 'Card';
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  content: {
-    padding: 4,
-  },
-  card: {
-    margin: 4,
-  },
-  chip: {
-    margin: 4,
-  },
-  preference: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    paddingVertical: 12,
-    paddingHorizontal: 8,
-  },
-  button: {
-    borderRadius: 12,
-  },
-  customCardRadius: {
-    borderTopLeftRadius: 24,
-    borderBottomRightRadius: 24,
-  },
-  customCoverRadius: {
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 24,
-  },
-});
-
-export default CardExample;