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

package/Examples/SampleUI/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx

@@ -0,0 +1,220 @@
+import * as React from 'react';
+import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+import { Animated, FlatList, Platform, StyleSheet, View } from 'react-native';
+
+import {
+  Avatar,
+  MD2Colors,
+  MD3Colors,
+  Paragraph,
+  Text,
+} from 'react-native-paper';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+
+import CustomFAB from './CustomFAB';
+import CustomFABControls, {
+  Controls,
+  initialControls,
+} from './CustomFABControls';
+import { useExampleTheme } from '../..';
+import { animatedFABExampleData } from '../../../utils';
+
+type Item = {
+  id: string;
+  sender: string;
+  header: string;
+  message: string;
+  initials: string;
+  date: string;
+  read: boolean;
+  favorite: boolean;
+  bgColor: string;
+};
+
+const AnimatedFABExample = () => {
+  const { colors, isV3 } = useExampleTheme();
+
+  const isIOS = Platform.OS === 'ios';
+
+  const [extended, setExtended] = React.useState<boolean>(true);
+  const [visible, setVisible] = React.useState<boolean>(true);
+
+  const [controls, setControls] = React.useState<Controls>(initialControls);
+
+  const { current: velocity } = React.useRef<Animated.Value>(
+    new Animated.Value(0)
+  );
+
+  const renderItem = React.useCallback(
+    ({ item }: { item: Item }) => {
+      const TextComponent = isV3 ? Text : Paragraph;
+
+      return (
+        <View style={styles.itemContainer}>
+          <Avatar.Text
+            style={[styles.avatar, { backgroundColor: item.bgColor }]}
+            label={item.initials}
+            color={isV3 ? MD3Colors.primary100 : MD2Colors.white}
+            size={40}
+          />
+          <View style={styles.itemTextContentContainer}>
+            <View style={styles.itemHeaderContainer}>
+              <TextComponent
+                variant="labelLarge"
+                style={[styles.header, !item.read && styles.read]}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+              >
+                {item.sender}
+              </TextComponent>
+              <TextComponent
+                variant="labelLarge"
+                style={[styles.date, !item.read && styles.read]}
+              >
+                {item.date}
+              </TextComponent>
+            </View>
+
+            <View style={styles.itemMessageContainer}>
+              <View style={styles.flex}>
+                <TextComponent
+                  variant="labelLarge"
+                  ellipsizeMode="tail"
+                  numberOfLines={1}
+                  style={!item.read && styles.read}
+                >
+                  {item.header}
+                </TextComponent>
+                <TextComponent
+                  variant="labelLarge"
+                  numberOfLines={1}
+                  ellipsizeMode="tail"
+                >
+                  {item.message}
+                </TextComponent>
+              </View>
+
+              <Icon
+                name={item.favorite ? 'star' : 'star-outline'}
+                color={
+                  item.favorite
+                    ? isV3
+                      ? MD3Colors.error70
+                      : MD2Colors.orange500
+                    : isV3
+                    ? MD3Colors.neutralVariant70
+                    : MD2Colors.grey500
+                }
+                size={20}
+                onPress={() => setVisible(!visible)}
+                style={styles.icon}
+              />
+            </View>
+          </View>
+        </View>
+      );
+    },
+    [visible, isV3]
+  );
+
+  const onScroll = ({
+    nativeEvent,
+  }: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const currentScrollPosition =
+      Math.floor(nativeEvent?.contentOffset?.y) ?? 0;
+
+    if (!isIOS) {
+      return velocity.setValue(currentScrollPosition);
+    }
+
+    setExtended(currentScrollPosition <= 0);
+  };
+
+  const _keyExtractor = React.useCallback(
+    (item: { id: string }) => item.id,
+    []
+  );
+
+  const { animateFrom, iconMode } = controls;
+
+  return (
+    <>
+      <CustomFABControls controls={controls} setControls={setControls} />
+      <FlatList
+        data={animatedFABExampleData}
+        renderItem={renderItem}
+        keyExtractor={_keyExtractor}
+        onEndReachedThreshold={0}
+        scrollEventThrottle={16}
+        showsVerticalScrollIndicator={false}
+        style={[
+          styles.flex,
+          {
+            backgroundColor: colors?.background,
+          },
+        ]}
+        contentContainerStyle={styles.container}
+        onScroll={onScroll}
+      />
+
+      <CustomFAB
+        visible={visible}
+        animatedValue={velocity}
+        extended={extended}
+        label={'New Message'}
+        animateFrom={animateFrom}
+        iconMode={iconMode}
+      />
+    </>
+  );
+};
+
+AnimatedFABExample.title = 'Animated Floating Action Button';
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    paddingBottom: 60,
+  },
+  avatar: {
+    marginRight: 16,
+    marginTop: 8,
+  },
+  flex: {
+    flex: 1,
+  },
+  itemContainer: {
+    marginBottom: 16,
+    flexDirection: 'row',
+  },
+  itemTextContentContainer: {
+    flexDirection: 'column',
+    flex: 1,
+  },
+  itemHeaderContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  itemMessageContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    flexGrow: 1,
+  },
+  read: {
+    fontWeight: 'bold',
+  },
+  icon: {
+    marginLeft: 16,
+    alignSelf: 'flex-end',
+  },
+  date: {
+    fontSize: 12,
+  },
+  header: {
+    fontSize: 14,
+    marginRight: 8,
+    flex: 1,
+  },
+});
+
+export default AnimatedFABExample;

