It has been three years since I last worked on a React Native app, and I’ve been wanting to write about this for a long time but always kept forgetting. It was also my last blockchain NFT project, which I will discuss in a separate post another day (I promise it will be an interesting story instead of this “tip” post). I’m telling you my story of getting my React Native app to render a binary file (which was not supported then) to give you an idea of a workaround if you’re facing a similar problem.
tldr; if you have any issues with React Native app, but the React app works fine on your phone browser, try to embed it in React Native via WebView.
The context
My previous project involved a startup company led by ‘visionary’ founders who, unfortunately, lacked a concrete plan and failed to pay my salary due to unsuccessful fundraising 🤷♂️. I was the only developer tasked with simultaneously creating a landing page and a mobile app.
The app was a mobile communication (chat) platform featuring a 3D avatar, and users could purchase NFTs to use within the chat app. Given my familiarity with React, and after a few hours of researching 3D rendering libraries and developing a working PoC with React, I decided to build the app using React Native. I thought to myself, ‘It’s React, after all — how different could it be, right?’”
The problem
Things were going great after I finished the “chat app”, then I rolled my sleeve and vibed with the screaming vocals from my heavy metal playlist. The simple 3D models were working fine, but then I could not get it to render a binary file, which was an 3D .FBX file with animations in it. I googled everywhere (chatGPT was not so great then) and could not find how to do it because the issue was React Native itself that didn’t support the array buffer thingy I vaguely remember. Not sure if it is sorted by now.
I tried to load it on the regular React app, and it’s working fine; I used my phone to launch the web app, and it’s also working fine. I was panicking because the demo day was near, and I needed to make it work that week.
So I turned to my previous colleague, a senior mobile developer with React Native techstack, for help, but sadly, he couldn’t solve the problem either.
Based on my limited time and skills, I could not dive into the React Native core itself and fix it. I was hopeless at the time.
“Sometimes darkness can show you the light” — Disturbed
In that dark time, my mentor hinted: “What if we put a web app in the React native app?”
So, I tried hosting a React app on Vercel and loading it as a WebView into my React Native app, and it worked perfectly.
To interact with the iframe, there are millions of blogs to guide you through that, or you can just ask chatGPT, so I won’t put it here.
The problem was solved; however, the pitching was at the wrong time, when the whole Blockchain and NFT trend collapsed, and they scammed my money when I needed it the most—for my wedding!!!
But in the end it doesn’t even matter — Linkin Park
If you have a customer-centric mindset (https://medium.com/@whoz_/beyond-code-dont-just-be-a-coder-a9bad8007dca), you might find this workaround helpful in various cases. It saves you time trying to make it work properly to seize the market quickly. What’s the point of having the perfect executed app that you’re coming to the market too late, or worse when the customer doesn’t really need it and also too late to rework based on the feedback?