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

package/Examples/SampleUI/src/Examples/AvatarExample.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { Avatar, List, MD2Colors, MD3Colors } from 'react-native-paper';
+
+import { useExampleTheme } from '..';
+import ScreenWrapper from '../ScreenWrapper';
+
+const AvatarExample = () => {
+  const { isV3 } = useExampleTheme();
+  return (
+    <ScreenWrapper>
+      <List.Section title="Text">
+        <View style={styles.row}>
+          <Avatar.Text
+            style={[
+              styles.avatar,
+              {
+                backgroundColor: isV3 ? MD3Colors.error70 : MD2Colors.yellow500,
+              },
+            ]}
+            label="XD"
+            color={isV3 ? MD3Colors.primary0 : MD2Colors.black}
+          />
+          <Avatar.Text style={styles.avatar} label="XD" />
+          <Avatar.Text style={styles.avatar} label="XD" size={80} />
+        </View>
+      </List.Section>
+      <List.Section title="Icon">
+        <View style={styles.row}>
+          <Avatar.Icon
+            style={[
+              styles.avatar,
+              {
+                backgroundColor: isV3 ? MD3Colors.error70 : MD2Colors.yellow500,
+              },
+            ]}
+            icon="folder"
+            color={isV3 ? MD3Colors.primary0 : MD2Colors.black}
+          />
+          <Avatar.Icon style={styles.avatar} icon="folder" />
+          <Avatar.Icon style={styles.avatar} icon="folder" size={80} />
+        </View>
+      </List.Section>
+      <List.Section title="Image">
+        <View style={styles.row}>
+          <Avatar.Image
+            style={styles.avatar}
+            source={require('../../assets/images/avatar.png')}
+          />
+          <Avatar.Image
+            style={styles.avatar}
+            source={require('../../assets/images/avatar.png')}
+            size={80}
+          />
+        </View>
+      </List.Section>
+    </ScreenWrapper>
+  );
+};
+
+AvatarExample.title = 'Avatar';
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    margin: 8,
+  },
+  avatar: {
+    margin: 8,
+  },
+});
+
+export default AvatarExample;

package/Examples/SampleUI/src/Examples/BadgeExample.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import {
+  Badge,
+  IconButton,
+  List,
+  MD2Colors,
+  MD3Colors,
+  Text,
+  Switch,
+} from 'react-native-paper';
+
+import { useExampleTheme } from '..';
+import ScreenWrapper from '../ScreenWrapper';
+
+const BadgeExample = () => {
+  const [visible, setVisible] = React.useState<boolean>(true);
+  const { isV3 } = useExampleTheme();
+
+  return (
+    <ScreenWrapper>
+      <View style={[styles.row, styles.item]}>
+        <Text style={styles.label} variant="bodyMedium">
+          Show badges
+        </Text>
+        <Switch
+          value={visible}
+          onValueChange={(visible) => setVisible(visible)}
+        />
+      </View>
+      <List.Section title="Text">
+        <View style={styles.row}>
+          <View style={styles.item}>
+            <IconButton icon="palette-swatch" size={36} style={styles.button} />
+            <Badge visible={visible} style={styles.badge}>
+              12
+            </Badge>
+          </View>
+          <View style={styles.item}>
+            <IconButton icon="inbox" size={36} style={styles.button} />
+            <Badge
+              visible={visible}
+              style={[
+                styles.badge,
+                {
+                  backgroundColor: isV3
+                    ? MD3Colors.primary80
+                    : MD2Colors.blue500,
+                },
+              ]}
+            >
+              999+
+            </Badge>
+          </View>
+        </View>
+      </List.Section>
+      <List.Section title="Dot">
+        <View style={styles.row}>
+          <View style={styles.item}>
+            <IconButton icon="book-open" size={36} style={styles.button} />
+            <Badge visible={visible} style={styles.badge} size={isV3 ? 6 : 8} />
+          </View>
+          <View style={styles.item}>
+            <IconButton icon="receipt" size={36} style={styles.button} />
+            <Badge visible={visible} style={styles.badge} size={isV3 ? 6 : 8} />
+          </View>
+        </View>
+      </List.Section>
+    </ScreenWrapper>
+  );
+};
+
+BadgeExample.title = 'Badge';
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  item: {
+    margin: 16,
+  },
+  button: {
+    opacity: 0.6,
+  },
+  badge: {
+    position: 'absolute',
+    top: 4,
+    right: 0,
+  },
+  label: {
+    flex: 1,
+  },
+});
+
+export default BadgeExample;

