React Native’s Ultimate Tech Stack for 2024
After over three years of development with React Native and Expo, I’ve experimented with various technologies. Here’s a breakdown of the…
After over three years of development with React Native and Expo, I’ve experimented with various technologies. Here’s a breakdown of the libraries and technologies I’d recommend if starting a new mobile app today!
Mobile App Technologies
Expo
Expo is a comprehensive framework that simplifies Android and iOS app development. It offers file-based routing, a robust library of native modules, and is open-source with active communities on GitHub and Discord. Despite past advice to avoid Expo in favor of pure React Native, today, most libraries work seamlessly with Expo out of the box. With over 30+ libraries from Expo, and features like Dev Builds for integrating native code without limitations, I can build an entire app locally in under 2 minutes on my MacBook Pro M3. Expo’s EAS (Expo Application Services) further streamlines the process by managing builds, certificates, and app submissions to both the App Store and Google Play. Given these advancements, there are few scenarios where avoiding Expo makes sense.
Tamagui
Tamagui is an exceptional UI kit for both React Native and web, boasting impressive performance, customizable components, and themes. One of its standout features is styled components, allowing developers to customize components like a Paragraph with variants. For instance, you could define a bold or large variant, then easily apply these by passing bold={true} or large={true}. This approach ensures consistent UI patterns across your entire app, enhancing both development efficiency and user experience.
TanStack Query
TanStack Query is indispensable for data-fetching. It simplifies the process of fetching, caching, synchronizing, and updating server state. By using the useQuery hook, developers can manage API calls effortlessly. TanStack Query handles caching, reruns queries when necessary based on query keys, manages loading states, and offers superior performance, making it my go-to for server-side state management.
Shopify/FlashList
If you’re not using FlashList, you’re missing out on a performance-optimized list component for React Native. Unlike FlatList, FlashList prevents blank cells, ensuring a smoother user experience. While there are specific cases where FlatList might be preferable, FlashList, built on top of FlatList, is my default choice for its ease of integration and performance benefits.
@gorhom/bottom-sheet
For interactive bottom sheets, @gorhom/bottom-sheet offers full customization and works well with web environments too. While I often use expo-router modals, @gorhom/bottom-sheet serves well for scenarios where a separate screen isn’t necessary, providing a versatile solution for modal-like interactions.
PostHog
PostHog is my recommendation over Google Analytics due to its ease of setup and accuracy. It’s an all-in-one platform for analytics, testing, observing, and deploying features. With customizable dashboards, data warehousing, surveys, A/B testing, and more, PostHog offers 1 million free events monthly with a simple integration. For anyone looking to implement analytics, PostHog is a must-try.
react-hook-form or TanStack Form
While I’m a fan of TanStack, their new form library, TanStack Form, is still in version 0. Until it gains more traction, I stick with react-hook-form for form validation. Transitioning to TanStack Form is on my radar as soon as it matures.
Clerk
Clerk simplifies user management and authentication in mobile apps. It handles security and best practices, allowing developers to focus on app functionality. With 10,000 monthly active users for free, Clerk is a time-saver for new app projects and highly recommended.
Lottie
For animations, I turn to Lottie or Lottie Files. Offering both paid and free animations, Lottie is my go-to for adding visual flair to mobile apps, enhancing user engagement effortlessly.
Sentry
Error handling in mobile apps is crucial. My first app was a Barbershop app, I initially had no error handling, leaving me unaware of crashes or device issues. Sentry is a top choice for error management. Once added, it emails you when errors occur, which has been vital for quick bug fixes and keeping customers satisfied. This is a must have in react-native/expo apps.
Conclusion
From my experience across numerous projects, these are the libraries I consistently use for their efficiency, performance, and the quality they bring to mobile app development. They’re perfect for anyone looking to kickstart their mobile app journey on the right note!
Try BanKan Board — The Project Management App Made for Developers, by Developers
If you’re tired of complicated project management tools with story points, sprints, and endless processes, BanKan Board is here to simplify your workflow. Built with developers in mind, BanKan Board lets you manage your projects without the clutter.
Key Features:
- No complicated processes: Focus on what matters without the overhead of traditional project management systems.
- Claude AI Assistant: Get smart assistance to streamline your tasks and improve productivity.
- Free to Use: Start using it without any upfront cost.
- Premium Features: Upgrade to unlock advanced functionality tailored to your team’s needs.
Whether you’re building a side project, managing a team, or collaborating on open-source software, BanKan Board is designed to make your life easier. Try it today!
