Hey notJust Developers, Engineers at Infinite Red and Callstack have recently done amazing work in the React Native community. In today's newsletter, we highlight the top three stories from these teams.
- Introducing Ignite X 🚀
- New React Native Bottom Tabs out 🔥
- Re.Pack now 5x faster by Rspack 💯
Now, let’s explore each news story in detail.
This issue is Sponsored by Genezio
Genezio is a powerful serverless platform for building full-stack web and mobile applications in a scalable and cost-efficient way. Some of the key benefits of Genezio are: reduced cold start time, easy deployment and cost-effective pricing.
What I loved about Genezio, is their compatibility with a wide range of Frameworks. I recently deployed to Genezio the Backend of an e-commerce app build with Express and it worked like a charm.
Try Genezio for free and deploy your full-stack apps with ease.
Introducing Ignite X 🚀
This week, the Infinite Red team released Ignite V10.0, now called Ignite X. Ignite was first released in early 2016. It is a CLI and a battle-tested boilerplate for both Expo and bare React Native apps. With over 17,000 stars and hundreds of contributors, Ignite helps reduce the costs of starting a new app. Now, Ignite X makes it even easier and faster to start a new React Native app.
What’s exciting in Ignite X?
- Expo Prebuild (CNG system) as default: Ignite X now uses the Expo CNG system to automatically edit native platform files (e.g.,
AndroidManifest.xml, Info.plist) while installing native dependencies (such as camera library). No more manual updates are needed for those files! All you need to do is set up the config plugins! - Easy dark mode support.
- Experimental support for Expo Router (A file-based routing system).
- MMKV (react-native-mmkv) as AsyncStorage which is very fast & easy to use.
- New i18n configuration with react-i18next for smooth internationalization (e.g., English, Arabic).
- Improved keyboard avoidance for text input by using react-native-keyboard-controller.
- Pre-configured for React component testing with react-native-testing-library, saving your team up to a week of work 🤟.
You might already be impressed and thinking, "Oh, yes, Ignite X is the perfect name for Ignite V10.0 with all these amazing features and improvements." Don't wait—try it today!
New React Native Bottom Tabs out 🔥
Another great news is that Oskar (engineer at @callstackio) has been working with Native Bottom Tabs for the past couple of weeks to replace the popular React Navigation Bottom Tabs (@react-navigation/bottom-tabs), which was written in JavaScript 😬. Finally, last week, he released the “React Native Bottom Tabs” library. This new library uses native platform elements (SwiftUI's TabView on iOS and BottomNavigationView on Android) to ensure a native look across different platforms (e.g., iOS, Android, visionOS).
JS Vs Native Bottom Tabs
- Instead of recreating the UI (with JS), Native Tabs uses direct native platform elements to create the tabs.
- Native Tabs can adapt to the platform interfaces (e.g., tvOS displays tabs as a sidebar), whereas JS Tabs are always positioned at the bottom on all platforms 🤦.
- Native Tabs use the platform's designs (e.g., Material's BottomNavigationView design in Android), while JS tabs look the same on all platforms.
- Native Tabs handle animations (e.g., tabs icon bouncing) more smoothly than JS tabs because UI (native) threads are faster than JS threads.
NOTE: Oskar mentioned that 95% of your React Navigation Bottom Tabs code remains unchanged; just switch the import to {createNativeBottomTabNavigator}. It now supports both Expo Router & One framework 💯.
Re.Pack now 5x faster by Rspack 💯
In May this year (2024), Jakub from Callstack announced a preview of Re.Pack V5, and finally last week, he released Re.Pack V5 Alpha. Re.Pack is a more advanced toolkit than the default Metro for bundling JavaScript code & images in React Native apps. Re.Pack was created to bring the Webpack ecosystem, a popular asset bundler for the web, to React Native. Webpack handles complex pre-processing for assets like SVGs (reducing SVG size), does advanced bundle analysis, uses advanced caching techniques, and aggressively eliminates unused code to improve bundle size and performance. Metro has only a few of these features 💁♂️.
What’s new in V5?
Starting from V5, Re.Pack uses Rspack, which is written in Rust and offers much faster build times compared to Webpack. You can switch between Rspack and Webpack if needed. Rspack supports many Webpack plugins and loaders (assets pre-processors that can reduce sizes at build time), meaning it has almost all the capabilities of Webpack but with super-fast build times that significantly improve dev mode startup performance. Jakub mentioned that Re.Pack is now 5x faster with Rspack than with Webpack. That’s crazy 🙀!
That’s it 🙌
React Native is quickly becoming the top choice for cross-platform developers (even better than native 🤷♂️). We're seeing new SDKs that make React Native faster and feel more like native apps. Plus, new frameworks like One are shaking things up and making the React Native ecosystem more exciting.
🔴 Join me live
This Thursday we will build an Ecommerce Admin Dashboard with Next.js. It's going to be a tutorial packed with value, so set a reminder and don't miss it out 👇
🔁 In case you missed it
 Building a scalable API with NodeJSYou’ll learn how to build a scalable and production-ready REST API for an e-commerce application using NodeJS, TypeScript, and Express. We’ll guide you step-by-step through essential backend tools like Drizzle for database interactions and Postgres for data storage, all while integrating Genezio to simplify deployment. | |  Build an e-commerce app with React Native, Expo and GluestackWe’ll build the frontend UI for our e-commerce app using React Native, Expo, and Gluestack. You’ll learn how to design a responsive interface while integrating with the REST API we created in part one. We’ll also cover managing server-side data with TanStack Query to keep everything efficient. |
🔥 Press worthy
1️⃣ React Native 0.76 RC.6 has just been released. The stable 0.76 drops next week!
2️⃣ Software Mansion released React Native SVG v15.8.0 with new filters FeFlood (fills an area by color) & FeBlend (merges two images in SVG for special effects); supports 0.76.
3️⃣ Alireza Introduced new react-native-fast-confetti, built with Skia and Reanimated 🎊.
4️⃣ BottomSheet v5 is finally out, supporting Web, Dynamic Sizing, and FlashList Integration.
5️⃣ NativeWind v4.1.16 is now live with support for Radon IDE, built by Software Mansion.
Did you learn something new today?
If you found this email valuable, forward it to one friend or coworker who can also benefit from it. That would be much appreciated 🙏
The newsletter was written by Anis and edited by Vadim Savin.
| | Vadim SavinHelping you become a better developer together with the notJust.dev team |
{{ snippet.footer-promo }}