package/Examples/SampleUI/src/Examples/BannerExample.tsx

@@ -0,0 +1,152 @@
+import * as React from 'react';
+import {
+  Dimensions,
+  Image,
+  LayoutChangeEvent,
+  Platform,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+import { Banner, FAB, MD2Colors, MD3Colors } from 'react-native-paper';
+
+import { useExampleTheme } from '..';
+import ScreenWrapper from '../ScreenWrapper';
+
+const PHOTOS = Array.from({ length: 24 }).map(
+  (_, i) => `https://unsplash.it/300/300/?random&__id=${i}`
+);
+
+const BannerExample = () => {
+  const [visible, setVisible] = React.useState<boolean>(true);
+  const [useCustomTheme, setUseCustomTheme] = React.useState<boolean>(false);
+  const defaultTheme = useExampleTheme();
+
+  const [height, setHeight] = React.useState(0);
+
+  const handleLayout = ({ nativeEvent }: LayoutChangeEvent) => {
+    const { height: layoutHeight } = nativeEvent.layout;
+    setHeight(layoutHeight);
+  };
+
+  const customTheme = !defaultTheme.isV3
+    ? {
+        ...defaultTheme,
+        colors: {
+          text: MD2Colors.white,
+          surface: MD2Colors.blue200,
+          primary: MD2Colors.purple900,
+        },
+      }
+    : {
+        ...defaultTheme,
+        colors: {
+          onSurface: MD3Colors.tertiary100,
+          elevation: {
+            level1: MD3Colors.tertiary50,
+          },
+          primary: MD3Colors.tertiary10,
+        },
+      };
+
+  return (
+    <>
+      <ScreenWrapper>
+        <View style={[styles.grid, { paddingTop: height }]}>
+          {PHOTOS.map((uri) => (
+            <View key={uri} style={styles.item}>
+              <Image
+                source={{ uri }}
+                style={styles.photo}
+                accessibilityIgnoresInvertColors
+              />
+            </View>
+          ))}
+        </View>
+      </ScreenWrapper>
+      <FAB
+        icon="eye"
+        label={visible ? 'Hide banner' : 'Show banner'}
+        style={styles.fab}
+        onPress={() => setVisible(!visible)}
+      />
+      <Banner
+        onLayout={handleLayout}
+        actions={[
+          {
+            label: `Set ${useCustomTheme ? 'default' : 'custom'} theme`,
+            onPress: () => setUseCustomTheme(!useCustomTheme),
+          },
+          {
+            label: 'Fix it',
+            onPress: () => setVisible(false),
+          },
+        ]}
+        icon={require('../../assets/images/email-icon.png')}
+        visible={visible}
+        onShowAnimationFinished={() =>
+          console.log('Completed opening animation')
+        }
+        onHideAnimationFinished={() =>
+          console.log('Completed closing animation')
+        }
+        theme={useCustomTheme ? customTheme : defaultTheme}
+        style={styles.banner}
+      >
+        Two line text string with two actions. One to two lines is preferable on
+        mobile.
+      </Banner>
+    </>
+  );
+};
+
+BannerExample.title = 'Banner';
+
+const styles = StyleSheet.create({
+  ...Platform.select({
+    web: {
+      grid: {
+        // there is no 'grid' type in RN :(
+        display: 'grid' as 'none',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',
+        gridRowGap: '8px',
+        gridColumnGap: '8px',
+        padding: 8,
+      },
+      item: {
+        width: '100%',
+        height: 150,
+      },
+    },
+    default: {
+      grid: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        padding: 4,
+      },
+      item: {
+        height: Dimensions.get('window').width / 2,
+        width: '50%',
+        padding: 4,
+      },
+    },
+  }),
+  banner: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+  },
+  photo: {
+    flex: 1,
+    resizeMode: 'cover',
+  },
+  fab: {
+    alignSelf: 'center',
+    position: 'absolute',
+    bottom: 0,
+    margin: 16,
+  },
+});
+
+export default BannerExample;

