What’s 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.
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.
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()
: replacesYellowBox.ignoreLogs([])
to silence any logs that match the given strings or regexes.LogBox.ignoreAllLogs()
: replacesconsole.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>;
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
tostoryboard
.
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.