I want to move and element right to place I click with onPress event.
Example if I click on the screen with position x: 200, y: 300, so my element should move there from position x: -100, y: -100, I tried it, but it is not moving to the exact position I press on the screen. my code:, although it moves, but moves not exactly to the place I want...
const styles = StyleSheet.create({ alertAutoCloseContainer: { left: 0, top: 0, margin: 10, marginHorizontal: 40, position: 'absolute', padding: 10, maxWidth: 500, maxHeight: 400, zIndex: 1000, backgroundColor: 'rgba(0, 50, 50, 0.8)', borderRadius: 5, }, alertAutoCloseText: { color: '#fff', fontFamily: 'IRANSansMobile' }});const { Value } = Animated;const animatedValue = new Value(0);const MyAlert = memo(forwardRef(({ }, ref) => { const [state, setState] = useReducer((s, v) => v, { status: true, xAxis: 0, yAxis: 0, parentData: { text: "" } }); useImperativeHandle(ref, () => { return ({ startAnimation: ({ xAxis, yAxis, parentData }) => { const { status } = state; setState({ ...state, xAxis, yAxis, parentData, status: !status }); Animated.timing(animatedValue, { toValue: status === true ? 1 : 0, duration: 500 }).start(); }, stopAnimation: ({ }) => { Animated.timing(animatedValue, { toValue: 0, duration: 500 }).start(); } }) }); console.log(state.xAxis, state.yAxis); return (<Animated.View style={{ ...styles.alertAutoCloseContainer, transform: [ { translateY: animatedValue.interpolate({ inputRange: [0, 1], outputRange: [0, state.yAxis], extrapolate: 'clamp' }) }, { translateX: animatedValue.interpolate({ inputRange: [0, 1], outputRange: [0, state.xAxis], extrapolate: 'clamp' }) }, { scale: animatedValue.interpolate({ inputRange: [0, 1], outputRange: [0, 1] }) } ] }}><Text style={styles.alertAutoCloseText}> {state.parentData.text}</Text></Animated.View> );}), (p, n) => true);