package/Examples/SampleUI/src/Examples/BottomNavigationBarExample.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { CommonActions } from '@react-navigation/native';
+import { Text, BottomNavigation } from 'react-native-paper';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+
+const Tab = createBottomTabNavigator();
+
+function HomeScreen() {
+  return (
+    <View style={styles.container}>
+      <Text variant="headlineMedium">Home!</Text>
+    </View>
+  );
+}
+
+function SettingsScreen() {
+  return (
+    <View style={styles.container}>
+      <Text variant="headlineMedium">Settings!</Text>
+    </View>
+  );
+}
+
+export default function BottomNavigationBarExample() {
+  return (
+    <Tab.Navigator
+      screenOptions={{
+        headerShown: false,
+      }}
+      tabBar={({ navigation, state, descriptors, insets }) => (
+        <BottomNavigation.Bar
+          navigationState={state}
+          safeAreaInsets={insets}
+          onTabPress={({ route, preventDefault }) => {
+            const event = navigation.emit({
+              type: 'tabPress',
+              target: route.key,
+              canPreventDefault: true,
+            });
+
+            if (event.defaultPrevented) {
+              preventDefault();
+            } else {
+              navigation.dispatch({
+                ...CommonActions.navigate(route.name, route.params),
+                target: state.key,
+              });
+            }
+          }}
+          renderIcon={({ route, focused, color }) =>
+            descriptors[route.key].options.tabBarIcon?.({
+              focused,
+              color,
+              size: 24,
+            }) || null
+          }
+          getLabelText={({ route }) => descriptors[route.key].route.name}
+        />
+      )}
+    >
+      <Tab.Screen
+        name="Home"
+        component={HomeScreen}
+        options={{
+          tabBarIcon: ({ color, size }) => {
+            return <Icon name="home" size={size} color={color} />;
+          },
+        }}
+      />
+      <Tab.Screen
+        name="Settings"
+        component={SettingsScreen}
+        options={{
+          tabBarIcon: ({ color, size }) => {
+            return <Icon name="cog" size={size} color={color} />;
+          },
+        }}
+      />
+    </Tab.Navigator>
+  );
+}
+
+BottomNavigationBarExample.title = 'Bottom Navigation Bar';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/Examples/SampleUI/src/Examples/BottomNavigationExample.tsx

