My name is Szymon Rybczak, and I am a React Native developer at Callstack. On a daily basis, I work in a tech team where I support research and development initiatives. Iโm also involved in maintaining the React Native Community CLI and other libraries. You can find me on GitHub and Twitter under my handle, where I often share what weโre working on at Callstack.
Bringing AI to React Native: The Game Changer
I will dive into a topic thatโs on everyoneโs mind these days: AI. But this isnโt going to be just another talk about integrating GPT calls. No, I want to take AI in React Native to a whole new level. My goal is to explore how we can make AI locally accessible within React Native apps, even without an internet connection. Sounds exciting, right? Let me explain how.
AI Everywhere: But Letโs Bring It Closer to Home
AI is everywhere. Itโs almost impossible to have a conversation these days without hearing about the latest AI model thatโs faster, cheaper, and better. From work chats to dinner conversations, AI is shaping the way we solve problems and interact with technology. But thereโs one glaring issue: right now, most of AI runs in the cloud. And the cloud isnโt cheapโit involves servers, infrastructure, and constant connectivity.
Why Not Use the Power of Mobile Devices?
But what if we could tap into the incredible processing power of the devices we all carry in our pockets? Modern mobile devices have tremendous performance capabilities. Take the iPhone 15 Pro, for example. When benchmarked against the iPad Mini with an M2 chip, the iPhone actually outperforms the iPad in single-thread performance. This shows that the devices we use every day are more powerful than we realize.
The Browser Gets a Taste of Local AI: Enter Gemini Nano
Letโs talk about some recent breakthroughs. Chrome has introduced a feature called window.ai, which allows you to run an LLM (Large Language Model) called Gemini Nano locally within the browser. This version of Gemini, though smaller, performs incredibly well. It can do simple math, answer questions, and is available anytime without needing internet access. Imagine this: in the future, every browser might adopt this capability, making AI inside web apps a breezeโeven when your internet connection isnโt the best.
Now, letโs bring it back to React Native and mobile apps. The question is: can we harness this power for mobile devices too? Who here uses React Native on a daily basis? Raise your hands! Alright, quite a few of you. So, when I started exploring how we could run models on mobile devices, I came across this fascinating project called MLC LLM.
MLC LLM: Bringing AI Models Everywhere
MLC LLM is a universal engine that allows us to deploy and run LLM models on any platform. So, how does it work? There are three key phases involved. First, we need to download the model from Hugging Face (think of it as the npm registry for AI models). Next, we compile the model into the right format using some Python scripts. And finally, we get the binaries, which can be easily linked to Android and iOS apps. From there, we can access the model directly in React Native.
Creating a Library for React Native
With this newfound power, I knew I had to create a library for React Native. At Callstack, we built a tool called Create React Native Library, which helps developers create React Native libraries with templates for Fabric, TurboModules, and more. Kudos to Satya and Burak for maintaining it! This tool will soon be the official method for creating React Native libraries as part of the Golden Library Initiative.
Making the JS API Simple and Powerful
When I prototyped the project, I wanted a simple and intuitive JS API. I looked at how the Vercel AI SDK integrates with web apps and thought: this could work for React Native, too! All you need to do is import a method like generateText or streamText from the AI package, pass in your provider and prompt, and voilร โyouโve got AI-generated text.
The Magic of Providers in AI
One of the coolest things about this is the flexibility of providers. You can pass any provider you wantโfrom Vercelโs own AI to a custom one. Or, you can use a provider from the React Native AI module that runs the model from the native runtime and exports it to JavaScript. This opens up endless possibilities for integrating AI locally in React Native apps.
Demo Time: Bringing It All Together
Alright, enough talkโletโs see this in action! Iโm going to mirror my screen and show you how this all works in a React Native app. Iโve turned on airplane mode and disabled my internet connection, so weโre running fully offline. Now, letโs ask the model a simple question like, "Whatโs React Native?" The model processes the query, andโboom!โwe have a locally generated response: "React Native is an open-source mobile application framework created by Facebook."
Under the Hood: The Tech That Makes It Happen
Letโs take a closer look at how this works under the hood. The React Native AI module has native code for both Android and iOS. On Android, I write a wrapper that calls the binaries produced by the MLC engine, and on iOS, I do something similar with static libraries that are linked during build time. I then export this functionality to JavaScript, where it integrates seamlessly with the Vercel AI SDK.
Overcoming Challenges: Polyfills and More
Of course, there were some challenges along the way. Not everything worked perfectly right out of the box. For instance, I had to add polyfills for streaming and other features. But the good news is, things are getting better! Hermes, the JavaScript engine for React Native, is actively improving its support for features like TextEncoder, and the ecosystem is evolving rapidly.
The True Power of React Native
Whatโs the takeaway here? The true power of React Native lies in its flexibility. We can play with low-level stuff, integrate complex AI models, and still maintain a smooth, intuitive JavaScript API. This is what makes React Native such a powerful toolโit allows us to leverage the best of both worlds.
Whatโs Next for This Project?
This is just the first iteration of the React Native AI project, and thereโs still a lot to do. The API is still in its early stages, and Iโm planning to sit down with Oscar (who spoke earlier) to compile it for Vision OS. Imagine running these AI models on a device like Vision Pro, which has an M2 chipโitโs going to be incredible. Iโm also looking forward to seeing how Apple integrates AI models directly into the OS in the future.
Iโve just open-sourced this project, so if youโre curious to see how it all works in detail, scan the QR code or head to my GitHub and search for the React Native AI repository. Itโs all there, and Iโd love for you to check it out, contribute, or just follow along as we continue to build.
Wrapping Up and Whatโs Next
Thank you for having me here today! Itโs been a pleasure to share this with all of you. Callstack also organizes a conference next month in Wrocลaw, Poland. If youโre interested, hereโs a promo codeโjust scan it, and I hope to see you there.
Integrating AI directly into React Native apps empowers mobile devices to run advanced models offline, unlocking powerful, real-time capabilities without cloud dependence. This approach transforms mobile app performance, offering seamless AI functionality anytime, anywhere.
Thatโs all from me for now, but keep exploring the true power of React Native and AI. The possibilities are endless!
