10 React Native Open-Source Projects You Must Know
Open-source code is a great tutor for developers with any skill level. It enables you to watch the development process, take part in it, and learn from professionals.
Practice makes the master, so such type of experience is invaluable.
We have asked our developers to go through about 50 open-source React Native apps on GitHub, select 10 that appeal to them most, and explain what is so special about them and why React Native mobile app development is so popular.
In this article, you will learn about the insightful open-source projects on GitHub, and take as many benefits from their source code as possible.
Feedback structure
- Name of the app
- Functionality
- Structure
- Integrations
- Why it will be useful for developers
Here are the results
Functionality: GitterMobile is an unofficial client of networking and chat platform for communities on GitHub - Gitter. You can read about its main features here.
Integrations: React Native, React Native navigation, React Native vector icons, React invertible scroll view, React Native fetch blob, React Native scrollable tab view, React Native transformable image.
Why it will be useful for the developers: A great example of communication platform built with React Native. The chosen technology stack allows to reuse the code between native and web platforms.
About the project: AskApiko Mobile is the app like Stack Exchange (ask-and-answer), which we created as a demo for the React Native courses supported by us, Apiko - Apiko Full-Stack Intensive. (The courses are in Ukrainian language only for now, but we think that we'll make them more international-like soon. So, stay tuned ;))
Why it will be useful for the developers: This is the demo product which shows that with React Native you can easily create a forum-like app.
Functionality: Kitten Tricks is a mobile starter kit with more than 40 screens and theme hot reload support. It provides you with a variety of customizable layouts, dark and light themes and ready-to-use React Native screens for your next app.
Structure: No Flux/ Redux, all components interact directly with Realm.
Integrations: React Native UI Kitten, Realm, React Navigation.
Why it will be useful for the developers: It can be used as a starter kit for an app, or as a live example of using realm in React Native.
Let’s get in touch!
Functionality: Demo app of "Reactive Core Architecture". It is a simple React Native open-source app that lists all doctors of the Doctor Who series. The list is sourced from a JSON file that lives in the reactive core. It uses actions to get the doctor, go to a doctor detail and order them by name and number.
Structure: the architecture is composed by three modules:
- The core: Includes the business logic and the state of the application. This component is implemented using Redux framework.
- The mobile app: Implemented using React Native framework.
- The web application: Implemented using React framework.
Integrations: React, React Native, Redux
Why it will be useful for the developers: It is a great example of how to separate business logic from web and mobile representation.
Functionality: A React component for swipeable (tab) views for web and RN.
Structure: Project is split into 4 packages - core logic, web and RN implementations, + HOC that add additional functionality to base components.
Why it will be useful for the developers: It is a flexible, easy to use and elegant solution for building swipeable components like tabs.
React-Native-nw-React-Calculator
Functionality: This project shows how the source code can be architectured to run on multiple devices.
Structure: Unlike the projects mentioned above, all files for different platforms are in the same folders.
Why it will be useful for the developers: It is a good example of structuring components and sharing logic in a cross-platform application.
Functionality: iOS's Stocks App clone written in React Native (available on GooglePlay)
Structure: Flux architecture is provided by alt, react-native-router-flux is used for routing.
Why it will be useful for the developers: It is a live example of using another Flux implementation, not only Redux.
Functionality: This is the most complete UI for React Native.
Architecture: It uses only UI components
Integrations: Minimum of dependencies
Why it it be useful for the developers: It allows to use API animated library for easier components animation in RN.
Functionality: Cross-platform React Native UI Toolkit
Structure: Set of styled RN components
Integrations: React Native side menu, React Native vector icons, React Native tab navigator.
Why it will be useful for the developers: React Native elements will be useful for beginners who don't have enough knowledge about styling in React Native.
Functionality: Standard set of easy to use animations and declarative transitions for React Native
Structure: Just few components and transactions
Integrations: Minimum of dependencies
Why it will be useful for the developers: It allows to use higher level Api Animated library for easier components animating in React Native.
Functionality: Perfi is a React Native-based app, with open-source code, which helps you in controlling your expenses and incomes. The app is free to use and if you're an Andoid user, find it avialable on Google Play
Its main features are:
- Intuitive and robust interface
- 5 major menu items for quick and effective personal finance track-down
- Switch between such accounts as Card or Cash. Custom account adding is enabled too
- Multiple expense categories with a possibility to add your own category
- Effortless transactions creation
- Transactions sorting and view by date or time, category or account
- Transactions trends, to see the dynamics of incomes and expenses
- Money transfer between accounts and instant results display
- Embedded calculator right in the process of transaction creation
Integrations: Expo, React Native modal datetime picker, React Native tab view, React Native popup menu, React navigation
Structure: Redux, Recompose.
Why it will be useful for the developers: It provides examples of how to use Recompose and realize graphics.
We truly believe that you have picked several React Native open-source projects and are ready to contribute!