package/Examples/SampleUI/src/Examples/AnimatedFABExample/CustomFAB.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import {
+  Animated,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  ViewStyle,
+} from 'react-native';
+
+import { AnimatedFAB } from 'react-native-paper';
+
+import { useExampleTheme } from '../..';
+
+type CustomFABProps = {
+  animatedValue: Animated.Value;
+  visible: boolean;
+  extended: boolean;
+  label: string;
+  animateFrom: 'left' | 'right';
+  iconMode?: 'static' | 'dynamic';
+  style?: StyleProp<ViewStyle>;
+};
+
+const CustomFAB = ({
+  animatedValue,
+  visible,
+  extended,
+  label,
+  animateFrom,
+  style,
+  iconMode,
+}: CustomFABProps) => {
+  const [isExtended, setIsExtended] = React.useState(true);
+  const { isV3 } = useExampleTheme();
+
+  const isIOS = Platform.OS === 'ios';
+
+  React.useEffect(() => {
+    if (!isIOS) {
+      animatedValue.addListener(({ value }: { value: number }) => {
+        setIsExtended(value <= 0);
+      });
+    } else setIsExtended(extended);
+  }, [animatedValue, extended, isIOS]);
+
+  const fabStyle = { [animateFrom]: 16 };
+
+  return (
+    <AnimatedFAB
+      icon={'plus'}
+      label={label}
+      extended={isExtended}
+      uppercase={!isV3}
+      onPress={() => console.log('Pressed')}
+      visible={visible}
+      animateFrom={animateFrom}
+      iconMode={iconMode}
+      style={[styles.fabStyle, style, fabStyle]}
+    />
+  );
+};
+
+export default CustomFAB;
+
+const styles = StyleSheet.create({
+  fabStyle: {
+    bottom: 16,
+    position: 'absolute',
+  },
+});

