How to build a Physics-Based Particle System

This post walks through how to build a high-performance particle system that responds to tap gesture.

Here is what we will be building:

By the end of this guide, you will learn how to:

• Build a high-performance, physics-based particle system in React Native
• Understand the core principles of physics-based particle interactions.
• Utilize Reanimated and Gesture Handler to create fluid, gesture-driven animations.

Prerequisites

To follow along, you’ll need a project set up with the following libraries:

• React Native Reanimated
• React Native Gesture Handler
• React Native Skia

The package versions used for this post are:

1
{
2
  "dependencies": {
3
    "@shopify/react-native-skia": "2.0.0-next.2",
4
    "react-native": "0.78.2",
5
    "react-native-gesture-handler": "^2.25.0",
6
    "react-native-reanimated": "^3.17.2"
7
  }
8
}

A basic familiarity with these libraries will help you get the most out of this guide. You don’t need a background in physics; the formulas we use are minimal and straightforward.

Core Idea

Our approach consists of five steps:

1. Render the particle on a Skia canvas.
2. Register gesture handler for tap events.
3. Calculate a particle’s initial velocity from the gesture input.
4. Animate the particle by updating their position based on velocity in each frame.
5. Refine the simulation by adding forces like friction and restitution.

Rendering the Particles with Skia

Why Skia? We need to animate potentially hundreds of particles simultaneously. Attempting this with React Native View components would quickly lead to severe performance issues. Skia, however, is a high-performance 2D graphics library that draws directly on the UI thread using GPU acceleration. This ensures fluid, higher-performance rendering than View components.

Let’s begin by setting up our drawing surface. The library provides a Canvas component, which acts as the root for all our Skia drawings.

1
import { Canvas } from "@shopify/react-native-skia";
2

3
function Index() {
4
  return <Canvas style={{ flex: 1, backgroundColor: "lightblue" }} />;
5
}
6

7
export default Index;

Next, we’ll render our first particle using the Circle component. We need to position this circle at the center of the viewport. To do this, we can get the screen’s width and height from the Dimension API and divide them by two.

1
import { Canvas, Circle } from "@shopify/react-native-skia";
2
import { Dimensions } from "react-native";
3

4
const { width, height } = Dimensions.get("window");
5

6
function Index() {
7
  const particleX = useSharedValue(width / 2);
8
  const particleY = useSharedValue(height / 2);
9

10
  return (
11
    <Canvas style={{ flex: 1, backgroundColor: "lightblue" }}>
12
      <Circle cx={particleX} cy={particleY} r={30} color="red" />
13
    </Canvas>
14
  );
15
}
16

17
export default Index;

We now need to update our position variables to be shared values. This is because all animation calculations will run on the UI thread, allowing Skia to instantly reflect those values as it renders the particles.

Add Tap Gesture

The next step is to register a tap gesture on the Canvas.

We can define the gesture using the Gesture object, and apply it with the GestureDetector.

1
function Index() {
2
  const particleX = useSharedValue(width / 2);
3
  const particleY = useSharedValue(height / 2);
4

5
  const tap = Gesture.Tap().onStart((e) => {
6
    console.log("tap");
7
  });
8

9
  return (
10
    <GestureDetector gesture={tap}>
11
      <Canvas style={{ flex: 1, backgroundColor: "lightblue" }}>
12
        <Circle cx={particleX} cy={particleY} r={30} color="red" />
13
      </Canvas>
14
    </GestureDetector>
15
  );
16
}

Calculate a Particle’s Initial Velocity

When the user taps the screen, we want the particle to be pushed away from the tap. To achieve this, we’ll calculate its initial velocity.

But why calculate velocity instead of force?

While applying a force is an intuitive model, it adds significant complexity. We would need to manage a force variable over time (like resetting it), which can be difficult to maintain.

A simpler approach is to calculate the initial velocity just once. This is the value we ultimately need to start the animation.

Our process will be:

1. Find the direction vector and normalize it
2. Calculate a speed factor to get the final initial velocity

Normalizing the Direction

The “normalize direction” define the path the particle should move, separate from its speed.

To get this vector, we first need to calculate the difference between the tap’s location and the particle’s current position. We also need to define an “influence distance,” a range that limits the tap’s effect. I’ve set this value to 100.

