Objectives:

• Detect collisions between the ball and the target
• Trigger haptic feedback

We can implement some basic collision detection within the DeviceMotion listener. We need to compare the position of the ball and the position of the current target, taking into account the ball and target size, as well as the width of the targets border.

We'll use the pre-made getIsBallInTarget function from our custom hook to handle this for us, but feel free to adjust the logic if you desire.

if (
  getIsBallInTarget({
    ballX: ballAnimation.value.x,
    ballY: ballAnimation.value.y,
    targetX: targetAnimation.value.x,
    targetY: targetAnimation.value.y,
  })
) { ... }

When the ball is in the target, we want to move the target to a new random position. For that we can use the getRandomTargetPosition helper again to update the position of the target.

targetAnimation.value = getRandomTargetPosition();

We can make this into a nice smooth animation by using withTiming again. The default animation easing is quite suitable for this, sliding in a natural-looking way:

  const targetPosition = useAnimatedStyle(() => ({
    transform: [
      { translateX: withTiming(targetAnimation.value.x, { duration: 350 }) },
      { translateY: withTiming(targetAnimation.value.y, { duration: 350 }) },
    ],
  }));

A great benefit of React Native is that it makes access access to device functionality, such as audio, haptic feedback and the camera, very easy.

To improve the user experience of our game, we can trigger haptic feedback when the ball collides with the target.

We will trigger a simple haptic notification using Expo's Haptics library.

Haptics.notificationAsync();