Compare Popular React Native Component Libraries

In this post I’d like to compare three popular React Native(“RN”): NativeBase, Shoutem and React Native Elements. Create an app on Expo. The app contain three screen: Make an wordpress REST API call to render list of post, rendering a post(HTML) and a login Form. To compare their UI and usage, not include quality of source code and compatibility across the platform/device.


GitHub: https://github.com/GeekyAnts/NativeBase
npm: npm install native-base --save
Demo: NativeBase-demo

List Login

NativeBase has the most components. The other two libraries not have Drawer, FABs, Footer Tabs etc. NativeBase uses more JSX and less props which makes it flexible. Frontend engineers not hard to get started due to components named as HTML element(Content/Header/Footer). Even has Container to replace RN’s View. Seem NativaBase likes Boostrap on RN: It’s simple and abundant but these are some of the problems you could encounter when you have extra requirements.


GitHub: https://github.com/shoutem/ui
npm: npm install @shoutem/ui --save
Demo: shoutem-ui-demo

List WebView/HTML

Shoutem has the most beautiful UI. To be precise, it’s Shoutem UI toolkit, to belong to Shoutem platform which has theme and animation libraries. By contrast with NativeBase, components of Shoutem have many props. For example, passing data to Listview will be render items. Shoutem seem not attach importance to their open source projects: the documentation is still lacking and not update often. BTW, Html component is excellent for render HTML code.
It could be worth a look.

React Native Elements

GitHub: https://github.com/react-native-training/react-native-elements
npm: npm install react-native-elements --save
Demo: react-native-elements-demo

Native Elements because is the first RN component library I used because it has the most Stars in GitHub. At that time, I wanted to do some style beautification after using RN to complete the App function. It was enough for me. But it seem has no advantage compared others. The component is not as rich as NativeBase; the style details are not as good as Shoutem. If I have to find a feature: You can comfortable use it due to React Native Elements is completely community-driven and MIT Licence.

List WebView/HTML Login

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Notify of