Uber Cool React Native Components
This is the second part to ‘Super Cool Material UI components in React Native!’. I have personally integrated all these modules in one project or the other. I know how hard its to find existing libraries for react native. Sometimes we use settle with one lib, customise it again. Then days after, finds another one which turns out be exactly what we were looking for.
UPDATE: #3
1. React Native Paper
With more than 2000 ⭐️ on Github, Paper is one of the first .. (Sorry the Only) library to introduce Material Design 2.0. You can use these library completely if the project aligns with material design and you want platform dependent UI schemes.
Features
- Material design guidelines v2.0
- Platform Adaptation
- Better RTL Support and full theming options
2.🚩 FastImage
React Native’s Image component handles image caching like browsers for the most part. If the server is returning proper cache control headers for images you'll generally get the sort of built in caching behavior you'd have in a browser. Even so many people have noticed:
- Flickering.
- Cache misses.
- Low performance loading from cache.
- Low performance in general.
FastImage is an Image replacement that solves these issues. FastImage is a wrapper around SDWebImage (iOS) andGlide (Android).
Features
- Aggressively cache images.
- Add authorization headers.
- Prioritize images.
- Preload images.
- GIF support.
- Border radius.
3. React Native Image Cropper
iOS/Android image picker with support for camera, configurable compression, multiple images and cropping
Features
- Video / Image Selection Support
- Multi Selection Support
4. React Native DropDown Alert
A simple alert to notify users about new chat messages, something went wrong or everything is ok. It can be closed by tap, cancel button, automatically with closeInterval, pan responder up gesture or programmatically.
Features
- Heavily Customisable
- Dope Entry/Exit Animations with swipe support.
Caveats
- Modals can overlap DropdownAlert if it’s not inside the modal’s document tree.
- It is important you place the
DropdownAlertABOVE theStackNavigator.
5. 🎨 React Native Sketch
A React Native component for touch-based drawing. We can use it two modes and things are customisable to an extend.
Basic: uses the bare minimum to make it work.Digital Touch: tries to reproduce the look and feel of iOS Message Digital Touch.
Features
- 👆 Draw with your finger, and export an image from it.
- 🖍 Change the stroke color and thickness on the fly.
- 👻 Generate a transparent image (or not).
6. React Native ActionSheet
Cross platform ActionSheet. This component implements a custom ActionSheet and provides the same way to drawing it on the different platforms(iOS and Android). Actually, In order to keep the best effect, it still uses the ActionSheetIOS on iOS.
- Platform specific UI and Native feel & touch.
7. React Native Size Matters
A React-Native utility belt for scaling the size your apps UI across different sized devices. I personally love this module. It helps a lot maintain UI for different devices including tablets. Also it has scaling based on height and also we can specify variable scale rate to make things more perfect.
scale(size: number)
Will return linear scaled result of the provided size, based on your device's screen width.verticalScale(size: number)
Will return linear scaled result of the provided size, based on your device's screen height.moderateScale(size: number, factor?: number)
Sometimes you don't want to scale everything in a linear manner, that's where moderate scale comes in.
The cool thing about it is that you can control the resize factor (default is 0.5).
8. React Native Draggable FlatList
Its a drag and drop list view component written using react native flat-list.
9. React Native Signature Capture
A simple modular component for react native to capture a signature as an image. User would sign on the app and when you press the save button it will return the base64 encoded png.
Features
- Performant Native Module
- Orientation Support Portrait/Landscape
10. React Native Emoji Selector
Emoji Selector for React Native. You can use these component in chat view or other UIs. It has a very large collection of emojis.
11. React Native CoPilot
Step-by-step walkthrough for your react native app!
React Native BoilerPlate
Looking for react native boilerplates to start development ??!
Try
Or a scalable feature base architecture
React is evolving so fast and the number of people working on it increases day by day. Its great time to be react native developer. I will be back with more #react-native-stuff soon… Till then ciao ;)
