What’s new in React Native 0.63?

Find out what’s new and what’s exciting in React Native 0.63 release.

Image from official release of React Native 0.63

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

1. LogBox

LogBox is a completely redesigned redbox, yellowbox and logging experience in React Native.

It has been introduced into React Native 0.62.0 and you can enable it by adding following code in the index.js file.
require('react-native').unstable_enableLogBox()

LogBox is turned on by default in this release with following features:

Log notifications:

The newly redesigned warning and error notifications are more intuitive. So, all console.warn(''); and console.log(''); messages show up as notifications instead of covering the full screen in the app.

console.warn(‘This is warning…’);

Code Frames:

Error and warning now include a code frame that shows the source code inside the app to quickly identify the issues in source code and fix it faster.

Component Stacks:

All component stacks are now fetched from error messages and put with their own section with the top three frames visible.

Stack Frame Collapsing:

We can collapse call stack frames not related to the application’s code so we can quickly see the issue in app.

Syntax Error Formatting:

Improved the formatting for syntax errors and added code frames with syntax highlighting so we can see the source of the error, fix it.

YellowBox is now deprecated and replaced with LogBox APIs:

• LogBox.ignoreLogs(): replaces YellowBox.ignoreLogs([]) to silence any logs that match the given strings or regexes.
• LogBox.ignoreAllLogs(): replaces console.disableYellowBox to turn off error or warning notifications.

2. Pressable

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:

3. Native Colors (PlatformColor, DynamicColorIOS)

Now we can use native system colors provided from either iOS or Android. Using newly introduced API PlatformColor() we can get native system colors.

For example, on iOS, we can use a color called labelColor with PlatformColor like this:

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

on Android, we can use a color called colorButtonNormal with PlatformColor like this:

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

iOS Light Mode / Dark Mode native system colors

DynamicColorIOS is an iOS only API that lets you define which color to use in light and dark mode.

<View
  style={{
    backgroundColor: DynamicColorIOS({
      dark: 'lightskyblue',
      light: 'midnightblue',
    }),
  }}
/>

4. Dropping iOS 9 and Node.js 8 support

This new release drops support for iOS 9 and Node.js 8.

5. Other notable improvements

• You can now render any <View /> inside any <Text /> component without setting its width and height explicitly.
• Changed iOS LaunchScreen from xib to storyboard.

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

That's it for now, stay with us for more updates and technical How-Tos.