What is New in React Native 0.63?

 Find out what’s new and what’s exciting in React Native 0.63 release. React Native 0.63 was released with redesigned LogBox, new Pressable component, native colors and other improvements, let’s talk about each in-depth.

For many years, React Native has been a popular framework in the mobile application development world. It has taken the world by storm by allowing developers to build both iOS and Android applications simultaneously. The better performance and simplicity of React Native compared to other platforms was loved by many top brands and companies, such as Microsoft, Uber and Facebook. Its ability to code once and deploy anywhere has translated to huge savings of time and resources. Over the years, React Native has come up with several updates, thanks to its hundreds of contributors who work relentlessly to make react Native better every day.

Facebook-powered React Native recently released its latest update 0.63 of the platform, bringing several new features that are majorly directed towards alleviating developers headaches. One of the significant updates of the React Native is the clean up of poorly formatted error logs and allowing developers to make improvements in order to conform with Apple’s app store rules. This new feature that cleans up error messages is called LogBox. Other notable improvements are the introduction of a new Pressable component and native color enhancements. Let’s dive into each new feature ofReact Native 0.63 and talk about it in detail.

1. Improved Log Box

The React Native community frequently reported that the warnings and errors are difficult to handle and rectify in the previous versions. The framework looked at all the issues pertaining to error and log handling and redesigned the entire LogBox system from the ground up. LogBox was introduced in React Native 0.62 version as an opt-in feature, but it comes as a default experience in the 0.63 version. The completely new designed RedBox, YellowBox and logging experience in React Native are focused on three primary goals:

Concise –The log data should provide the precise and to-the-point information required to resolve an issue.

Formatted –The log should be formatted in such a way that it should be understood easily and you can find the information you need quickly.

Actionable –The log should be actionable, which means you can take the actions directly and fix the issue right there.

These goals are achieved in the following way:

Log Notifications – The redesigning of the warning notifications and adding support for errors now enable all consol.warm and console.log message to appear as notifications rather than covering the entire app.

Code Frames –Every warning and error now include a coding frame that displays the source code of the log right in the app, so you can immediately identify the cause of the issue.

Component Stacks – All component stacks now include only essential information, without error messages, and are kept in their own section.

Stack Frame Collapsing – All the stack frames that are not relevant to your application will be collapsed, so you can easily find the issue in your app, rather than shifting to React Native internals.

Syntax Error Formatting – The formatting of the syntax errors has improved and the code frames are added with syntax highlighting that gives a clear view of the bug, allowing you to fix it and continue programming.

All these features are packed into a visual UI that is consistent throughout warnings and errors, offering smooth pagination across all logs.

The new version also replaces YellowBoxwith LogBox APIs. YellowBox.ignoreLogs([]) is replaced by LogBox.ignoreLogs()as a means to mute any logs that match the given expression or string. The developer will also be warned about these deprecation's during their coding.

2. The New Pressable Component

In this release React native introduced a new core component called Pressable to detect various types of interactions. Now it provides direct access to the pressed state of interaction without having to maintain state manually, lets see a small example to understand it:

import React from 'react';
import {SafeAreaView, StyleSheet, View, Text, Pressable} from 'react-native';

const App: () => React$Node = () => {
  return (
    <>
      <SafeAreaView style={styles.safeAreaView}>
        <View style={styles.container}>
          <Pressable
            style={({pressed}) => [
              {
                backgroundColor: 'green',
                opacity: pressed ? 0.5 : 1,
              },
              styles.button,
            ]}>
            {({pressed}) => (
              <Text style={styles.text}>
                {pressed ? 'Pressed!' : 'Press Me'}
              </Text>
            )}
          </Pressable>
        </View>
      </SafeAreaView>
    </>
  );
};

export default App;

3. Native Colors Enhancement

Every native platform has some system-defined colors. Both iOS and Android offer system colors that can be used in the application. Colors that respond are based on the theme settings, such as dark and Light mode, accessibility settings such as High Contrast mode and even within the app. As developers can detect these settings through Appearance API and AccessibilityInfo, these abstractions are not only expensive to build but are just a close intimation of native colors. Such inconsistencies are specifically detectable when working with hybrid applications, where native elements exist with React Native elements.

However, with new PlatformColor() update,developers can use system colors right out-of-the-box. Users can use device native colors in the iOS or Android application with the help of this new API. For instance, iOS provides a color called LabelColor, which can be used in React Native with PlatformColor. On the other hand, Android providescolorButtonNormal to use with React Native. There is one iOS-based API, DynamicColorIOS, that allows users to change color based on the appearance mode of the device, such as light or dark. Similar to PlatformColor, DynamicColorIOS can be used anywhere.

For example, on iOS, the system provides a color called labelColor. That can be used in React Native with PlatformColor like this:

import { Text, PlatformColor } from 'react-native';

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

Sets the color of the Text component to labelColor as defined by iOS.

Android, on the other hand, provides colors like colorButtonNormal. You can use this color in React Native with:

import { View, Text, PlatformColor } from 'react-native';

<View
  style={{
    backgroundColor: PlatformColor('?attr/colorButtonNormal')
  }}>
  <Text>This is colored like a button!</Text>
</View>;

Sets the background color of the View component to colorButtonNormal as defined by Android.

You can learn more about PlatformColor from the documentation. You can also check the actual code examples present in the RNTester.

DynamicColorIOS is an iOS only API that lets you define which color to use in light and dark mode. Similar to PlatformColor, this can be used anywhere you can use colors. DynamicColorIOS uses iOS’s colorWithDynamicProvider under the hood.

import { Text, DynamicColorIOS } from 'react-native';

const customDynamicTextColor = DynamicColorIOS({
  dark: 'lightskyblue',
  light: 'midnightblue'
});

<Text style={{ color: customDynamicTextColor }}>
  This color changes automatically based on the system theme!
</Text>;

Changes the text color based on the system theme.

4. Withdrawing Support for iOS 9 and Node.js 8

The new React Native update will no longer provide support for iOS 9 and Node.js 8. This allows the platform to move at a faster pace by reducing the number of compatibility checks required to run on the native code in order to ensure that the added feature is compatible with all versions of iOS. Holding only 1%  of the market share, it wouldn’t create a negative impact on your users.

The Long Term Support (LTS) maintenance cycle of Node 8 expired in December 2019. They are currently targeting Node 10version for LTS. If you are still working on Node 8 to build React Native applications, it is highly recommended that you upgrade to Node 10 in order to get all the latest security updates and fixes.

5. Other significant improvements

Support rendering <View /> in <Text /> without explicit size: You can now render any <View /> inside any <Text /> component without setting its width and height explicitly, which wasn’t always possible. On previous releases of React Native, this would result in a RedBox.

Changed iOS LaunchScreen from xib to storyboard: Starting April 30, 2020, all apps submitted to the App Store must use an Xcode storyboard to provide the app’s launch screen and all iPhone apps must support all iPhone screens. This commit adjusts the default React Native template to be compatible with this requirement.

Reference :-

https://reactnative.dev/blog/2020/07/06/version-0.63