The “State” of React-Native-Community

Adeen Shukla — Tue, 02 Nov 2021 17:17:20 +0000

Originally published on May 8, 2021

React Native is a highly popular framework by Facebook to create cross-platform mobile applications using JavaScript. Just like any other tool react-native is not perfect and has its fair share of issues, it still manages to continuously outshine and outgrow the competition by virtue of an active community and the ability to utilize existing packages using npm.

JavaScript has been at the forefront of web development for many years now and the collective efforts of all the contributors have not only propelled it into being the ubiquitous language for web-frontend, but also backend development in the form of Node.js (and Deno). At some point during this growth of JavaScript, npmjs was born. It provided a quick way to add commonly needed features by utilizing existing packages. Since it allowed developers to effortlessly reuse many common modules, JavaScript and npm were soon adapted to be used in all places, from mobile applications in the form of react native and ionic to desktop apps using electron.js, and there are even some actively developed Operating Systems using JavaScript such as NodeOs and the externOS project. All this popularity and growth can be attributed to the ease with which external packages can be imported and used using npm.

React Native Community is an organization that hosts some of the most popular and most important packages used by the react-native community. While there is no official policy on which packages belong in the React Native Community, it has historically hosted packages that were in the official react-native repository but were later separated out and other packages used to support these packages. It also hosts some other arbitrary packages to support common requirements like camera, video, linear gradients, etc.

Besides these packages, React Native Community is also the home for resources for the react-native community. It hosts the repositories to facilitate discussions, lists the releases, and provides tools such as the upgrade-helper among others. While this organization is not affiliated with Facebook, the perceived affiliation due to the presence of several previously core packages, and the presence of repositories that track and facilitate discussions and proposals for react-native and its new releases give the organization additional clout in the community. This leads to the packages hosted within React Native Community being perceived as “official”, high quality, and actively maintained.

Since there is no clear benefit to having many of these packages in the same organization while being maintained by different groups of people, or in many cases, not being actively maintained anymore, the React Native Community decided to adopt a new policy for the repositories that they will host.

“The organization will contain repositories that act as forums for structured discussions and/or provide information about React Native and the ecosystem. These repositories may be purely textual, or they may be tools like the Upgrade Helper and React Native Directory, depending on what is better suited for the job. The organization will not include libraries that developers install and use in their projects.”

This does prompt the debate of having the packages in a centralized organization versus having them distributed in independent repositories. Both have their own pros and cons but the pros of having the packages distributed between multiple organizations or in independent repositories do outweigh the cons by eliminating a single point of failure from the ecosystem and promoting independent developers to contribute to the packages without having to depend on a small set of maintainers to make all the decisions.

Since the core react-native repository no longer includes the packages, and they have been moved out of their home at the React Native Community organization, many of them may no longer be perceived as the “official” package for a task. This can lead to some fragmentation in the developer community but it will also open the gates for other maintainers to create their own versions which may be better optimized, provide more features, or be easier to use.

The developers on a lot of react-native projects may see deprecation warnings on their packages from @react-native-community, it may ultimately be for the good as it prevents centralization of resources and keeps up with the spirit of open source by ensuring that all packages have a level playing field.

Getting Hooked to React Native

Adeen Shukla — Tue, 02 Nov 2021 17:07:03 +0000

React, as you might be familiar, is a frontend web development library, and it is one of the most popular ones out there. Like other things in the fast-paced world of JavaScript, React has gone through its fair share of updates and changes through the years. None of those changes have been as revolutionary as the introduction of hooks in version 16.8.

Hooks introduced a new way of working with react. They removed a lot of boilerplate, got rid of having to deal with binding functions with ‘this’, and ultimately made the code a lot more clean, readable, and easy to work with. Hooks allow us to use React features and state without a class, and since react concepts are conceptually closer to functions rather than classes, this makes the life of the developers easier.

Since React Native is essentially just React for mobile apps, unsurprisingly, hooks are available here as well. While almost everyone is familiar with the useEffect and useState hooks, several other community-created hooks can make our code more readable, concise, and also reduce potential bugs and memory leaks.

A very common scenario in ReactJS and React Native is to create an event listener for an event, execute a function whenever the event occurs, and finally unsubscribe from the event and cleanup before unmounting the component. Handling several such asynchronous platform APIs can soon lead to a very cluttered codebase with multiple event listeners, multiple functions to be called from those event listeners, multiple cleanup functions, and ensuring that all of them are unsubscribed to prevent memory leaks and unintended side effects.

This is where hooks come to the rescue. Let’s take a look at an example:

import { useDimensions } from '@react-native-community/hooks'
const { width, height } = useDimensions().window

The above code imports a hook, useDimensions, and then gives us two variables, called height and width, which represent the height and width of the application’s window. This hook will not only get the dimensions but also sets up a listener that will change the dimensions if the user changes device orientation. We do not need to subscribe to the device’s orientation change event, and neither do we have to worry about updating the values in our code on this change. It’s all gracefully handled for us and tidily cleaned up when no longer required.

Another common use case for hooks is dealing with the keyboard:

import { useKeyboard } from '@react-native-community/hooks'
const keyboard = useKeyboard()

That’s all we need to do to use the keyboard. The keyboard const created above gives us properties such as the height of the keyboard and whether the keyboard is shown or not.
It’s immediately apparent that these hooks not only save time in development, they also improve readability and make our code more maintainable.

There are several such hooks available for use, check out the documentation here for a list of the available hooks from react-native-community: https://github.com/react-native-community/hooks

DEV Community: Adeen Shukla

The “State” of React-Native-Community

Originally published on May 8, 2021

Getting Hooked to React Native