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.
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.
- Material design guidelines v2.0
- Platform Adaptation
- Better RTL Support and full theming options
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:
- Cache misses.
- Low performance loading from cache.
- Low performance in general.
- Aggressively cache images.
- Add authorization headers.
- Prioritize images.
- Preload images.
- GIF support.
- Border radius.
🚩 FastImage, performant React Native image component. - DylanVann/react-native-fast-imagegithub.com
3. React Native Image Cropper
iOS/Android image picker with support for camera, configurable compression, multiple images and cropping
- Video / Image Selection Support
- Multi Selection Support
iOS/Android image picker with support for camera, configurable compression, multiple images and cropping …github.com
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.
- Heavily Customisable
- Dope Entry/Exit Animations with swipe support.
- Modals can overlap DropdownAlert if it’s not inside the modal’s document tree.
- It is important you place the
A simple alert to notify users about new chat messages, something went wrong or everything is ok. …github.com
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.
- 👆 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).
🎨 A React Native component for touch-based drawing. - jgrancher/react-native-sketchgithub.com
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.
An elegant ActionSheet component for React Native. - beefe/react-native-actionsheetgithub.com
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.
Will return linear scaled result of the provided size, based on your device's screen width.
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).
A React-Native utility belt for scaling the size your apps UI across different sized devices. …github.com
8. React Native Draggable FlatList
Its a drag and drop list view component written using react native flat-list.
A drag-and-drop-enabled FlatList for React Native. Contribute to computerjazz/react-native-draggable-flatlist…github.com
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.
- Performant Native Module
- Orientation Support Portrait/Landscape
A simple modular component for react native (iOS) to capture a signature as an image …github.com
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.
⚛️😀 Emoji selector panel for React Native. Contribute to arronhunt/react-native-emoji-selector development by creating…github.com
11. React Native CoPilot
Step-by-step walkthrough for your react native app!
Step-by-step walkthrough for your react native app - okgrow/react-native-copilotgithub.com
React Native BoilerPlate
Looking for react native boilerplates to start development ??!
🚀 Type Based Architecture for developing React Native Apps [Updated 0.57.4] - victorkvarghese/react-native-boilerplategithub.com
Or a scalable feature base architecture
Feature based Architecture for developing Scalable React Native Apps (0.57.4) …github.com
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 ;)
More articles from me
Curated list of awesome UI components with native feel & performance built in react native…medium.com
This is the first in a series of blog posts in which i will outline my experience with React Native and Firebase chat…medium.com
This is the second in a series of blog posts in which i try to build to native features in messenger using react-nativemedium.com
This article covers designing and developing functional component with 60 fps animationscodeburst.io