1
const INFLUENCE_DISTANCE = 100;
2

3
function Index() {
4

5
  // ...
6

7
  const particleVelocityX = useSharedValue(0);
8
  const particleVelocityY = useSharedValue(0);
9

10
  const tap = Gesture.Tap().onStart(e => {
11
    const tapX = e.absoluteX;
12
    const tapY = e.absoluteY;
13

14
    const dx = tapX - particleX.value;
15
    const dy = tapY - particleY.value;
16

17
    const dist = Math.sqrt(dx * dx + dy * dy);
18

19
  if (dist < INFLUENCE_DISTANCE) {
20
    console.log('dist');
21
  }
22
};

Now, we can calculate the direction using these values.

We’ll use the normalization formula for this. The key idea is to discard the distance (or magnitude) and get only the pure direction.

1
if (dist < 100) {
2
  const minDistance = 10;
3
  const safeDistance = Math.max(dist, minDistance);
4

5
  const normalizedDx = dx / safeDistance;
6
  const normalizedDy = dy / safeDistance;
7
}

This variable is a crucial safeguard against a “divide by zero” error.

The resulting values now represent our pure direction. We will use this in the next step.

Calculate Velocity

We can simplify the physics for this interaction. While the formula is F = ma (Force = Mass × Acceleration), we can assume our particle’s mass is 1. This simplifies the equation to F = a, meaning our Force and Acceleration values are interchangeable.

This is why we can calculate a force and add it directly to our velocity.

1
const INFLUENCE_DISTANCE = 100;
2
const PUSH_FORCE = 20;
3

4
function Index() {
5

6
  // ...
7
    if (dist < INFLUENCE_DISTANCE) {
8
      const minDistance = 10;
9
      const safeDistance = Math.max(dist, minDistance);
10

11
      const normalizedDx = dx / safeDistance;
12
      const normalizedDy = dy / safeDistance;
13

14
    const forceMultiplier = INFLUENCE_DISTANCE / safeDistance;
15
      const pushForce = PUSH_FORCE * forceMultiplier;
16

17
      const particleForceX = -normalizedDx * pushForce;
18
      const particleForceY = -normalizedDy * pushForce;
19

20
      particleVelocityX.value += particleForceX;
21
      particleVelocityY.value += particleForceY;
22
    }

You’ll notice we use a negative sign (e.g., -normalizedDx). This is because the normalized direction points from the particle to the tap, but we want to push the particle in the opposite direction.

Finally, we add this force (= acceleration) directly to the velocity.

Animate the Particle by Updating Position Based on Velocity

Now that we have a velocity, we need to apply it to our particle’s position on every frame to create motion.

We can achieve this using the useFrameCallback hook. This hook runs our code synchronously on the UI thread, firing at the display’s refresh rate (typically 60fps).

Inside this animation loop, we’ll use a simple physics method called Euler integration.

In simple terms, this method calculates an object’s next position by adding its current velocity to its current position. By repeating this calculation at 60fps, we create smooth, continuous motion.

Before we write the animation logic, let’s refactor our code for clarity by extracting the particle into its own Particle component.

1
  return (
2
    <GestureDetector gesture={tap}>
3
      <Canvas style={{flex: 1, backgroundColor: 'lightblue'}}>
4
        <Particle
5
          particleX={particleX}
6
          particleY={particleY}
7
          particleVelocityX={particleVelocityX}
8
          particleVelocityY={particleVelocityY}
9
        />
10
      </Canvas>
11
    </GestureDetector>
12
  );
13
}
14

15
function Particle({
16
  particleX,
17
  particleY,
18
  particleVelocityX,
19
  particleVelocityY,
20
}: {
21
  particleX: SharedValue<number>;
22
  particleY: SharedValue<number>;
23
  particleVelocityX: SharedValue<number>;
24
  particleVelocityY: SharedValue<number>;
25
}) {
26
  return <Circle cx={particleX} cy={particleY} r={30} color="red" />;
27
}

Then, add useFrameCallback

1
function Particle({
2
  particleX,
3
  particleY,
4
  particleVelocityX,
5
  particleVelocityY,
6
}: {
7
  particleX: SharedValue<number>;
8
  particleY: SharedValue<number>;
9
  particleVelocityX: SharedValue<number>;
10
  particleVelocityY: SharedValue<number>;
11
}) {
12
  useFrameCallback(() => {
13
    // logic
14
  });
15

16
  const position = useDerivedValue(() => {
17
    return vec(particleX.value, particleY.value);
18
  });
19

20
  return <Circle c={position} r={30} color="red" />;
21
}

First, we already know the particle’s velocity, so we can update the position.

1
  const SPEED_SCALE = 2;
2

3
  ...
4
  useFrameCallback(() => {
5
    particleX.value += particleVelocityX.value * SPEED_SCALE;
6
    particleY.value += particleVelocityY.value * SPEED_SCALE;
7
  });

This next part is the most crucial concept when combining Reanimated and Skia.

If you only update the shared value inside the frame callback, the particle will not move. Why?

1. The hook does update the shared value on the UI thread.
2. However, the Skia component does not know that this value has changed. Skia only redraws when its props (like cx or cy) change.

We need a way to “tell” Skia to redraw whenever the position updates.

This is the exact purpose of useDerivedValue.

It creates a new shared value that listens to other shared values. When the position changes, it automatically re-runs and creates a new position object. Skia sees this new object as a new prop, triggering a redraw.

1
const SPEED_SCALE = 2;
2

3
function Particle({
4
  particleX,
5
  particleY,
6
  particleVelocityX,
7
  particleVelocityY,
8
}: {
9
  particleX: SharedValue<number>;
10
  particleY: SharedValue<number>;
11
  particleVelocityX: SharedValue<number>;
12
  particleVelocityY: SharedValue<number>;
13
}) {
14
  useFrameCallback(() => {
15
    particleX.value += particleVelocityX.value * SPEED_SCALE;
16
    particleY.value += particleVelocityY.value * SPEED_SCALE;
17
  });
18

19
  const position = useDerivedValue(() => {
20
    return vec(particleX.value, particleY.value);
21
  });
22

23
  return <Circle c={position} r={30} color="red" />;
24
}

Notice in the code how we pass this value directly to the c prop.

With this final connection made, the particle will now move correctly. You can experiment by changing the constant to see how it affects the particle’s speed.

Refine the Simulation by Adding Forces

Our particle moves, but it has two problems: it’s too fast, and when tapped, it flies off-screen permanently.

We can fix this by adding two simple forces to our animation loop:

1. A restoring force to pull the particle back to the center.
2. Friction (or damping) to slow it down over time.

Restoring Force

First, let’s implement the restoring force. This force constantly pulls the particle back towards the center of the screen.

The logic is simple: the farther the particle is from the center, the stronger the pull. We calculate the distance from the center, multiply it by a small constant, and add that result directly to our velocity.

1
  const RESTORE_FORCE = 0.01;
2

3
  ...
4

5
  useFrameCallback(() => {
6
    const rtX = (width / 2 - particleX.value) * RESTORE_FORCE;
7
    const rtY = (height / 2 - particleY.value) * RESTORE_FORCE;
8

9
    particleVelocityX.value += rtX;
10
    particleVelocityY.value += rtY;
11

12
    particleX.value += particleVelocityX.value * SPEED_SCALE;
13
    particleY.value += particleVelocityY.value * SPEED_SCALE;
14
  });

Friction (Damping)

If you run the code now, the particle works! It oscillates around the center like a pendulum, but it never stops.

To make it eventually settle, we’ll add friction (also known as damping). This works by reducing the particle’s velocity by a small percentage on every frame. We do this by multiplying the velocity by a constant (e.g., 0.98) inside the loop.

1
useFrameCallback(() => {
2
  const rtX = (width / 2 - particleX.value) * RESTORE_FORCE;
3
  const rtY = (height / 2 - particleY.value) * RESTORE_FORCE;
4

5
  particleVelocityX.value += rtX;
6
  particleVelocityY.value += rtY;
7

8
  particleVelocityX.value *= FRICTION;
9
  particleVelocityY.value *= FRICTION;
10

11
  particleX.value += particleVelocityX.value * SPEED_SCALE;
12
  particleY.value += particleVelocityY.value * SPEED_SCALE;
13
});

Final Result

And with that, our interactive physics simulation is complete!

You’ve successfully built a system that responds to user input with realistic motion. From here, you can experiment by adding more forces (like gravity or wind) inside the animation loop.

Thanks for coding along!