package/Examples/SampleUI/src/Examples/AnimatedFABExample/CustomFABControls.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import { FlatList, ListRenderItemInfo, StyleSheet, View } from 'react-native';
+
+import { TouchableOpacity } from 'react-native-gesture-handler';
+import type {
+  AnimatedFABAnimateFrom,
+  AnimatedFABIconMode,
+} from 'react-native-paper';
+import { Paragraph, RadioButton, Text } from 'react-native-paper';
+
+import { useExampleTheme } from '../..';
+
+export type Controls = {
+  iconMode: AnimatedFABIconMode;
+  animateFrom: AnimatedFABAnimateFrom;
+};
+
+export const initialControls: Controls = {
+  iconMode: 'static',
+  animateFrom: 'right',
+};
+
+type Props = {
+  controls: Controls;
+  setControls(controls: React.SetStateAction<Controls>): void;
+};
+
+type ControlValue = AnimatedFABIconMode | AnimatedFABAnimateFrom;
+
+type CustomControlProps = {
+  name: string;
+  options: ControlValue[];
+  value: ControlValue;
+  onChange(newValue: ControlValue): void;
+};
+
+const CustomControl = ({
+  name,
+  options,
+  value,
+  onChange,
+}: CustomControlProps) => {
+  const { isV3 } = useExampleTheme();
+
+  const _renderItem = React.useCallback(
+    ({ item }: ListRenderItemInfo<(typeof options)[number]>) => {
+      const TextComponent = isV3 ? Text : Paragraph;
+
+      return (
+        <TouchableOpacity
+          accessibilityRole="button"
+          onPress={() => onChange(item)}
+          style={styles.controlItem}
+        >
+          <TextComponent variant="labelLarge">{item}</TextComponent>
+
+          <RadioButton
+            value="dynamic"
+            status={value === item ? 'checked' : 'unchecked'}
+          />
+        </TouchableOpacity>
+      );
+    },
+    [value, onChange, isV3]
+  );
+
+  const _keyExtractor = React.useCallback(
+    (item: (typeof options)[number]) => item,
+    []
+  );
+  const TextComponent = isV3 ? Text : Paragraph;
+
+  return (
+    <View style={styles.controlWrapper}>
+      <TextComponent variant="labelLarge">{name}</TextComponent>
+
+      <FlatList
+        horizontal
+        scrollEnabled={false}
+        data={options}
+        renderItem={_renderItem}
+        keyExtractor={_keyExtractor}
+        contentContainerStyle={styles.controlItemsList}
+      />
+    </View>
+  );
+};
+
+const CustomFABControls = ({
+  setControls,
+  controls: { animateFrom, iconMode },
+}: Props) => {
+  const { colors } = useExampleTheme();
+
+  const setIconMode = (newIconMode: AnimatedFABIconMode) =>
+    setControls((state) => ({ ...state, iconMode: newIconMode }));
+
+  const setAnimateFrom = (newAnimateFrom: AnimatedFABAnimateFrom) =>
+    setControls((state) => ({ ...state, animateFrom: newAnimateFrom }));
+
+  return (
+    <View
+      style={[
+        styles.controlsWrapper,
+        {
+          backgroundColor: colors.background,
+        },
+      ]}
+    >
+      <CustomControl
+        name="iconMode"
+        options={['static', 'dynamic']}
+        value={iconMode}
+        onChange={setIconMode}
+      />
+
+      <CustomControl
+        name="animateFrom"
+        options={['left', 'right']}
+        value={animateFrom}
+        onChange={setAnimateFrom}
+      />
+    </View>
+  );
+};
+
+export default CustomFABControls;
+
+const styles = StyleSheet.create({
+  controlsWrapper: {
+    paddingHorizontal: 16,
+  },
+  controlWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  controlItemsList: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  controlItem: {
+    marginLeft: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});

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

@@ -0,0 +1 @@
+export { default } from './AnimatedFABExample';

package/Examples/SampleUI/src/Examples/AppbarExample.tsx

@@ -0,0 +1,263 @@
+import * as React from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+
+import type { StackNavigationProp } from '@react-navigation/stack';
+import {
+  Appbar,
+  FAB,
+  List,
+  Paragraph,
+  RadioButton,
+  Snackbar,
+  Switch,
+  Text,
+} from 'react-native-paper';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { useExampleTheme } from '..';
+import { yellowA200 } from '../styles/themes/v2/colors';
+import ScreenWrapper from '../ScreenWrapper';
+
+type Props = {
+  navigation: StackNavigationProp<{}>;
+};
+
+type AppbarModes = 'small' | 'medium' | 'large' | 'center-aligned';
+
+const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';
+const MEDIUM_FAB_HEIGHT = 56;
+
+const AppbarExample = ({ navigation }: Props) => {
+  const [showLeftIcon, setShowLeftIcon] = React.useState(true);
+  const [showSubtitle, setShowSubtitle] = React.useState(true);
+  const [showSearchIcon, setShowSearchIcon] = React.useState(true);
+  const [showMoreIcon, setShowMoreIcon] = React.useState(true);
+  const [showCustomColor, setShowCustomColor] = React.useState(false);
+  const [showExactTheme, setShowExactTheme] = React.useState(false);
+  const [appbarMode, setAppbarMode] = React.useState<AppbarModes>('small');
+  const [showCalendarIcon, setShowCalendarIcon] = React.useState(false);
+  const [showElevated, setShowElevated] = React.useState(false);
+  const [showSnackbar, setShowSnackbar] = React.useState(false);
+
+  const theme = useExampleTheme();
+  const { bottom, left, right } = useSafeAreaInsets();
+  const height = theme.isV3 ? 80 : 56;
+
+  const isCenterAlignedMode = appbarMode === 'center-aligned';
+
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      header: () => (
+        <Appbar.Header
+          style={showCustomColor ? styles.customColor : null}
+          theme={{
+            mode: showExactTheme ? 'exact' : 'adaptive',
+          }}
+          mode={appbarMode}
+          elevated={showElevated}
+        >
+          {showLeftIcon && (
+            <Appbar.BackAction onPress={() => navigation.goBack()} />
+          )}
+          <Appbar.Content
+            title="Title"
+            subtitle={showSubtitle ? 'Subtitle' : null}
+            onPress={() => setShowSnackbar(true)}
+          />
+          {isCenterAlignedMode
+            ? false
+            : showCalendarIcon && (
+                <Appbar.Action icon="calendar" onPress={() => {}} />
+              )}
+          {showSearchIcon && (
+            <Appbar.Action icon="magnify" onPress={() => {}} />
+          )}
+          {showMoreIcon && (
+            <Appbar.Action icon={MORE_ICON} onPress={() => {}} />
+          )}
+        </Appbar.Header>
+      ),
+    });
+  }, [
+    navigation,
+    showLeftIcon,
+    showSubtitle,
+    showSearchIcon,
+    showMoreIcon,
+    showCustomColor,
+    showExactTheme,
+    appbarMode,
+    showCalendarIcon,
+    isCenterAlignedMode,
+    showElevated,
+  ]);
+
+  const TextComponent = theme.isV3 ? Text : Paragraph;
+
+  const renderFAB = () => {
+    return (
+      <FAB
+        mode={theme.isV3 ? 'flat' : 'elevated'}
+        size="medium"
+        icon="plus"
+        onPress={() => {}}
+        style={[
+          styles.fab,
+          theme.isV3
+            ? { top: (height - MEDIUM_FAB_HEIGHT) / 2 }
+            : { bottom: height / 2 + bottom },
+        ]}
+      />
+    );
+  };
+
+  const renderDefaultOptions = () => (
+    <>
+      <View style={styles.row}>
+        <TextComponent>Left icon</TextComponent>
+        <Switch value={showLeftIcon} onValueChange={setShowLeftIcon} />
+      </View>
+      {!theme.isV3 && (
+        <View style={styles.row}>
+          <TextComponent>Subtitle</TextComponent>
+          <Switch value={showSubtitle} onValueChange={setShowSubtitle} />
+        </View>
+      )}
+      <View style={styles.row}>
+        <TextComponent>Search icon</TextComponent>
+        <Switch value={showSearchIcon} onValueChange={setShowSearchIcon} />
+      </View>
+      <View style={styles.row}>
+        <TextComponent>More icon</TextComponent>
+        <Switch value={showMoreIcon} onValueChange={setShowMoreIcon} />
+      </View>
+      {theme.isV3 && (
+        <View style={styles.row}>
+          <TextComponent>Calendar icon</TextComponent>
+          <Switch
+            value={isCenterAlignedMode ? false : showCalendarIcon}
+            disabled={isCenterAlignedMode}
+            onValueChange={setShowCalendarIcon}
+          />
+        </View>
+      )}
+      <View style={styles.row}>
+        <TextComponent>Custom Color</TextComponent>
+        <Switch value={showCustomColor} onValueChange={setShowCustomColor} />
+      </View>
+      {!theme.isV3 && (
+        <View style={styles.row}>
+          <TextComponent>Exact Dark Theme</TextComponent>
+          <Switch value={showExactTheme} onValueChange={setShowExactTheme} />
+        </View>
+      )}
+      {theme.isV3 && (
+        <View style={styles.row}>
+          <TextComponent>Elevated</TextComponent>
+          <Switch value={showElevated} onValueChange={setShowElevated} />
+        </View>
+      )}
+    </>
+  );
+
+  return (
+    <>
+      <ScreenWrapper
+        style={{ marginBottom: height + bottom }}
+        contentContainerStyle={styles.contentContainer}
+      >
+        {theme.isV3 ? (
+          <List.Section title="Default options">
+            {renderDefaultOptions()}
+          </List.Section>
+        ) : (
+          renderDefaultOptions()
+        )}
+        {theme.isV3 && (
+          <List.Section title="Appbar Modes">
+            <RadioButton.Group
+              value={appbarMode}
+              onValueChange={(value: string) =>
+                setAppbarMode(value as AppbarModes)
+              }
+            >
+              <View style={styles.row}>
+                <TextComponent>Small (default)</TextComponent>
+                <RadioButton value="small" />
+              </View>
+              <View style={styles.row}>
+                <TextComponent>Medium</TextComponent>
+                <RadioButton value="medium" />
+              </View>
+              <View style={styles.row}>
+                <TextComponent>Large</TextComponent>
+                <RadioButton value="large" />
+              </View>
+              <View style={styles.row}>
+                <TextComponent>Center-aligned</TextComponent>
+                <RadioButton value="center-aligned" />
+              </View>
+            </RadioButton.Group>
+          </List.Section>
+        )}
+      </ScreenWrapper>
+      <Appbar
+        style={[
+          styles.bottom,
+          {
+            height: height + bottom,
+          },
+          theme.isV3 && {
+            backgroundColor: theme.colors.elevation.level2,
+          },
+        ]}
+        safeAreaInsets={{ bottom, left, right }}
+        theme={{ mode: showExactTheme ? 'exact' : 'adaptive' }}
+      >
+        <Appbar.Action icon="archive" onPress={() => {}} />
+        <Appbar.Action icon="email" onPress={() => {}} />
+        <Appbar.Action icon="label" onPress={() => {}} />
+        <Appbar.Action icon="delete" onPress={() => {}} />
+        {theme.isV3 && renderFAB()}
+      </Appbar>
+      {!theme.isV3 && renderFAB()}
+      <Snackbar
+        visible={showSnackbar}
+        onDismiss={() => setShowSnackbar(false)}
+        duration={Snackbar.DURATION_SHORT}
+      >
+        Heading pressed
+      </Snackbar>
+    </>
+  );
+};
+
+AppbarExample.title = 'Appbar';
+
+export default AppbarExample;
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    paddingVertical: 8,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+  },
+  bottom: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  fab: {
+    position: 'absolute',
+    right: 16,
+  },
+  customColor: {
+    backgroundColor: yellowA200,
+  },
+});