Master React Native: 5 Open Source Projects to Learn From

In my previous article titled "Github Feed is Underrated," I highlighted the importance of GitHub as a valuable platform for learning from top developers worldwide. It provides a valuable resource for finding new ideas and inspiration that may be challenging to come across in traditional learning formats like articles and courses.

Today, I will demonstrate how you can use GitHub to master React Native. I will share the top 5 open-source React Native projects from which you can learn. I have personally gained valuable knowledge from these projects, and I highly recommend that you take them seriously and make an effort to learn from them.

So let's get started!

1. Showtime Project

Showtime is a Web3 social network with a lot of features such as posting, commenting, liking, and following, among others. It's a production app that is utilized by a large number of users. Since they share the codebase between the web and mobile app, they use Solito, which allows them to use Expo for mobile and Next.js for the web.

I first learned about this project at the App.js Conf 2022 during Axel's presentation on creating a universal design system with React Native. To this day I'm still revisiting the project and uncovering new insights as the project is well maintained and updated regularly.

2. Expensify App

Expensify is a complete re-imagination of financial collaboration, centered around chat. A production application(available on ios and Android) used by a large number of users.

Same to the Showtime app, they share code between the web and mobile apps as well.

The project is based on React Native CLI and uses TypeScript. It is well-maintained and regularly updated. It has been heavily tested with unit tests and end-to-end (e2e) tests. This project offers valuable learning opportunities as well.

3. React Native Testing

This is not a real app, but rather a collection of examples demonstrating the correct way to test React Native apps. If are willing to test your React Native app using Jest and react-native-testing-library, this is the perfect place to start.

Believe me, what I learned about testing React Native apps from this project is priceless. How to mock native modules, API calls, and navigation. The right way to write your assertions, the correct setup, and much more are all covered in this project.

4. React Native Template Obytes

This is a React Native starter that we use at Obytes for new projects and is based on the Expo dev client and TypeScript. The starter comes with a lot of features out of the box, such as authentication, navigation, localization, form handling, environment variable validation, theme, GitHub Actions, and much more.

Normally, we build this project for everyone who wants to create a new project and start with a solid foundation. However, I have noticed that a lot of people have been using it as a source of inspiration and for learning purposes lately.

5. bluesky App

BlueSky is a social media app similar to Twitter. The project is based on Expo and supports web, iOS, and Android, with a lot of features similar to what you see on Twitter.

The project is also well-tested with unit tests and end-to-end (e2e) tests. It is well-maintained and updated regularly and uses Expo 48 SDK

---

This article was originally published in https://elazizi.com

That's it for today. I hope you found this article useful. If you have any other suggestions, please leave them in the comments section below.

Comments

[Kevin]

Thank you for sharing this insightful article about mastering React Native through GitHub. Your approach of learning from top open-source projects is invaluable, as it provides real-world examples of best practices and innovative solutions.

To complement your article, I’d like to offer some thoughts on how Tamagui, a newer framework for cross-platform UI development, could potentially enhance these projects or offer alternative approaches:

1. Showtime Project: While this project uses Solito for code sharing between web and mobile, Tamagui could provide a more unified styling system with enhanced performance. Tamagui’s ability to maintain consistent UIs across platforms could be particularly beneficial for a Web3 social network like Showtime, where performance and design uniformity are key.
2. Expensify App: As a production-level app that shares code across web and mobile, Expensify could leverage Tamagui's optimizing compiler to improve runtime performance and reduce bundle sizes. This could lead to better performance across platforms, enhancing the user experience.
3. React Native Testing: This project focuses on testing with Jest and react-native-testing-library. It would be interesting to see how Tamagui's components and styling system integrate with these testing tools. Exploring how Tamagui fits into testing workflows could offer valuable insights for developers working on cross-platform apps.
4. React Native Template Obytes: As a starter template, this project could incorporate Tamagui to offer developers a robust styling and component system out of the box. Tamagui’s theming capabilities could be a great addition, complementing the existing features like authentication and localization.
5. BlueSky App: For a multi-platform social media app like BlueSky, Tamagui’s unified approach to styling and its pre-built component kit could streamline development and ensure consistency across web, iOS, and Android versions. This could simplify maintaining a uniform UI across different platforms.

While Tamagui offers promising features like performance optimization and unified styling, it's worth noting that it’s still relatively new compared to more established frameworks. Developers should carefully evaluate their project requirements and the maturity of the tools they choose.

For those interested in exploring Tamagui further, I recommend checking out this detailed article by Mohammed Sohail, which provides an in-depth look at Tamagui’s features and how it compares to other cross-platform development solutions.

You can find the article here: Tamagui Overview.