@@ -0,0 +1,205 @@
+import * as React from 'react';
+import {
+  Dimensions,
+  Easing,
+  Image,
+  Platform,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+import type { StackNavigationProp } from '@react-navigation/stack';
+import {
+  Appbar,
+  BottomNavigation,
+  BottomNavigationRoute,
+  Menu,
+} from 'react-native-paper';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { useExampleTheme } from '..';
+import ScreenWrapper from '../ScreenWrapper';
+
+type Route = { route: { key: string } };
+
+type Props = {
+  navigation: StackNavigationProp<{}>;
+};
+
+const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';
+
+const PhotoGallery = ({ route }: Route) => {
+  const PHOTOS = Array.from({ length: 24 }).map(
+    (_, i) => `https://unsplash.it/300/300/?random&__id=${route.key}${i}`
+  );
+
+  return (
+    <ScreenWrapper contentContainerStyle={styles.content}>
+      {PHOTOS.map((uri) => (
+        <View key={uri} style={styles.item}>
+          <Image
+            source={{ uri }}
+            style={styles.photo}
+            accessibilityIgnoresInvertColors
+          />
+        </View>
+      ))}
+    </ScreenWrapper>
+  );
+};
+
+const BottomNavigationExample = ({ navigation }: Props) => {
+  const { isV3 } = useExampleTheme();
+  const insets = useSafeAreaInsets();
+  const [index, setIndex] = React.useState(0);
+  const [menuVisible, setMenuVisible] = React.useState(false);
+  const [sceneAnimation, setSceneAnimation] =
+    React.useState<
+      React.ComponentProps<typeof BottomNavigation>['sceneAnimationType']
+    >();
+
+  const [routes] = React.useState<BottomNavigationRoute[]>([
+    {
+      key: 'album',
+      title: 'Album',
+      focusedIcon: 'image-album',
+      ...(!isV3 && { color: '#6200ee' }),
+    },
+    {
+      key: 'library',
+      title: 'Library',
+      focusedIcon: 'inbox',
+      badge: true,
+      ...(isV3
+        ? { unfocusedIcon: 'inbox-outline' }
+        : {
+            color: '#2962ff',
+          }),
+    },
+    {
+      key: 'favorites',
+      title: 'Favorites',
+      focusedIcon: 'heart',
+      ...(isV3
+        ? { unfocusedIcon: 'heart-outline' }
+        : {
+            color: '#00796b',
+          }),
+    },
+    {
+      key: 'purchased',
+      title: 'Purchased',
+      focusedIcon: 'shopping',
+      ...(isV3 ? { unfocusedIcon: 'shopping-outline' } : { color: '#c51162' }),
+    },
+  ]);
+
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);
+
+  return (
+    <View style={styles.screen}>
+      <Appbar.Header elevated>
+        <Appbar.BackAction onPress={() => navigation.goBack()} />
+        <Appbar.Content title="Bottom Navigation" />
+        <Menu
+          visible={menuVisible}
+          onDismiss={() => setMenuVisible(false)}
+          anchor={
+            <Appbar.Action
+              icon={MORE_ICON}
+              onPress={() => setMenuVisible(true)}
+              {...(!isV3 && { color: 'white' })}
+            />
+          }
+        >
+          <Menu.Item
+            trailingIcon={sceneAnimation === undefined ? 'check' : undefined}
+            onPress={() => {
+              setSceneAnimation(undefined);
+              setMenuVisible(false);
+            }}
+            title="Scene animation: none"
+          />
+          <Menu.Item
+            trailingIcon={sceneAnimation === 'shifting' ? 'check' : undefined}
+            onPress={() => {
+              setSceneAnimation('shifting');
+              setMenuVisible(false);
+            }}
+            title="Scene animation: shifting"
+          />
+          <Menu.Item
+            trailingIcon={sceneAnimation === 'opacity' ? 'check' : undefined}
+            onPress={() => {
+              setSceneAnimation('opacity');
+              setMenuVisible(false);
+            }}
+            title="Scene animation: opacity"
+          />
+        </Menu>
+      </Appbar.Header>
+      <BottomNavigation
+        safeAreaInsets={{ bottom: insets.bottom }}
+        navigationState={{ index, routes }}
+        onIndexChange={setIndex}
+        labelMaxFontSizeMultiplier={2}
+        renderScene={BottomNavigation.SceneMap({
+          album: PhotoGallery,
+          library: PhotoGallery,
+          favorites: PhotoGallery,
+          purchased: PhotoGallery,
+        })}
+        sceneAnimationEnabled={sceneAnimation !== undefined}
+        sceneAnimationType={sceneAnimation}
+        sceneAnimationEasing={Easing.ease}
+        getLazy={({ route }) => route.key !== 'album'}
+      />
+    </View>
+  );
+};
+
+BottomNavigationExample.title = 'Bottom Navigation';
+
+export default BottomNavigationExample;
+
+const styles = StyleSheet.create({
+  ...Platform.select({
+    web: {
+      content: {
+        // there is no 'grid' type in RN :(
+        display: 'grid' as 'none',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',
+        gridRowGap: '8px',
+        gridColumnGap: '8px',
+        padding: 8,
+      },
+      item: {
+        width: '100%',
+        height: 150,
+      },
+    },
+    default: {
+      content: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        padding: 4,
+      },
+      item: {
+        height: Dimensions.get('window').width / 2,
+        width: '50%',
+        padding: 4,
+      },
+    },
+  }),
+  photo: {
+    flex: 1,
+    resizeMode: 'cover',
+  },
+  screen: {
+    flex: 1,
+  },
+});