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.
npm install native-base --save
NativeBase has the most components. The other two libraries not have
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.
npm install @shoutem/ui --save
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
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
npm install react-native-elements --save
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.