Amine BEN YEDDER

January 14, 2026

Build a Bicycle tap Game in React Native Part 2: Initial Setup

Previous: Build a Bicycle tap Game in React Native Part 1: Introduction

This initial setup section walks you through installing the required dependencies, configuring Metro and Expo, and preparing the project (including the app icon and development build) so the game runs correctly in a production-like environment from the start.

If you’re starting fresh, use this command to create a new blank project:

terminal

npx create-expo-app bicycle-game
cd bicycle-game

Dependencies

To build this game, we rely on a small but powerful set of libraries. Each one plays a very specific role in performance, animation, and input handling. Keeping the dependency list focused helps avoid unnecessary complexity while still achieving smooth, game-like behavior.

react-native-reanimated

This is the backbone of the game engine:

Runs animations and logic on the UI thread
Provides useSharedValue, useFrameCallback, and useAnimatedStyle
Ensures consistent 60fps even under JS thread pressure

Without Reanimated, frame-based movement and collision checks would quickly stutter.

terminal

npx expo install react-native-reanimated

react-native-worklets

This package allows safe communication between:

Reanimated worklets (UI thread)
React state updates (JS thread)

We use it to synchronize game state (RUNNING, PAUSED, OVER, etc.) with React UI overlays.

terminal

npx expo install react-native-worklets

@lottiefiles/dotlottie-react-native

Instead of sprite sheets, we use Lottie animations:

Smooth vector animations
Tiny file sizes
Speed control (setSpeed)
Loop callbacks (onLoop) used as a gameplay mechanic

This lets us simulate "energy decay" without physics.

terminal

npx expo install @lottiefiles/dotlottie-react-native

@expo/vector-icons

Used for:

Play / Pause / Replay icons
Overlay controls

Keeps UI lightweight and consistent across platforms.

terminal

npx expo install @expo/vector-icons

react-native-svg

Used for rendering scalable vector assets in the game UI:

SVG rendering for in-game vector assets
Resolution-independent scaling across devices
Cross-platform consistency (iOS & Android)

terminal

npx expo install react-native-svg

expo-navigation-bar

This package is used to manage the Android system navigation bar and enable an immersive, full-screen game experience:

Control the Android system navigation bar
Enable full-screen, immersive gameplay
Prevent system UI from overlapping the game screen

terminal

npx expo install expo-navigation-bar

@expo/metro-config

This package provides the base Metro configuration used by Expo and allows customizing asset resolution and bundling behavior:

Extend Metro to support custom asset types (e.g. .lottie)
Ensure compatibility with Expo’s bundler defaults
Enable safe Metro customization without breaking Expo internals

terminal

npx expo install @expo/metro-config

Configurations

This section covers the mandatory project configuration required to correctly load .lottie assets, enable Lottie plugins, and ensure the game runs in landscape mode with proper system UI behavior.

Metro configuration

Metro must be explicitly configured to recognize .lottie files as binary assets. Without this, Lottie animations will fail to load at runtime.

metro.config.js

const { getDefaultConfig } = require("@expo/metro-config");

const config = getDefaultConfig(__dirname);

// Add .lottie as an asset extension
config.resolver.assetExts.push("lottie");

module.exports = config;

Why this is required

.lottie files are not recognized by default
Metro needs to treat them as static assets
Required for require("./monster.lottie") to work correctly

Expo app configuration

Add the following Expo configuration that defines orientation, plugins, native behavior, and Lottie support.

app.json

{
  "expo": {
    "orientation": "landscape",
    "scheme": "dinogameapp",
    "icon": "./assets/icon.png",
    "android": {
      "adaptiveIcon": {
        "backgroundColor": "#FFFFFF",
        "foregroundImage": "./assets/icon.png"
      },
    },
    "plugins": [
      "@lottiefiles/dotlottie-react-native/plugin",
      [
        "expo-navigation-bar",
        {
          "visibility": "hidden",
          "behavior": "overlay-swipe"
        }
      ]
    ]
}

Key configuration highlights

Landscape orientation: Required for horizontal scrolling gameplay.
DotLottie plugin enabled: Ensures native support for .lottie animations.
Navigation bar hidden (Android): Prevents system UI from interfering with gameplay.

Project structure

A clear and predictable project structure is important when building a game in React Native. It helps separate game logic, rendering, and assets, making the codebase easier to maintain and extend.

Below is a recommended structure for this project:

Project structure

index.ts                // App entry point
App.tsx                 // Main application component (renders the game)

/assets
  monster.lottie        // Monster animation
  character.lottie      // Player character animation
  Background.tsx        // Tiled background component
  Flag.tsx              // SVG flag component (react-native-svg)
  icon.png              // App icon (iOS & Android)

app.json                // Expo configuration
eslint.config.js        // ESLint configuration
metro.config.js         // Metro bundler configuration
package.json            // Dependencies and scripts
tsconfig.json           // TypeScript configuration

Structure rationale

index.ts: Application entry point. Registers the root component.
App.tsx: Main component of the app. This is where the game screen is mounted and rendered.
assets: Centralized location for all visual and static resources:
- .lottie files for animations
- SVG-based components
- Background rendering logic
- App icon
app.json: Controls app behavior (orientation, plugins, splash screen, navigation bar, Lottie support).
metro.config.js: Required to support .lottie assets and ensure correct bundling.
eslint.config.js: Ensures consistent code style and catches common mistakes.
package.json: Declares dependencies and scripts.
tsconfig.json: TypeScript compiler configuration.

This structure keeps:

game logic centralized,
assets easy to manage,
configuration explicit and predictable.

Running the App

App icon (required before running the app)

Before creating a development build, make sure an application icon is present and correctly configured.

The app icon is required by Expo during the build process and is used for:

the launcher icon on Android
the app icon on iOS
adaptive icons on Android

What you need

An image file named icon.png
Placed in the /assets directory
Referenced in app.json

You can either use the icon provided by this project by downloading it from here

Alternatively, you can use your own icon.

Create the development build

Run the following command once:

terminal

npx expo prebuild

Then build and install the Android development app:

terminal

npx expo run:android

This will:

generate native Android files
install the app on the emulator or device
link all native plugins correctly

Why a development build is required

Expo Go does not include:

the DotLottie native plugin
custom Metro asset extensions (.lottie)
full Reanimated + worklet behavior

Using Expo Go may result in:

animations not playing
runtime crashes
inconsistent performance

A development build ensures the app runs in an environment close to production.

Next: Build a Bicycle tap Game in React Native Part 3: Assets