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

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

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

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