Uncategorized

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.

NativeBase

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.

Shoutem

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
avatar

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

  Subscribe  
Notify of