Closed audrew closed 2 years ago
For some reason, variables are not incrementing inside the canvas function. Here is my code:
export default function App({ navigation }) { const [counter, setCounter] = useState(330); useEffect(() => { const timeout = setTimeout(() => { setCounter(counter + 1); }, 1000); return () => { clearTimeout(timeout); }; }, [counter]); console.log('outside ', counter); const _onGLContextCreate = (gl) => { var ctx = new Expo2DContext(gl); // setInterval(() => { // console.log('set interval doesnt refresh too ', counter); // }, 1000); console.log('inside ', counter); let circle = { x: counter, y: 100, radius: 30, color: 'black' } let circle2 = { x: 400, y: 100, radius: 30, color: 'blue' } function drawCircle() { ctx.beginPath(); ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2); ctx.fillStyle = circle.color; ctx.fill(); ctx.closePath(); } function drawCircle2() { ctx.beginPath(); ctx.arc(circle2.x, circle2.y, circle2.radius, 0, Math.PI * 2); ctx.fillStyle = circle2.color; ctx.fill(); } function update() { drawCircle(); drawCircle2(); } function animate() { ctx.clearRect(0, 0, ctx.width, ctx.height); requestAnimationFrame(animate); update(); ctx.flush(); } animate(); ctx.stroke(); ctx.flush(); }; return ( <View style={{ flex: 1, justifyContent: 'center', }}> <GLView style={{ flex: 1 }} onContextCreate={_onGLContextCreate} /> </View> ); } export { home };
Logs are:
outside 330 inside 330 outside 331 outside 332 outside 333 outside 334 outside 335 outside 336 outside 337
Who can suggest a solution?
For some reason, variables are not incrementing inside the canvas function. Here is my code:
Logs are:
Who can suggest a solution?