Why variable value inside of canvas function not incrementing?

How to / Third Party Tooling
1

Here is an open GitHub issue Github Issue

Here is a Expo Snack

For some reason, variables are not incrementing inside the canvas function while outside works just fine. Please have a look at 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);
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 (
            <GLView style={{ flex: 1 }} onContextCreate={_onGLContextCreate} />
    );
}

export { home };

Here is what logs show:

outside  330
inside  330
outside  331
outside  332
outside  333
outside  334
outside  335
outside  336
outside  337

Does anybody know why is being read once in canvas and what could be the solution to increment it as in ouside in canvas function?

2

Hi @audrew31

Your code has nothing to do with Expo or React Native. These forums are for questions about developing mobile apps using Expo, so it’s not the best place to ask your question.

I think you’d be more likely to get a useful answer at a site like stackoverflow.com.

3

I am using expo-2d-context and expo-gl here. I post that in StackOverflow too, but I am a little bit desperate now. Though maybe someone can suggest anything. It seems that ‘inside’ value is being read once even though setInterval and animate() triggering it all the time

4

I see. Your question is still not about Expo or React Native. It’s about using setInterval() in React.

Try using Dan Abramov’s useInterval hook

The above is a TypeScript version. See his blog post for the plain JavaScript version and an explanation of why you can’t just use setInterval() like that in React.

5

The problem lies within canvas I suppose. I set setInterval inside canvas function because if I am not set it up it is being read only once. Also, hooks are not allowed inside the canvas function. I will try to look for the answer somewhere else I suppose.

6

How are proj4LocationUpdateX and proj4LocationUpdateY updated?

It would be easier if you could provide a minimal example that demonstrates the problem that we can run ourselves.

8

problem was solved react native - Why variable value inside of canvas function not incrementing? - Stack Overflow

9

Great! :slight_smile:

By the way, you should probably mark the Stack overflow answer as “accepted” and also up vote it if you feel it deserves it.

10

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.