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 |