Components behaving differently in ios #6898
Unanswered
SamarthKadam
asked this question in
Q&A
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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();
};
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,
},
});
Beta Was this translation helpful? Give feedback.
All reactions