diff --git a/expo/src/components/SwitchButtons.js b/expo/src/components/SwitchButtons.js index 6761c067e..563b5d845 100644 --- a/expo/src/components/SwitchButtons.js +++ b/expo/src/components/SwitchButtons.js @@ -1,6 +1,5 @@ import React, { useCallback, useRef } from "react"; -import { Animated, findNodeHandle, PanResponder, StyleSheet, View } from "react-native"; -import { capture } from "../services/sentry"; +import { Animated, PanResponder, StyleSheet, View } from "react-native"; import TextStyled from "./TextStyled"; const SwitchButtons = ({ leftContent, rightContent, handleSwitchChange, initPosition = 1 }) => { @@ -27,40 +26,42 @@ const SwitchButtons = ({ leftContent, rightContent, handleSwitchChange, initPosi [] ); const onTerminate = async (evt) => { - const newX = evt.nativeEvent.locationX; - const width = await new Promise((res) => - insideContainerRef.current.measureLayout( - findNodeHandle(containerRef.current), - (x, y, width) => { + try { + const newX = evt.nativeEvent.locationX; + + // Measure the width of the inside container + const width = await new Promise((res) => + insideContainerRef.current.measure((x, y, width, height, pageX, pageY) => { res(width); - }, - (error) => capture("error finding ref", { extra: { error } }) - ) - ); - const newPosition = Number(newX > width / 2); - const buttonWidth = await new Promise((res) => - buttonRef.current.measureLayout( - findNodeHandle(insideContainerRef.current), - (x, y, width) => { + }) + ); + + const newPosition = Number(newX > width / 2); + + // Measure the width of the button + const buttonWidth = await new Promise((res) => + buttonRef.current.measure((x, y, width, height, pageX, pageY) => { res(width); - }, - (error) => capture("error finding ref", { extra: { error } }) - ) - ); + }) + ); + + Animated.parallel([ + Animated.timing(translateX, { + toValue: newPosition * (buttonWidth - 4), + duration: 250, + useNativeDriver: true, + }), + Animated.timing(position, { + toValue: newPosition, + duration: 250, + useNativeDriver: true, + }), + ]).start(); - Animated.parallel([ - Animated.timing(translateX, { - toValue: newPosition * (buttonWidth - 4), - duration: 250, - useNativeDriver: true, - }), - Animated.timing(position, { - toValue: newPosition, - duration: 250, - useNativeDriver: true, - }), - ]).start(); - handleSwitchChange(newPosition === 0 ? leftContent : rightContent); + handleSwitchChange(newPosition === 0 ? leftContent : rightContent); + } catch (error) { + console.error("Error during onTerminate:", error); + } }; const panResponder = useRef( @@ -85,13 +86,10 @@ const SwitchButtons = ({ leftContent, rightContent, handleSwitchChange, initPosi ref={containerRef} style={[styles.container]} {...(panResponder?.panHandlers || {})} - pointerEvents="box-only"> + pointerEvents="box-only" + > - + @@ -105,7 +103,8 @@ const SwitchButtons = ({ leftContent, rightContent, handleSwitchChange, initPosi extrapolate: "clamp", }), }, - ]}> + ]} + > {leftContent} @@ -120,7 +119,8 @@ const SwitchButtons = ({ leftContent, rightContent, handleSwitchChange, initPosi extrapolate: "clamp", }), }, - ]}> + ]} + > {leftContent} @@ -137,7 +137,8 @@ const SwitchButtons = ({ leftContent, rightContent, handleSwitchChange, initPosi extrapolate: "clamp", }), }, - ]}> + ]} + > {rightContent} @@ -152,7 +153,8 @@ const SwitchButtons = ({ leftContent, rightContent, handleSwitchChange, initPosi extrapolate: "clamp", }), }, - ]}> + ]} + > {rightContent}