(🐱-1-2; Failed, Again) By React Native, Develop Media Preview and Converter (Wewayangan Media Viewer)

#devjournal #javascript #mobile #reactnative

You may actually read my unfinish previous post where I try to learn Kotlin to Develop this app. But, now, I want to do that in React Native. I just thought doing in Kotlin (for native performance) is almost overkill. That's why I flee to React Native. But, why RN? It is simple, it is javascript, and NPM has many libraries for every day. Uuh... I mean I want to end this project as fast as possible. You may met me again for other exploration and journey.

Summary. I want to have a battery-ready boilerplate, so of course I go with Expo. Unfortunately, it only support Web (SSG), Android, and iOS. ~~It is not support Desktop. That's why I would (once again) find alternative and go to Flutter. Wish me luck. 🤞~~ Or I would not use Expo. I'll try my best. 🤞

Yes. This is a failed project as RNW is not working. I may not trying hard. Well, let's just go with Flutter.

Written Notes

Ok. I would not wrote much. As before, I would explore RN frameworks, bootstrapers, project wizard, boilerplates, templates, starterpack, meta-framework, battery-ready, scaffolding, stacks, opinioned, and the alternatives. Then, I compare every project structure.

Fast forward, I use Gemini and Google Search AI. It found out: Expo Framework, Infinite Red Ignite CLI, Create T3 Turbo, and Create Expo Stack (CES). Other interesting things: Tamagui Starters, Tamagui Takeout, Solito, Gluestack UI Starter, Obytes Starter, Expo Router Starter, and NativeWind Starter. And last... TheCodingMachine React Native Boilerplate, @react-native-community/cli, NativeWind, and NativeWindUI. Actually, there are much, you could try to prompt them by keywords earlier.

When I do prompting, there are certain keywords pop-up: Expo and Solito. By process of elimination, the one that certainly focused for Mobile development are Ignite, CES, and TheCodingMachine while both extend Expo framework.

Ignite CLI resulting few decision: Code Native Generation or Manual? Expo Router (dep: expo-router; Experimental) or React Router? This boilerpalte is opinioned following Infinite Red's best practice. Which is using MobX as state management. With Demo App, there is additional dependency name expo-application. And with Expo Router, would have main to expo-router/entry. No styling, use react navigation, apisauce, data-fns, and reactotron.
CES/RN-new has: React Navigation or Expo Router? Nativesind/StyelSheet (vanilla)/Unistyle/NativewindUI? Use Zustand? Use auth with Supabase or Firebase? setup EAS? The @react-navigation/ is using stack module. Has .yarn/ and its auto commit.
TheCodingMachine is built on-top of ReactNativeCommunity template generator. The only question: use Typescript? It is not using Expo. But, using Zod, with react navigation, ky, react native mmkv, and reactotron.

I am not need an overkill boilerplate. An Expo Framework with Expo Router is enough. And I need to target Android and Desktop. I love Tailwind, so I may use Nativewind, Uniwind, xor NativewindUI. I also don't need a test suit. In conclusion, I would follow basic React-Expo setup and then take few modules and project structure from these boilerplate.

Not like Kotlin, I already have experience in JavaScript, TypeScript, NodeJS, NextJS, and React. For now, I just need to learn-by-doing to understand Android or mobile skeleton.

Ok. Let's just start.

4 Jan 2026

As Expo cannot have Windows, I need to test few things. I would try to generate Expo, Ignite CLI, CES, and TCM. Then, I follow every modules and principles they have. For a moment, I need the most battery-ready, so Expo + App Router + Nativewind.

npx rn-new@latest rnrnnew --expo-router --nativewind --zustand --yarn

npx ignite-cli new rnigcli \
  --bundle=com.rnigcli \
  --git \
  --install-deps=false \
  --packager=yarn \
  --target-path=C:\Users\farha\Downloads\workspace\temp\rnigcli \
  --remove-demo \
  --experimental=expo-router \
  --workflow=cng \
  --no-timeout=false

