You most certainly know of React Native, that popular mobile framework built on the foundation of ReactJS. You wouldn’t be here in any other case. React Native makes it easy to create beautiful native mobile applications using only ReactJS and a touch of Objective-C.
 
React Native, by default, comes with a sizable collection of usable components, but some are missing. At the same time, it’s also a very extensible framework, so I wrote this article to show you what else is available and worth your time.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Table of Contents

 
  1. Side Menu
  2. Drawer
  3. Scrollable Tab View
  4. Parallax View
  5. NavBar
  6. Swiper
  7. Modal
  8. Overlay
  9. Refreshable Listview
  10. Swipeout
  11. Search Bar
  12. Tooltip
  13. Audio
  14. Video
  15. Calendar
  16. Mapbox GL
  17. Camera
  18. Device
  19. Orientation
  20. Vector Icons
  21. Lightbox
  22. Image Picker
  23. YouTube Player
  24. Google Login
  25. Facebook Login
 
Simple customizable component to create side menu.
 
Simple looking but powerful in what it can provide.
 
  • Required React version: >= 0.9.0.
Usage GitHub
 
 
Side Menu
 
Configurable react native pull out drawer. Supports displace, overlay (material design) static (slack style) transitions modes, as well as custom tweens.
 
  • Required React version: >= 0.10.0. beta
Usage GitHub
 
 
Drawer
 
Tabbed-navigation that you can swipe between, each tab can have its own ScrollView and maintain its own scroll position between swipes. Pleasantly animated.
 
This is favorite Android navigation pattern on, now available to iOS!
 
  • Required React version: >= 0.8.0
Usage GitHub
 
 
Tab View
 
Parallax-view for vertical Scrollview/Listviews with a header image and header content.
 
  • Required React version: >= 0.8.0-rc
Usage GitHub
 
 
Parallax
 
Simple customizable navbar component for react-native, dependent on Navigator component.
 
  • Required React version: >= 0.9.0
Usage GitHub
 
 
NavBar
 
The best Swiper component for React Native.
 
Good looking, dependable, and above all, configurable.
 
  • Required React version: Any
Usage GitHub
 
 
Swiper
 
A component for react-native. This is still very much a work in progress and only handles the simplest of cases, ideas and contributions are very welcome.
 
More than usable in a current state.
 
  • Required React version: Any
Usage GitHub
 
 
Modal
 
An component that brings content inside to the front of the view regardless of its current position in the component tree.
 
  • Required React version: >= 0.10.0
Usage GitHub
 
 
Overlay
 
A pull-to-refresh ListView which shows a loading spinner while your data reloads.
 
  • Required React version: Any
Usage GitHub
 
 
Refreshable Listview
 
iOS-style Swipeout buttons that appear from behind a component.
 
  • Required React version: 0.9.0
Usage GitHub
 
 
Swipeout
 
The high-quality iOS native search bar for React Native.
 
  • Required React version: Any
Usage GitHub
 
 
Search Bar
 
A react-native component from displaying tooltip. Uses UIMenuController.
 
  • Required React version: >= 0.4
Usage GitHub
 
 
Search Bar
 
Continue to the next page

  • Pim de Witte

    This is awesome! Thanks so much.