Hi, all,
I am just starting out learning how to code in React Native, and I am planning to create a joystick for one of my future project. Can you help me out on identifying why my code crashes? Here’s what I am working on:
import React, { useRef, useState } from 'react';
import { View, Text, StyleSheet, Animated, PanResponder } from 'react-native';
const MyComponent = () => {
const [myBorderColor, setBorderColor] = useState('white');
const [myBorderWidth, setBorderWidth] = useState(10);
const pan = useRef(new Animated.ValueXY()).current;
const panResponder = useRef(
PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderGrant: () => {
setBorderColor('lightgreen');
setBorderWidth(20);
},
onPanResponderMove: Animated.event([null, { dx: pan.x, dy: pan.y }]),
onPanResponderRelease: () => {
Animated.spring(pan, { toValue: { x: 0, y: 0 } }).start();
setBorderColor('white');
setBorderWidth(10);
},
})
).current;
return (
<View style={MyStyle.mainView}>
<View style={MyStyle.steerArea}>
<Animated.View
{...panResponder.panHandlers}
style={[
{
height: 100,
width: 100,
backgroundColor: 'gray',
borderWidth: myBorderWidth,
borderColor: myBorderColor,
borderRadius: 50,
top: pan.y,
left: pan.x,
},
]}
/>
</View>
</View>
);
};
export default MyComponent;
const MyStyle = StyleSheet.create({
mainView: {
flex: 1,
borderWidth: 10,
borderRadius: 10,
justifyContent: 'center',
backgroundColor: 'lightblue',
},
steerArea: {
height: 200,
width: 200,
backgroundColor: 'lightgray',
borderRadius: 100,
justifyContent: 'center',
alignItems: 'center',
left: 50,
},
});
It was working just fine until I added the part
const [myBorderWidth, setBorderWidth] = useState(10);
I apologize ahead of time if I happen to post my question on the wrong sub. And please pardon any novice mistake I committed. I’d appreciate if you can point them out so avoid them in the future.
