React Native component libraries can be a huge time-saver when you’re working on an app project. How? Well, let’s start with React itself. You probably know that React is an open-source JavaScript library that helps in building user interfaces for both web-based and mobile apps. It includes a number of components that you can use readily for your apps.
Usually, while building components in React, you’ll need to style them to fit the guidelines of the platform you’re targeting. That’s where React Native can help. It’s a framework you can use to develop mobile apps by using React along with the native capabilities of the target platform.
Earlier, we wrote a post featuring the best UI component libraries and frameworks. In this post, we’ll take a closer look at React Native component libraries specifically.
Our favorite React Native component libraries available now 💙
1. Gluestack UI
Gluestack UI is an outgrowth of NativeBase. GeekyAnts, the team behind both, is encouraging developers to fully switch over to Gluestack. It offers a highly customizable framework that simplifies the creation of React, Next.js, and React Native applications by offering a selection of lightweight and performance-optimized components that are easily integrated into your projects. With Gluestack UI, you select only the components you need, thus reducing unnecessary bloat.
Gluestack also supports Tailwind’s intuitive styling through NativeWind, enhancing your experience with simple APIs and customizable design options. The framework is open-source, featuring both free and premium elements, and with over 2K stars on GitHub, it’s growing steadily in popularity.
Installation instructions 📖
To get started with Gluestack UI v2, you need to have an existing Next.js or Expo project. Then, simply run the following command:
npx gluestack-ui initFor more detailed installation instructions, go to the Gluestack UI v2 installation guide.
2. Tamagui
Whether you’re building for the web or mobile, Tamagui offers you beautifully designed, customizable components that adapt seamlessly across platforms. With Tamagui, you get a style-first approach with an optimizing compiler that speeds up your application and keeps your styles consistent across different environments. As of the time of this writing, it’s got almost 11K stars on GitHub, which isn’t too shabby.
Installation instructions 📖
Tamagui’s developers recommend using npm create to set up one or more of Tamagui’s example apps: npm create tamagui@latest. It gives you a variety of end-to-end examples, which is useful even if you plan to start from scratch or integrate into an existing app.
For more detailed instructions, check out the Tamagui installation page.
3. React Native Reusables
React Native Reusables offers a streamlined and focused collection of UI components specifically tailored for React Native. Developed with accessibility and modern design principles in mind through NativeWind v4, this open-source library provides a robust foundation for crafting your own high-quality components.
The project ambitiously covers essential UI components like navigation menus, tables, and hover cards, while excluding more complex elements such as calendars and charts, directing users towards specialized libraries for those needs. It’s a particularly useful resource for developers looking to avoid third-party dependencies, focusing instead on building for universal compatibility across platforms.
Installation instructions 📖
First, you need to install NativeWind. Then after that, you can follow the detailed instructions for React Native Reusables on this page.
4. Material Kit React Native
Material Kit React Native offers a free native app template with material design. Built with the Galio framework, it redesigns the most common components to keep things minimal and be in tune with Google’s material design. It’s easy to use, and includes 200+ handcrafted elements like buttons, cards, navigation and inputs. All components can take on color variations by making changes to the theme. Additionally, there’s five customized plugins and five example pages.
With hundreds of stars on Github, it offers a Pro version too that gives you access to more example pages and documentation.
Installation instructions 📖
You can use either NPM or Yarn:
npm install -g expo-cli
yarn global add expo-cliCode language: PHP (php)Then navigate your way into your project’s directory and write npm install or yarn install. This will install all dependencies that Material Kit React Native needs in order to work properly.
Finally, use expo start. A new window will pop-up in your default browser. This will be your localhost’s dashboard. Open up your favorite text editor/IDE and an Android/iOS simulator and have fun.
5. React Native Elements
React Native Elements is a cross-platform React Native UI toolkit that puts together in one place a number of great open source UI components made by developers. You can dip into the packages put together by React Native Elements and be sure that the API has a consistent look and feel. It’s not surprising that it has received tens of thousands of stars on Github.
The package includes a whole basket of components such as pricing, badge, overlay, divider and platform-specific search bars. They are easy to use and really customizable. The props for all the components are defined in one central location, which makes it possible to update or modify components easily. Additionally, it can serve as a platform connecting small teams developing commercial React Native apps with open source contribution.
To use React Native for your web-based projects, there’s React Native Web. It allows for creation of fast, adaptive UIs in JavaScript, and integrates with React Dev tools. You’ll be able to share your codebase between React Native apps and web apps. It supports type, click or swipe as modes of input, has built-in accessibility and RTL support, and is used by the likes of Twitter, Uber and Flipkart.
Installation instructions 📖
You can use either NPM or Yarn:
npm install @rneui/themed @rneui/base
yarn add @rneui/themed @rneui/baseCode language: CSS (css)6. Lottie for React Native
Lottie is a library from Airbnb for mobiles to help you add animations to your apps. Normally, after creating animations in Adobe After Effects, you’ll need to convert them into a format usable in your web app. Lottie helps you with this.
It works by exporting animation data in JSON format from an After Effects extension, BodyMovin. This extension is bundled with a JS player to render animations on the web. It works with React Native too, and you can access the official docs on Github where it has garnered thousands of stars.
Lottie libraries and plugins are available for free, and you can use the curated collection of animation files to make your apps attractive and interesting. The animation files are small in size and are in vector format. As such, you should not experience any impact on the performance of your app. At the same time, it can spice up your UI and make it more visually appealing.
Installation instructions 📖
You can find the installation instructions for using Lottie with React Native on this page.
7. React Native Vector Icons
This one is among the best React Native component libraries if what you’re looking for are some icons to use in your apps.
With a library of 3,000+ icons you’re pretty much sure to find something that will fit your needs. What’s more, it’s possible to customize, style, and extend the icons while integrating them in your project.
The package supports TabBar and Toolbar Android, as well as image source and multi-style font. With thousands of stars on Github, it can be a perfect fit for buttons, logos and navbars. It draws on React Native’s animated library combining it with any icon to create an animated component. If you already have an icon font with associated CSS file then you can easily generate an icon set with the generate-icon script.
Installation instructions 📖
You can install the package via NPM:
npm install --save react-native-vector-iconsDepending on the platform you’re targeting (iOS/Android/Windows), follow the appropriate setup instructions. If you’re planning to use FontAwesome 5 or 6 icons, refer to these guides: FontAwesome 5 and FontAwesome 6. For detailed instructions, go here.
8. Ignite CLI
Ignite CLI is a solid starter kit for React Native apps. At no cost at all, the default React Native boilerplate effortlessly helps you build native apps. It installs easily and adheres to React best practices in its construction, while allowing you to adapt the boiler plates to your project. Out of the box, it works with both Android and iOS. There’s support for standalone plugins too.
Additionally, you can choose from a number of boilerplates or start your own. The modular plugin system allows you to add application features or write your own. A usage example screen helps you to test third-party libraries and build apps consisting of multiple components. The screen also contains examples of commonly used apps built with fundamental components. In order to help you identify the components and make changes to them easily, this screen also registers the examples in the component’s files. From this screen, you can test, use and share components with your team. Ignite CLI has earned thousands of stars on Github.
Installation instructions 📖
If you just want to kick off a new project, you can do that with the Ignite CLI:
npx ignite-cli@latest new pizza-appCode language: JavaScript (javascript)Prerequisites:
- Node.js LTS release or greater
- Recommended: recent versions of Xcode and Android Studio
- Recommended: Yarn or Bun package manager
- Recommended: macOS (for iOS development)
Here’s a YouTube video that explains more.
9. React Native Mapview
One of the React Native component libraries that offers map components for Android and iOS is React Native Mapview. Its construction is such that regular features on any map such as markers and polygons are specified as children of the Mapview component. This assists the API to declaratively control features on the map intuitively. On your part, you’ll need to ensure enabling Google Maps API in Google console.
There’s a lot you can do to customize the map style. You’ll be able to change mapview position, tracking region / location and make points of interest clickable on Google Maps. You can enable zooming in to specified markers or coordinates, or even animate them. If you assign an animated region value to the prop, Mapview can utilize the Animated API to control the map’s center and zoom. Unless you specify custom markers, default markers will be rendered.
What’s cool is the markers are draggable, can be customized using images, and they update other UIs during drags. If you need more, there’s custom callout to markers, polygon creators, and circle and polygon overlays. iOS users can create gradient polylines. Not surprising that it has thousands of stars on Github.
Installation instructions 📖
You can use either NPM or Yarn:
npm install react-native-maps
yarn add react-native-mapsDetailed instructions can be found on this page.
10. React Native Gifted Chat
As the name suggests, React Native Gifted Chat will help you in setting up a Chat UI for React Native (and web). Written with TypeScript, it includes fully customizable components that help to load earlier messages or copy messages to clipboard and more. There’s an InputToolbar too that helps users skip the keyboard.
To enhance user experience, it enables Avatar as user’s initials, localized dates, multi-line TextInput, quick reply messages (bot) and system message. There’s support for Redux too. Gifted Chat has thousands of stars on Github.
Installation instructions 📖
You can use either NPM or Yarn:
npm install --save react-native-gifted-chat react-native-reanimated react-native-safe-area-context react-native-get-random-values
yarn add react-native-gifted-chat react-native-reanimated react-native-safe-area-context react-native-get-random-valuesCode language: JavaScript (javascript)More information can be found on the GitHub page.
11. React Native UI Kitten
One of the React Native component libraries that can be used as starter kit for mobile apps for any domain, including eCommerce, is React Native UI Kitten – a React Native implementation of the Eva Design system. With thousands of stars on Github, it offers a set of about 20 general purpose components styled in the same way to take care of visual appearance.
With this forever free and open source library, you can use the themes provided, or create as many themes of your own, all without changing the source code of the components. What’s more, you can switch between dark and light themes in the runtime without needing to reload the page. Once you install the UI Kitten package from NPM, you can import the components and begin using them in your project.
Installation instructions 📖
Start a new app with UI Kitten template from a scratch:
npx react-native init MyApp --template @ui-kitten/template-jsCode language: CSS (css)Or, if you want to use TypeScript:
npx react-native init MyApp --template @ui-kitten/template-tsCode language: CSS (css)Additional instructions can be found here.
12. React Native Paper
Another free and open-source library is React Native Paper. It has all the major components, and these components are designed in keeping with Google’s Material design standards.
Paper is cross-platform and works on both web and mobile. There are components and interactions to suit almost every use-case scenario. Most details, including animations, accessibility and UI logic are taken care of.
You can customize default colors or make your own. Besides, you have full theming support, as well as the option to switch between dark and light modes. On Github, it racks up thousands of stars.
Installation instructions 📖
You can use NPM or Yarn to get started. There are several steps involved, depending on what you plan on doing. Step one is obviously to install React Native Paper:
npm install react-native-paper
yarn add react-native-paperCheck out the instructions for the other steps.
13. React Native Material Kit
Next on our list of React Native component libraries is yet another set of UI components that brings material design to React Native. Inside, you’ll find buttons, cards, range sliders and text fields. You’ll also see spinners and progress bars to display loading, as well as toggles for switches, radio buttons and checkboxes.
All it takes is a few lines of code to add buttons using predefined builders that adhere to the Material design lite default theme. Using the builder, you can also create customized buttons from scratch. Same is the case for built-in text fields. Not only that, you can customize the styles by changing the global theme. This will affect all checkboxes and radio buttons across the whole app. On Github, this library garners thousands of stars.
Installation instructions 📖
First, go to your RN project directory, and install RNMK through rnpm . If you don’t have rnpm, you can install RNMK from npm with the command npm i -S react-native-material-kit and link it manually. More information can be found here.
14. React Native Material UI
The React Native Material UI offers close to 20 components for React Native. The components include action buttons, avatars, subheaders, drawers, dividers, toolbars and more. These components are highly customizable and use material design in their construct. Any customization you make to the theme can be extended to other components also, including any you build on your own. Local changes can be made by overriding styles wherever needed. This library has earned thousands of stars on Github.
Installation instructions 📖
If you already use React Native Vector Icons, there’s not much to do by way of installation. Otherwise, you’ll need to download material icons for Android and make sure you have Roboto for iOS. More information can be found on this page.
15. RNUILIB
With more than 60 components in this kit, RNUILIB clocks thousands of stars on Github. With live examples included for all the components, you can check out the options available before you use it in your project.
Some of the components are: an animated image, a scanner to indicate progress, avatars to display profile images, basic buttons and gradient slider components.
Installation instructions 📖
To get started:
- Run
npm install react-native-ui-lib - Install mandatory peer dependencies,
npm i react-native-reanimated react-native-gesture-handler - Install ios pods,
cd ios && pod install
For further instructions, see this page.
16. Shoutem
Shoutem is an app building platform that works by using extensions or modular building blocks, somewhat like building a website with plugins on WordPress. With 40+ full-featured extensions, it’s gathered hundreds of stars on Github. Extensions include galleries for photos and videos, products, events, restaurant menus and more. You can use these open source extensions freely in your app. And, by simply forking them, you can modify them any way you want.
Shoutem offers many mobile back-end services such as analytics, user authentication, layouts, push notifications and more. Further, there are many well coded themes for you to use and customize. Shoutem uses 100% JavaScript and React Native.
Installation instructions 📖
You can use NPM to get started:
npm install -g @shoutem/cliCode language: CSS (css)If the previous command fails because of permission issues, you need to run it with sudo permission:
sudo npm install -g @shoutem/cliCode language: CSS (css)For detailed instructions, please go here.
Well, that’s our list of the finest React Native component libraries. Which one is your pick? Share in the comments.
You may also be interested in these articles:
Don’t forget to join our crash course on speeding up your WordPress site. Learn more below:
Layout and presentation by Karol K.
