Groovy React Native Components.
Useful react native libraries at your disposal… #3
Most of us work really hard and some of us even spend more time to find new things happening around react and react native and that includes awesome libraries created & maintained by some great people around the world.
Sometimes it’s really hard to find something you are looking for, So i decided to curate a list of great tools which helped me work smarter and faster
1. Fluid Transitions
aims to implement a simple yet powerful set of constructs for building fluid transitions between elements when navigating with React Navigation.
The library is JavaScript only — no linking required.
The library implements a new navigator component called FluidNavigator with the same interface and routing configuration as the StackNavigator. The library has a component called Transition which can be used to build different types of transitions that will automatically be run when navigating between screens using the regular navigation actions.
2. React Navigation Collapsible
React Navigation Extension for Collapsible Header. Make your header of react-navigation collapsible.
Use this library to animate your react navigation header. I was able to find other libs for this purpose but most of them are really old and had bugs, while this one is better and new. Package makes use of HOC to wrap the components based on your need.
3. RecyclerListView
This is a high performance list view for React Native and Web with support for complex layouts. JS only with no native dependencies, inspired by both RecyclerView on Android and UICollectionView on iOS.
“I did have scroll issues and white screen issues while dealing with very large datasets using flat list that also had an alphabet list. I had to find a way to make the flat list faster as implementing pagination in that scenario was really really hard. Switching to recycler list view makes things so much easier and snappier”
RecyclerListView uses “cell recycling” to reuse views that are no longer visible to render items instead of creating new view objects. Creation of objects is very expensive and comes with a memory overhead which means as you scroll through the list the memory footprint keeps going up. Releasing invisible items off memory is another technique but that leads to creation of even more objects and lot of garbage collections. Recycling is the best way to render infinite lists that does not compromise performance or memory efficiency.
Apart from all performance benefits RecyclerListView comes with great features out of the box:
- Cross Platform, works on Web
- Supports staggered grid layouts
- Instant layout switching like going from GridView to ListView and vice versa
- End reach detections
- Horizontal Mode
- Viewability Events
- Initial render offset/index support
- Footer support
- Reflow support on container size change with first visible item preservation
- Scroll position preservation
- Window scrolling support for web
- Non deterministic rendering mode on demand (height cannot be determined before rendering)
- (New) ItemAnimator interface added, customize to your will how RLV handles layout changes. Allows you to modify animations that move cells. You can do things like smoothly move an item to a new position when height of one of the cells has changed.
- (New) Stable Id support, ability to associate a stable id with an item. Will enable beautiful add/remove animations and optimize re-renders when DataProvider is updated.
- (New) Sticky recycler items that stick to either the top or bottom.
4. WatermelonDB 🍉
🍉 Reactive & asynchronous database for powerful React and React Native apps. Build powerful React and React Native apps that scale from hundreds to tens of thousands of records and remain fast ⚡️
5. Patch Package
This one is not limited to react. But it’s one of the best libraries that serves the purpose especially when it comes to react native where things change blazing fast. patch-package lets app authors instantly make and keep fixes to npm dependencies. It's a vital band-aid for those of us living on the bleeding edge.
Patches created by
patch-packageare automatically and gracefully applied when you usenpm(>=5) oryarn. No more waiting around for pull requests to be merged and published. No more forking repos just to fix that one tiny thing preventing your app from working.
6. Reanimated Bottom Sheet
Highly configurable component imitating native bottom sheet behavior, with fully native 60 FPS animations!
Built from scratch with react-native-gesture-handler and react-native-reanimated.
Usable with Expo with no extra native dependencies!
7. React native light box
Full Screen Lightbox Popovers for React Native. This lib will help you animate images just like shared transitions, using a very simple API. An alternate to fluid transitions if you only want limited animations.
8. React Native TextInput Mask
Text input mask for React Native on iOS and Android. I had write this logic manually when we started react native years ago. Thanks to react native community we have a much simpler solution now.
9.React Native PopOver
What if you wanted to open an alert or pop-up on a specific point like right below a cell in a data table. Normally you wold have write some custom logic to do this which can be a bit tedious. This library help us to do this quickly by providing a simpler API that works awesome
10. Normalizr
Many APIs, public or not, return JSON data that has deeply nested objects. Using data in this kind of structure is often very difficult for JavaScript applications, especially those using Flux or Redux.
Normalizr is a small, but powerful utility for taking JSON with a schema definition and returning nested entities with their IDs, gathered in dictionaries.
Consider a typical blog post. The API response for a single post might look something like this:
{
"id": "123",
"author": {
"id": "1",
"name": "Paul"
},
"title": "My awesome blog post",
"comments": [
{
"id": "324",
"commenter": {
"id": "2",
"name": "Nicole"
}
}
]
}We have two nested entity types within our article: users and comments. Using various schema, we can normalize all three entity types down:
import { normalize, schema } from 'normalizr';// Define a users schema
const user = new schema.Entity('users');// Define your comments schema
const comment = new schema.Entity('comments', {
commenter: user
});// Define your article
const article = new schema.Entity('articles', {
author: user,
comments: [comment]
});const normalizedData = normalize(originalData, article);
Now, normalizedData will be:
{
result: "123",
entities: {
"articles": {
"123": {
id: "123",
author: "1",
title: "My awesome blog post",
comments: [ "324" ]
}
},
"users": {
"1": { "id": "1", "name": "Paul" },
"2": { "id": "2", "name": "Nicole" }
},
"comments": {
"324": { id: "324", "commenter": "2" }
}
}
}11. React Native Restart
This library can be used to restart the javascript bundle. Particularly useful for redux persist or other scenarios whether we need to restart the app to make sure changes are applied.
import RNRestart from 'react-native-restart'; // Import package from node modules
// Immediately reload the React Native Bundle
RNRestart.Restart();This library was extracted from the CodePush (Microsoft) to reload the React Native Bundle.
“Remember, code is your house, and you have to live in it.”
― Michael C. Feathers, Working Effectively with Legacy Code
