That you don’t know but you will want to use

When we talk about React & React Native development, there are a lot of cool techniques and little tricks that we can use to make our life a little bit easier. I’m sure that you are probably aware of some and you already use them while working on your projects. But I bet that there are a bunch of them that you’ve never tried or seen in use cases.

I’ve been working with React and React Native for a long time and I’m constantly finding new possibilities and shortcuts that I keep on including into my daily coding.

With this article I want to share some snippets and small tricks that I’ve been using for a while now and I’m sure that could make your work easier.

1. React is able to assign keys to your children for you

key is necessary when you are creating a list of elements in React. Those keys provide an identity to these elements. Commonly, when you are rendering an array of elements to fit the required keys, you do something like this:

{
    someArrayData.map(item => <div key={item.id}>Welcome Stranger!</div>)
}

What if I told you that you dont’ need to worry about it anymore? There is a build-in solution which automatically assigns the keys for you 😱

{
    React.Children.toArray( someArrayData.map(item => <div>Welcome Stranger!</div>) ) 
}

And also as a bonus feature, if you return a null or an undefinedChildren.toArray will take care of  it and skip it from the final result.

2. Passing props like a pro

An easy alternative method to pass props to components is to pass it as a spread object. That would make you look as a pro and it also saves time.

Here is an example:

<BuhoneroSeller items={items} clothes={clothes} discount={discount} />
 
<BuhoneroSeller {... {items, clothes, discount}} />

3. React.memo has a second parameter

As we all know, React.memo is a HOC, so the logic behind is: when the props of the component change, it’ll make a shallow comparison and the component will be rendered if one of the properties is different from the one before.

But not everyone knows that React.memo has a second parameter, a comparison function, which can help you define customer behavior for rerenders.

export default React.memo(AwesomeComponent, (prevProps, nextProps) => {
    // Your logic to re render it.
})

PD: Do not confuse with: useMemo, this is a hook that returns a memorized value.

3. React-Native Doctor

As you might all know, setting up a React Native environment is not always an easy task. But luckily, from react-native@0.62 we have a new diagnostic tool called React-Native Doctor. The doctor command (react-native doctor) checks your developer environment and displays a report of the status of your React Native setup and lets you know what is to be done to make it work properly. It is used to diagnose if there are any platform dependencies that are pending to be completely setup.

However, if you are using an older React Native version, you can try it without upgrading yet:

npx @react-native-community/cli doctor 

4. Pressable vs. Touchable

On react-native@0.63 it was introduced the new component Pressable. So what is the difference between Pressable and Touchable?

Pressable and Touchable components look pretty similar. Their basic functionalities are the same for making a text/image clickable and user interaction. But Pressable has some differences that makes it the new start:

  1. It detects various types of interactions.
  2. Its capabilities could be extended to include hover, blur, focus, and more.

Here you are some examples so as to have a quick view into that cool stuff.

  • onLongPress: Called if the time after onPressIn lasts longer than 370 milliseconds.
  • delayLongPress: Duration in milliseconds from onPressIn by the time onLongPress is called.
  • hitslop: Sets additional distance outside the element in which a press can be detected.
  • pressRetentionOffset: Additional distance outside the view which a touch is considered a press, before onPressOut is triggered.

This is very new stuff, but the Pressable component is intended to replace the Touchable components, so let’s start using it from now on.

5. Native Colors (PlatformColor)

One of the main goals that we want to achieve with React Native, is to make an application that looks native in both platform Android and IOs, and colors are something very important to achieve this.

Each of these platforms have their own color schema and now we can use it to make a fancy native UI. How can we use them? Well, React Native now provides an out-of-the-box solution to use these system colors, and it’s called PlatformColor(). It’s a new API that can be used like any other color in React Native. And you can combine it with Platform.select to have even better results.

Here is the list of available colors:

And if you are wondering how to use it, here you are an example:

<Text style={{ color: PlatformColor('bogus', 'systemGreenColor') }}>
  This is a label
</Text>;

The first parameter is a default color and the second one is a fallback color.

And that’s all for this post. I hope you have learned something new for your day to day coding. If you have some other fun tricks that I didn’t mention, let me know.