November 2024 Summaries

Expo SDK 52 and React Native 0.76 mark a significant advancement in the React Native community by enabling the New Architecture by default in new projects, which is now ready for production use. Upgrading to this new version involves typical release concerns like bug fixes and API changes, alongside the new challenge of integrating the New Architecture, which affects how JavaScript interacts with the native layer. This shift has impacted Expo Go users, necessitating updates to SDK 52 and the New Architecture, which can complicate the upgrade process by requiring simultaneous updates. While most libraries have adapted to the New Architecture, unique challenges can arise during upgrades, prompting the Expo team to seek community feedback through GitHub issues to better address common problems. For a smoother transition, developers are encouraged to use development builds, allowing them to upgrade incrementally and isolate issues, rather than relying solely on Expo Go, which may not fully replicate production app features. The Expo team also provides detailed troubleshooting guides to aid developers in navigating any upgrade-related issues efficiently.

SDK 54 introduces significant changes to edge-to-edge implementation for Android, mandating edge-to-edge display for apps targeting Android 16, while phasing out the react-native-edge-to-edge library in favor of React Native's enableEdgeToEdge build.gradle property. This transition is backwards compatible, but developers using the react-native-edge-to-edge config plugin must list it as a direct dependency. The update also introduces an enforceContrast property to manage navigation bar transparency for better contrast with app content. The changes align with Google's push for edge-to-edge displays, enhancing app aesthetics by allowing content to flow seamlessly beneath system bars. With SDK 53, edge-to-edge was enabled by default for new projects, while SDK 54 extends this default to both new and existing projects, reflecting a broader industry shift towards immersive app experiences. Developers are advised to update dependencies to ensure compatibility and leverage the new configuration options available through the react-native-edge-to-edge plugin for additional customization.

Environment variables play a crucial role in development workflows by helping to separate configuration from code, thus allowing for more efficient management of different computing environments such as development, preview, and production. EAS has introduced a new system to securely store and synchronize environment variables across EAS Build, EAS Update, and other platforms, ensuring they remain consistent and up-to-date with a single source of truth. This new feature addresses challenges like making environment variables available remotely during cloud builds and eliminating the need for duplicating them in local environments. By introducing environment-specific scoping and new visibility settings, EAS enhances the flexibility and security of environment variable management. These improvements also simplify the process of syncing variables across different contexts and facilitate easier local development by allowing developers to pull variables directly from EAS servers. The migration from the old system to the new one ensures a smoother experience, with the added capability of customizing visibility settings to suit varying needs, ultimately streamlining the development process for users.

LiveStore, developed by Johannes Schickling, is a local-first data layer built on SQLite designed to enhance app performance by enabling offline functionality and real-time data synchronization across devices. This cross-platform solution, which recently integrated with Expo, aims to overcome challenges in data management by providing tools like live data browsers, query inspectors, and schema management systems. Unlike traditional request/response data architectures, LiveStore utilizes event-sourcing for efficient data syncing, storing mutation events separately and applying them to the database. The project, currently in early access for select users, promises to simplify app development with a minimal API and cross-platform support, with future plans for a git-style syncing system and expanded web support.

React Native developers often face challenges when migrating web applications to native apps due to the absence of HTML, CSS, and browser APIs in the native environment. Expo has introduced DOM components as a solution to this, allowing developers to incrementally migrate web applications to native apps by marking modules with the "use dom" directive. This feature enables web code to run within native apps using a proxy component based on WebView, thus providing native performance while maintaining web functionality. DOM components facilitate the use of existing web libraries, making it easier to experiment with new features without dealing with complex native builds. However, they come with limitations such as performance issues on touch screens and the need for separate React contexts. Despite these challenges, DOM components promise to improve the migration process from React websites to React Native apps and will see continued enhancements, such as better integration with the Expo Router and optimizations for performance and resource sharing.

Expo has released the first developer preview of universal React Server Components in Expo Router, allowing developers to use these components in both native apps and websites for the first time. This preview is intended for library authors to integrate support into their packages and gather feedback, although production exports are not yet supported. React Server Components enable rendering at build-time from a development server or request-time from a production host, offering a first-class solution for data fetching and rendering in React. Unlike web-only frameworks, Expo Router defaults to client components, ensuring offline support and user interactivity while providing fine-grained control over server usage. Developers can render these components by creating files with the “use server” directive and exporting functions that return JSX. The preview also introduces capabilities like caching control, error handling, and the ability to memoize function calls, with the potential for future enhancements like built-in caching strategies. While production deployment is not yet available, Expo is working on automated workflows for this feature, targeting a solution by Q1 of 2025. Alongside these developments, Expo has made improvements across its runtime to support server components, and future updates will focus on library migration, support in the routes directory, and enhanced offline capabilities. Expo encourages feedback from developers to refine this preview into a production-ready solution.

Benny Neugebauer, co-creator of the Programming Tutorials app, shares insights on integrating animated splash screens into mobile applications using the expo-custom-assets config plugin. This tutorial focuses on using the animation tool Rive, which provides a free plan for unlimited personal files and allows developers to create and integrate animations smoothly. The expo-custom-assets plugin simplifies the process by bundling animations as native resources during the Expo Prebuild step, eliminating the need for manual configuration changes in Android and iOS platforms. After linking custom assets and installing the appropriate React Native runtime library, developers can build views that control the animation display and update the state once the animation finishes, offering a polished user experience. This approach enhances the app's first impression with high-quality animations, while the Programming Tutorials app offers additional resources for learning programming languages like TypeScript and Python.

Simon Grimm's guest post explores efficient list rendering in React Native, emphasizing the importance of choosing the right components for performance optimization. While developers might initially consider using ScrollView to render lists, this approach can lead to performance issues with large datasets, as it attempts to render all items at once. Instead, React Native offers built-in components like FlatList and SectionList, with FlatList being particularly effective due to its lazy loading and memory-saving features. However, for even better performance, Grimm recommends FlashList, a component developed by Shopify, which offers faster rendering and an improved API, making it a superior choice for most applications. Although FlashList has minimal trade-offs, such as potential scrolling issues with varied item sizes, it remains the best option for enhancing performance in 95% of apps. The article also touches on other attempts at list improvement, such as WishList and Candle's native iOS table view, but these have limitations. Ultimately, FlashList stands out as the most efficient solution currently available, and developers are advised to test their apps on low-end devices to ensure optimal performance across platforms.

GeekyAnts developed thegeekconf app to enhance the conference experience at the first annual geekconf event in Berlin, utilizing a tech stack that includes Next.js for the web and Expo for iOS and Android. The app aimed to provide seamless access to speaker information, schedules, and real-time updates, helping attendees stay informed and connected. Building the app involved challenges such as optimizing performance and managing a monorepo setup for shared components across platforms, but ultimately it facilitated efficient development and deployment. Leveraging gluestack-ui, a set of universal components, and Expo's universal development capabilities enabled the creation of a consistent user experience across web and mobile. The deployment process was streamlined using Vercel for the web and Expo Application Services for mobile, allowing the team to focus on functionality and user engagement. The project demonstrated the effective integration of modern web technologies, fostering community and knowledge sharing in the React Native ecosystem.