Building Nexus Fleet: a roguelike Sea Battle with React Native

I'm excited to share the journey of creating my mobile game Nexus Fleet. It's a roguelike take on the classic Sea Battle, where each victory propels you into a new game with your surviving fleet, and strategic choices of new ships or powerful admirals with unique abilities heavily influence your chances of success. With 15 distinct admirals to discover, each run offers a fresh tactical challenge. Nexus Fleet is available now on both Android and iOS! In this article, I wanted to dive into the technology stack behind Nexus Fleet and share some of the experiences I had during its development. React Native One of the primary motivations for choosing React Native was my existing familiarity with React, even while I'm experienced with Unity. The component-based architecture and the declarative approach to UI development felt natural and allowed me to leverage my web development skills in the mobile space. I was able to dive deeper into making custom game elements like Game management context, Notification context, unified Grid component or Actor (player/enemy) custom effect. In main _layout.tsx file I wrapped everything in GameContext. This way game status and access to all game related informations are available anywhere. Here is a preview of available functions: return ( {children} ); I wanted custom whole screen notification so I've made NotificationContext. It handles showing dismissable queued notifications even when switching screens with fade in and out animation. I feel proud on this piece of code. Here is a preview of final result: Expo framework To streamline the development process, I opted to use the Expo framework as it was suggested everywhere. After developing a big portion of my game I discovered I have to use EAS for build. My first emotion was disappointment, because I prefer to do task locally. I started thinking how to get rid of Expo. Fortunatelly I discovered I can still build locally for android while I use Expo. For those interested you need to run these commands: npx expo prebuild npx react-native build-android --mode=release If you need to build signed bundle for Google play store check out this great manual: https://reactnative.dev/docs/signed-apk-android Story for making iOS build is a bit different. I discovered I need apple device to make it happened. Which I don't have as windows user. I read something about running MacOS in virtual machine, but that does sound like a lot of hustle. However I realized I could use EAS. Limit 15 free builds should be enough. So I gave it a try and frankly, in the end I was thankful for this cloud tool, it became really helpful to build and submit iOS build. Now my package.json contains following scripts: eas build --platform ios eas submit --platform ios Expo router and status bar packages were also very helpful to create required layout. And let me say, one of my favorite things with packages in this framework are icons. It includes all popular icon packages and you can use all of them. https://docs.expo.dev/guides/icons/ Visual and AI As a developer with limited graphic design skills, the emergence of AI image generation tools has been a game-changer. For Nexus Fleet, I heavily relied on AI to create admiral portraits and background elements. These tools allowed me to quickly iterate on visual concepts and generate assets that fit the game's aesthetic without requiring extensive manual design work. This significantly sped up the development process and allowed me to focus on the gameplay mechanics and programming. In the end I tried out Microsoft Clipchamp for the first time to make some promotional video. It's really practical and easy to use tool. You can check out the result on youtube: Future plans There are some ideas. I would like to add sounds, music, leaderboard, battle history log and some settings to customize UI. Maybe a multiplayer would be a great feature. We will see. If you have some suggestions you can add them here: https://github.com/stefanak-michal/nexus-fleet-game/issues

Apr 29, 2025 - 10:20

Building Nexus Fleet: a roguelike Sea Battle with React Native

I'm excited to share the journey of creating my mobile game Nexus Fleet. It's a roguelike take on the classic Sea Battle, where each victory propels you into a new game with your surviving fleet, and strategic choices of new ships or powerful admirals with unique abilities heavily influence your chances of success. With 15 distinct admirals to discover, each run offers a fresh tactical challenge. Nexus Fleet is available now on both Android and iOS!

In this article, I wanted to dive into the technology stack behind Nexus Fleet and share some of the experiences I had during its development.

React Native

One of the primary motivations for choosing React Native was my existing familiarity with React, even while I'm experienced with Unity. The component-based architecture and the declarative approach to UI development felt natural and allowed me to leverage my web development skills in the mobile space. I was able to dive deeper into making custom game elements like Game management context, Notification context, unified Grid component or Actor (player/enemy) custom effect.

In main _layout.tsx file I wrapped everything in GameContext. This way game status and access to all game related informations are available anywhere. Here is a preview of available functions:

return (
    <GameContext.Provider
        value={{
            player,
            enemy,
            status,
            newGame,
            setGameStatus,
            admiralPool,
            secondChanceAdmiral,
            addedSecondChanceAdmiral,
            statistics,
            rewardAdmiral,
            setRewardAdmiral,
        }}
    >
        {children}
    </GameContext.Provider>
);

I wanted custom whole screen notification so I've made NotificationContext. It handles showing dismissable queued notifications even when switching screens with fade in and out animation. I feel proud on this piece of code. Here is a preview of final result:

Expo framework

To streamline the development process, I opted to use the Expo framework as it was suggested everywhere. After developing a big portion of my game I discovered I have to use EAS for build. My first emotion was disappointment, because I prefer to do task locally. I started thinking how to get rid of Expo. Fortunatelly I discovered I can still build locally for android while I use Expo. For those interested you need to run these commands:
npx expo prebuild
npx react-native build-android --mode=release

If you need to build signed bundle for Google play store check out this great manual: https://reactnative.dev/docs/signed-apk-android

Story for making iOS build is a bit different. I discovered I need apple device to make it happened. Which I don't have as windows user. I read something about running MacOS in virtual machine, but that does sound like a lot of hustle. However I realized I could use EAS. Limit 15 free builds should be enough. So I gave it a try and frankly, in the end I was thankful for this cloud tool, it became really helpful to build and submit iOS build. Now my package.json contains following scripts:
eas build --platform ios
eas submit --platform ios

Expo router and status bar packages were also very helpful to create required layout. And let me say, one of my favorite things with packages in this framework are icons. It includes all popular icon packages and you can use all of them. https://docs.expo.dev/guides/icons/

Visual and AI

As a developer with limited graphic design skills, the emergence of AI image generation tools has been a game-changer. For Nexus Fleet, I heavily relied on AI to create admiral portraits and background elements. These tools allowed me to quickly iterate on visual concepts and generate assets that fit the game's aesthetic without requiring extensive manual design work. This significantly sped up the development process and allowed me to focus on the gameplay mechanics and programming.

In the end I tried out Microsoft Clipchamp for the first time to make some promotional video. It's really practical and easy to use tool. You can check out the result on youtube:

Future plans

There are some ideas. I would like to add sounds, music, leaderboard, battle history log and some settings to customize UI. Maybe a multiplayer would be a great feature. We will see.

If you have some suggestions you can add them here: https://github.com/stefanak-michal/nexus-fleet-game/issues