Components behaving differently in ios

[SamarthKadam]

I had built a compoent in react native which works fine in android but its very laggy in ios here is the code . What could be the reason so that its not behaving properly in ios im using react-native-animated 3.7.1. Can you please tell me latest stable version for 0.72 react native version for ios
import React, { useState, useEffect } from 'react';
import {
StyleSheet,
View,
TouchableWithoutFeedback,
Image,
Text,
TouchableOpacity,
Pressable
} from 'react-native';
import Animated, {
Easing, Extrapolation,
interpolate,
useAnimatedStyle,
useDerivedValue,
useSharedValue,
withDelay,
withSpring,
withTiming,
} from 'react-native-reanimated';
import { VideoCamera, Shuffle, X, Phone } from 'phosphor-react-native';
import { theme } from '../../utils/theme';
import api from '../../api/JwtInterceptor';
import useApi from '../../hooks/api/useApi';
import typography from "../../utils/typography";
import { logTapEvent} from "../Analytics/AnalyticsEventTypes";
import {AnalyticsConstants} from "../../constants/AnalayticsConstants";
import {BOOKING_SOURCE, BOOKING_TYPE} from "../../constants/Enums";
import usePermission from "../../hooks/usePermission";
import {useGlobalContext} from "../../../GlobalContext";
import {useNavigation} from "@react-navigation/native";
import {makeBooking} from "../../utils/CallUtils";
import RechargeBottomSheetWrapper from "./RechargeBottomSheetWrapper";
import {useOfferContext} from "../../context/OfferContext";

const FloatingActionButton = ({ isExtended }) => {
const navigation = useNavigation()
const [isOpen, setIsOpen] = useState(false);
const firstValue = useSharedValue(30);
const secondValue = useSharedValue(30);
const progress = useDerivedValue(() =>
isOpen ? withTiming(1, { duration: 200 }) : withTiming(0, { duration: 200 }),
);
const [lowBalanceSource,setLowBalanceSource] = useState("");
const [showBottomSheet,setShowBottomSheet] = useState(false);
const [lowBalanceRate,setLowBalanceRate] = useState("");
const {requestCameraPermission, requestMicrophonePermission,requestBluetoothPermission} = usePermission()
const { walletBalance, user } = useGlobalContext();

const { handleInitialOffersCompletion } = useOfferContext();

function lowBalanceBottomSheetHandler(source,rate)
{
    setShowBottomSheet(true)
    setLowBalanceSource(source)
    setLowBalanceRate(rate)
}

const { API_REQUEST, data } = useApi();

const fetchRandomData = async () => {
    try {
        await API_REQUEST({
            AxiosInstance: api,
            method: 'GET',
            url: 'dostt/experts/random_price/',
        });
    } catch (error) {
        console.error('Fetch error:', error.message);
    }
};

useEffect(() => {
    fetchRandomData();
}, []);


async function handleMakeBooking(type) {
    let statusCamera = await requestCameraPermission()
    let statusMic = await requestMicrophonePermission()
    let statusBluetooth = await requestBluetoothPermission()
    console.log("status", statusCamera, statusMic,statusBluetooth)
    const bookingDetails = {
        type: type,
        source: BOOKING_SOURCE.RANDOM,
    }
    await makeBooking(statusCamera, statusMic, bookingDetails, user, navigation, "FindingRandomHostTest", AnalyticsConstants.RANDOM_BUTTON)
}

const handleCallCTA = (ctaType, coinPerMinute) => {
    trackCallCTA(ctaType)
    handleInitialOffersCompletion();
    if(walletBalance< coinPerMinute) {
        lowBalanceBottomSheetHandler(ctaType === BOOKING_TYPE.AUDIO ? "audio" : "video", coinPerMinute)
        handlePress()
    } else {
        handleMakeBooking(ctaType);
    }
}

const trackCallCTA = (ctaType) => {
    const eventName = ctaType === BOOKING_TYPE.AUDIO ? AnalyticsConstants.TAP_AUDIO_CALL : AnalyticsConstants.TAP_VIDEO_CALL
    logTapEvent(eventName,{
        [AnalyticsConstants.SCREEN_NAME]: AnalyticsConstants.HOME_SCREEN,
        [AnalyticsConstants.SOURCE]: BOOKING_SOURCE.RANDOM,
        [AnalyticsConstants.WALLET_BALANCE]: walletBalance
    },{ adjust:true })
}

const handlePress = () => {
    const config = {
        easing: Easing.bezier(0.68, -0.6, 0.32, 1.6),
        duration: 500,
    };
    if (isOpen) {
        firstValue.value = withTiming(30, config);
        secondValue.value = withDelay(50, withTiming(30, config));
    } else {
        firstValue.value = withDelay(200, withSpring(100));
        secondValue.value = withDelay(100, withSpring(180));
    }
    setIsOpen(!isOpen);
};

const firstIcon = useAnimatedStyle(() => {
    const scale = interpolate(
        firstValue.value,
        [30, 100],
        [0, 1],
        Extrapolation.CLAMP,
    );

    return {
        bottom: firstValue.value,
        transform: [{ scale: scale }],
    };
});

const secondIcon = useAnimatedStyle(() => {
    const scale = interpolate(
        secondValue.value,
        [30, 180],
        [0, 1],
        Extrapolation.CLAMP,
    );

    return {
        bottom: secondValue.value,
        transform: [{ scale: scale }],
    };
});

const plusIcon = useAnimatedStyle(() => ({
    transform: [{ rotate: `${progress.value * 180}deg` }],
}));

const backdropStyle = useAnimatedStyle(() => ({ opacity: progress.value }));

const fabStyle = useAnimatedStyle(() => {
    const extendedWidth = interpolate(
        progress.value,
        [0, 1],
        [156, 56],
        Extrapolation.CLAMP,
    );

    const notExtendedWidth = interpolate(
        progress.value,
        [0, 1],
        [56, 56],
        Extrapolation.CLAMP,
    );

    const width = isExtended  ? extendedWidth : notExtendedWidth;

    return {
        width,
    };
});

const getCoinsPerMinute = (title) => {
    if (title === 'Audio') {
        return data?.sessions?.audio?.coins_per_minute;
    } else if (title === 'Video') {
        return data?.sessions?.video?.coins_per_minute;
    }
    return null;
};

const renderLabel = (title) => (
    <View style={styles.labelContainer}>
        <Text style={styles.labelText}>{title} </Text>
        {getCoinsPerMinute(title) ? (
            <>
                <Image source={require("../../../assets/images/coin_transparent.png")} style={styles.coinImage} />
                <Text style={styles.labelText}> {getCoinsPerMinute(title)} /min</Text>
            </>
        ) : null}
    </View>
);

return (
    <View style={isOpen ? StyleSheet.absoluteFill: null}>
        {isOpen && (
            <TouchableWithoutFeedback onPress={handlePress}>
                <Animated.View style={[styles.backdrop, backdropStyle]} />
            </TouchableWithoutFeedback>
        )}
        <Animated.View style={[styles.contentContainer, firstIcon]}>
            {renderLabel('Video')}
            <Pressable style={styles.iconContainer} onPress={() =>{
                handleCallCTA(BOOKING_TYPE.VIDEO,data?.sessions?.video?.coins_per_minute)
            }}>
                <VideoCamera size={24} color="white" weight="fill" />
            </Pressable>
        </Animated.View>
        <Animated.View style={[styles.contentContainer, secondIcon]}>
            {renderLabel('Audio')}
            <Pressable style={styles.iconContainer} onPress={() =>{
                handleCallCTA(BOOKING_TYPE.AUDIO,data?.sessions?.audio?.coins_per_minute)
            }}>
                <Phone size={24} color="white" weight="fill" />
            </Pressable>
        </Animated.View>
        <Animated.View style={[styles.fabContainer, fabStyle, { zIndex: isOpen ? 1 : 3 }]}>
            <TouchableOpacity onPress={handlePress} style={styles.touchable}>
                <Animated.View style={plusIcon}>
                    {isOpen ? (
                        <X size={24} color={theme.colors.base.white} weight="bold" />
                    ) : (
                        <Shuffle size={24} color={theme.colors.base.white} style={{ transform: [{ rotate: '-90deg' }] }} />
                    )}
                </Animated.View>
                {(!isOpen && isExtended) && <Text style={styles.fabLabel}>Random</Text>}
            </TouchableOpacity>
        </Animated.View>
        {
            showBottomSheet && <RechargeBottomSheetWrapper lowBalanceSource={lowBalanceSource} showBottomSheet={showBottomSheet} setShowBottomSheet={setShowBottomSheet} lowBalanceRate={lowBalanceRate}/>
        }
    </View>
);

};

