19

I find that there are 2 UI components for React Native which are mostly used. I want to use one of them. Which one of them is more easy to use and customizable ?

Željko Filipin
  • 56,372
  • 28
  • 94
  • 125
Kais
  • 1,925
  • 3
  • 23
  • 35

5 Answers5

31

Currently, there are 3 main UI libraries:

Shoutem UI components are actually only one part of Shoutem UI Toolkit, which includes:

  • UI components - customizable set of components for RN applications
  • Theme - style your RN components on one place
  • Animation - set of declarative animations

UI components come with the predefined beautiful design, so creating good looking applications is as easy as simply c/p-ing the component's code. However, they can be fully customized with a theme from one place, so you can achieve the separation of concerns for your components. Animations can be used in similar matter, too.

To see which kind of UI components are there, include <Examples> components in your screen, as described here.

React Native Elements simplify the usage of common components in React Native. Native Base does that too, allows you to customize them and has a better documentation than React Native Elements.

Disclaimer: I work at Shoutem

Tommz
  • 3,393
  • 7
  • 32
  • 44
  • I think one of this is not customizable, not sure which one, either it is shoutem or native base. Tommz will you please clarify? – Waleed Arshad Dec 01 '16 at 05:50
  • Hey @WaleedArshad, Shoutem and NativeBase are customizable. I couldn't find something on React Native Elements. However, only Shoutem is using centralised place to customize its components through [@shoutem/theme](https://github.com/shoutem/theme). – Tommz Dec 05 '16 at 13:35
  • Thanks for clarification – Waleed Arshad Dec 07 '16 at 07:12
  • @Tommz Is there any kitchensink app to demonstrate components? – svlada Dec 14 '17 at 13:45
  • @svlada This should work: https://github.com/shoutem/ui/tree/develop/examples/RestaurantsApp – Tommz Dec 14 '17 at 18:37
15

All the above three libraries are good and serve their own purposes. It totally depends once after you use all of these.

NativeBase is a mobile application development framework; builds a layer on top of React Native that provides you with basic set of components for mobile application development which helps you to develop world-class application experiences on native platforms.

NativeBase gives you the potential of building applications that run on iOS and Android using a single codebase. It eases out your development.

Since NativeBase is built on top of React Native, hence with any component you can pass the style property which will be merged to the default style of that component. This also goes with the callback events. Highly customizable with the theme from one place.

All this is neatly documented by NativeBase. Docs of NativeBase gives you complete information about its usage with sample output, its replacing React Native element, how to style each component, how to customize theme for each component, many more.

Also that NativeBase is being rewritten to enhance its ease of use. To be released very soon.

Go ahead and try NativeBase!

Checkout the working demonstration of NativeBase components in one single kit NativeBase-KitchenSink.

Disclaimer: I work at NativeBase

Supriya Kalghatgi
  • 1,155
  • 9
  • 10
5

Both are excellent. Shoutem has some pretty cool animation transitions. You can't go wrong with either. My advice is to review each and pick the one that either feels more right or matches your requirements best.

And don't forget to check out React Native Elements too

Chris Geirman
  • 9,474
  • 5
  • 37
  • 70
1

You can either use NativeBase or Shoutem UI. Both are slightly different than each other. NativeBase is designed over platform recommendations and inspired by Ionic whereas Shoutem has it's own fluent and clean design.

Gaurav Guha
  • 11
  • 1
0

I've played around with native-base and Shoutem UI. Both of them fully customized. I like Shoutem than the other because it has more feature, animation, extension, builder, etc. But unfortunately, Shoutem UI currently doesn't support the latest react-native (>0.40) and expo(> 15.0). So I hold my plan to use this for production.

I think this is because the latest RN deprecated NavigationExperimental and Expo SDK use react-native-svg >= 5.2.0. CMIIW

Community
  • 1
  • 1
Sastra Nababan
  • 154
  • 2
  • 8