Off-beat libraries for React Native

react-native libraries

Hey there!

I’m back again.

This time, I’m attempting to highlight a list of libraries that have saved me a tonne of time and made my life easier as a react-native developer.

These are a few libraries I’ve accumulated over the last five years, and I wouldn’t hesitate to use them again if the opportunity presented.

Let’s get this started!

@react-native-clipboard/clipboard

If you ever wanted to add the ability to copy and paste text into your app, I can’t think of another library that works as well as this one.

This library allows you to copy and paste text with a single line of code -

// Copy
Clipboard.setString('hello world');

// Paste
Clipboard.getString();

Just like that, you can copy/paste any code from the clipboard.

react-native-haptic-feedback

If you know any iOS fanboy, you’ve probably heard them brag about their phones’ best-in-class vibration feedback. This, is made possible by Apple’s proprietary Taptic engine, which debuted in the iPhone 7. As, with any Apple product, once they’ve gotten used to it, there’s no turning back. You can tap into this taptic engine using react-native-haptic-feedback.

ReactNativeHapticFeedback.trigger("impactLight", options);

Similarly, when a user clicks on a call to action, you can provide sensory feedback with a single line of code.

I know, that was a very basic example; I’ll leave it to you to get creative. It allows for various levels of customization, such as how strong the vibration should be, how long the vibration should last, and so on. Even Android users would receive vibrations; however, the feedback would be inferior to that of the Taptic engine.

react-native-keep-awake

Have you ever had a user complain that their screen turns off while they are using the app, and it’s not your fault because they have set their screen timeout to something like 15 seconds, and if no touch response is received, the system turns off the device’s backlight? If you answered yes, this library is the one for you.

// Keep the screen awake
KeepAwake.activate();

// Turn the screen off based on the screen timeout of the device
KeepAwake.deactivate();

Simply enable the library on componentDidMount and disable it on componentWillUnmount

Now, if the user is on that specific component, the device’s screen timeout has no effect. Always remember to deactivate the library or you may face repercussions.

react-native-spinkit

This is one of those libraries that hasn’t been updated in a long time but still works. Have you ever wanted to animate a loader quickly? If you’re familiar with react-native animations, you know that animations are never quick. This library may be able to save you some time.

<Spinner type="ThreeBounce"/>

And in the same way, you can add a three-dot bouncing animation with a single line. You can change the colour, size, and other aspects to make it look presentable in your app, but I hope you get the idea. You can choose from a variety of animations, and the majority of them work on both iOS and Android.

react-native-sensors

This is one of the most recent libraries I picked. We were attempting to detect the orientation of the users’ devices when they had locked the device’s orientation. If you are having a similar problem, you should look into this library.
It exposes all of the sensors available on the device, such as the accelerometer, gyroscope, magnetometer, and barometer, allowing us to add listeners to sensors without relying on system-level settings.

// Subscribe
const subscription = accelerometer.subscribe(({ x, y, z, timestamp }) =>
  console.log({ x, y, z, timestamp })
);

// Unsubscribe
subscription.unsubscribe();

Similarly, you will be able to tap into the accelerometer of the user’s device and detect the device’s orientation.
As you handle any other listeners, always make sure to unsubscribe from the listener when you no longer need it, or else you know where I’m going, repercussions. 😉

Bonus

Okay, so this isn’t a library, but rather a useful tool that I recently discovered.

Whenever you try to start a simulator, you have to open Xcode, select a device, and hit run, and if you’re a lazy bum like me, you’d have a shortcut to your Apple simulator in your dock, but the shortcut method doesn’t work for Android Studio, you have to open Android Studio and open the AVD manager, which takes a while.

I can imagine how aggravating this moment would be if someone were standing right behind you, inspecting your screen for the minor changes you made the day before. Yup, you are not alone. I feel you. This could save your life in such awkward situations.

MiniSim

MiniSim

If you install the above menu bar utility, you will be able to access all of your simulators with a single click, and it will work flawlessly. Try it out and you’ll thank me later.

And that’s all for today!

Hope you folks like these libraries, feel free to drop the libraries which I should checkout in the comments below, I wouldn’t mind some claps. #shamelessplug

Follow me on any platform at @surajmdurgad.

Please let me know if it was helpful.

Until the next time! 👋🏻

Cheers! 🍻