@cometchat/chat-uikit-react-native/lib/shared/views/CometChatMediaRecorder/AnimatingMic.js

Ready-to-use Chat UI Components for React Native

import React, { useEffect, useMemo, useRef } from "react";
import { Animated, Easing, StyleSheet, View, } from "react-native";
import { useTheme } from "../../../theme";
import { defaultSpacing } from "../../../theme/default";
import { Icon } from "../../icons/Icon";
import { deepMerge } from "../../helper/helperFunctions";
export const AnimatingMic = ({ isAnimating = false, style, }) => {
    const theme = useTheme();
    const scaleAnim = useRef(new Animated.Value(0.8)).current;
    const animationStyle = useMemo(() => {
        return deepMerge(theme.mediaRecorderStyle?.animationStyle ?? {}, style ?? {});
    }, [theme, style]);
    useEffect(() => {
        if (isAnimating === false)
            return () => { };
        Animated.loop(Animated.sequence([
            Animated.timing(scaleAnim, {
                toValue: 1.2,
                duration: 1000,
                easing: Easing.inOut(Easing.ease),
                useNativeDriver: true,
            }),
            Animated.timing(scaleAnim, {
                toValue: 0.8,
                duration: 1000,
                easing: Easing.inOut(Easing.ease),
                useNativeDriver: true,
            }),
        ])).start();
        return () => scaleAnim.resetAnimation();
    }, [scaleAnim, isAnimating]);
    return (<View style={styles.container}>
      <Animated.View style={[
            styles.pulseCircleOuter,
            true ? { backgroundColor: theme.color.extendedPrimary50 } : {},
            { transform: [{ scale: scaleAnim }] },
            animationStyle.outerAnimationContainerStyle,
        ]}/>
      <Animated.View style={[
            styles.pulseCircle,
            true
                ? {
                    backgroundColor: theme.color.extendedPrimary100,
                }
                : {},
            { transform: [{ scale: scaleAnim }] },
            animationStyle.innerAnimationContainerStyle,
        ]}/>
      <Icon name='mic-fill' size={48} color={animationStyle.animatedIconStyle?.iconStyle?.tintColor ?? theme.color.staticWhite} icon={animationStyle.animatedIconStyle?.icon} containerStyle={[
            styles.micContainer,
            {
                backgroundColor: theme.color.primary,
            },
            animationStyle.animatedIconStyle?.containerStyle,
        ]} imageStyle={[animationStyle.animatedIconStyle?.iconStyle]}/>
    </View>);
};
const styles = StyleSheet.create({
    container: {
        justifyContent: "center",
        alignItems: "center",
        padding: 32,
    },
    pulseCircle: {
        position: "absolute",
        width: 100,
        height: 100,
        borderRadius: defaultSpacing.radius.max,
    },
    pulseCircleOuter: {
        position: "absolute",
        width: 120,
        height: 120,
        borderRadius: defaultSpacing.radius.max,
    },
    micContainer: {
        width: 80,
        height: 80,
        borderRadius: defaultSpacing.radius.max,
        justifyContent: "center",
        alignItems: "center",
    },
});
//# sourceMappingURL=AnimatingMic.js.map