export default FloatingActionButton;

const styles = StyleSheet.create({
fabContainer: {
position: 'absolute',
bottom: 24,
right: 24,
height: 56,
borderRadius: 360,
borderWidth: 2,
borderColor: theme.colors.whiteOpacity.placeholderText,
backgroundColor: theme.colors.primary.light400,
justifyContent: 'center',
alignItems: 'center',
shadowColor: 'rgba(0,0,0, .40)',
shadowOffset: { height: 1, width: 1 },
shadowOpacity: 1,
shadowRadius: 1,
elevation: 2,
},
touchable: {
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 24,
paddingVertical: 16,
},
fabLabel: {
...typography.label1,
fontFamily: "Poppins_400Regular",
color: theme.colors.base.white,
marginLeft: 8,
},
backdrop: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(0, 0, 0, 0.65)',
zIndex: 3,
},
contentContainer: {
position: 'absolute',
bottom: 50,
right: 24,
flexDirection: 'row',
alignItems: 'center',
overflow: 'hidden',
zIndex: 3,
},
iconContainer: {
width: 56,
height: 56,
borderRadius: 50,
backgroundColor: theme.colors.primary.light400,
justifyContent: 'center',
alignItems: 'center',
},
labelContainer: {
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 10,
borderRadius: 20,
marginRight: 10,
},
labelText: {
...typography.label2,
fontFamily: "Poppins_400Regular",
color: theme.colors.base.white,
},
coinImage: {
width: 16,
height: 16,
marginLeft: 8,
marginRight: 4,
},
});