Seems I would chose either CES xor TCM. CES would be the first thing I choose. If such ad-hoc use-case need a dependencies, I will imitate one of them (include vanilla and ignite cli). I will document every consideration in next steps.

Environment Setup

I would follow Expo setup environment and React Native setup environment. Similar to previous blog, I use Windows:

Via Jetbrains Toolbox, install Android Studio. Use latest SDK.
Download Jetbrains Runtime SDK with JCEF (JBRSDK-JCEF)
Download Android 15 SDK
Set Environment Variables, use GUI.

ANDROID_HOME=%LOCALAPPDATA%\Android\Sdk
PATH=%PATH%:%ANDROID_HOME%\platform-tools
PATH=%PATH%:%ANDROID_HOME%\emulator

Download Android Emulator. I use Android Desktop Medium.
Generate Expo project with Create Expo State / rn.new

npx rn-new@latest wewayangan --expo-router --nativewind --zustand --yarn

undo commit as CES would commit .yarn/ into it. Remove it first.
Git commit all content inside for initiation, ensure .gitignore exists.
Run npx expo install expo-dev-client and git commit again
Install Expo Tools - Visual Studio Marketplace, React Native Tools - Visual Studio Marketplace, and other extension related to Expo and React Native
Run npx expo-doctor

Everything should already been setup. I would follow few tutorial and guidelines along this app development.

No. Please also do this for React Native Windows. System Requirements · React Native for Windows

Libraries Setup & Framework Preparation

I should say many steps is not shown previously, it includes push branch to Github, Extention already installed, global npm, and fixing missing toolkit from expo-doctor. Goodness, no issues.

The Framework is not fully complete, I want to build to Android and Windows for this MVP. Then, I need to install few libraries.

Good things, Expo Router Navigation is installed by default.
Then, I need React Native Windows, NativeWind, and Zustand/Zod

F**K. Why should I... I should explore it and research it more. In the end, EXPO not working with Windows. Even, the official ReactNativeWindows is encapsulating Electron, like whaaaaaat...

Should I just move on to Flutter? Or I just give up the Desktop one. Why in the world.

Ok. ~~I will start Flutter~~. After this all mess is done, I will wrote some ranting how to choose your first programming language unwisely without following the mainstream "YOU SHOULD START BY THE BASIC!".

4 Jan 2026

Or, no, hehe. I would not use Expo. Just learn by it. Ok, I use CES and following previous steps. One thing should be remember, the initial commit by CES is also include .yarn/. I need to undo commit and remove it first.

I follow everything in system requirements, of course not following scripts. Still failed, even after installing .Net 6 for whatever reason. Then, I gave up and use scripts in node_modules\react-native-windows\scripts\rnw-dependencies.ps1, it install .Net 8 for some reason while not match with the docs. I do it. And finally, still not working.

✖ Building Solution
 ✖ Build failed with message 5:5>LINK : fatal error LNK1104: cannot open file 'C:\Users\username\.nuget\packages\microsoft.windowsappsdk\1.7.250401001\buildTransitive\native\..\..\lib\win10-\Microsoft.WindowsAppRuntime.Bootstrap.lib' [C:\Users\username\Downloads\wewayangan-mediaplayer\node_modules\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj]. Check your build configuration.
 ℹ Gathering MSBuild data for telemetry.
 ℹ Unable to find msbuildproperties.g.json
Command failed with error MSBuildError: 5:5>LINK : fatal error LNK1104: cannot open file 'C:\Users\username\.nuget\packages\microsoft.windowsappsdk\1.7.250401001\buildTransitive\native\..\..\lib\win10-\Microsoft.WindowsAppRuntime.Bootstrap.lib' [C:\Users\username\Downloads\wewayangan-mediaplayer\node_modules\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj]
Your telemetry sessionId was ...

Aaa... I still do not know. I want give up for now. This will be archived and next time is about troubleshooting this, doing some Nativewind works, and try to push Expo further. This development of Wewayangan using React Native is failed and ends here. I just want to get native experience and RNW is using Electron is a big no for me.

For now, let's just going with Flutter.