React Native versions –

In this article, I am going to discuss “React Native Version Update Part – 2”.

You can find the first part of this post is here, here you find detailed information about version content changes.

Here we discuss the most significant changes, which are pressable, colors changes, and other improvements.

Pressable Component –

We all know that if we want to implement any clickable functionality in react native then we use one of them in the following –

Button, 
TouchableWithoutFeedback, 
TouchableHighlight, 
TouchableOpacity, 
TouchableNativeFeedback, 
and TouchableBounce

But React Native needs to support high-quality interaction experiences for all platforms, for the solution to this problem react-native introduced the pressable component and is used to detect various types of users interactions and this component is designed for providing direct access to the current state of interaction.

it also includes hover, blur, focus, etc functionality.

for using this you need to import the Pressable component first, which is a component of react-native.

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

<Pressable
  onPress={() => {
    console.log('pressed');
  }}
  style={({ pressed }) => ({
    backgroundColor: pressed ? 'lightskyblue' : 'white'
  })}>
  <Text style={styles.text}>Press Me!</Text>
</Pressable>;

Native Colors: PlatformColor, DynamicColorIOS –

System-defined colors are the concept of each native platform, these colors respond automatically in light or dark mode for the system. you will be able to detect some of these settings via the Appearance and/or AccessibilityInfo. so the question is how we use the system-defined colors in react native and the answer is PlatformColor() which is a new API that is out of the box for color selecting.

• iOS Example is, the system provides a color called label color. by using this we define the color of text, That can be used in React Native  PlatformColor like following.

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

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

• Android provides colors like colorButtonNormal we can use these in react native.

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

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

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

iOS uses the DynamicColorIOS which is the iOS-only API that defines which color you use in light and dark mode.

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>;

Dropping Support for iOS 9 and Node.js 8 –

In this version, update react-native withdrawing the support of iOS 9 and node.js 8, by this dropping react-native move faster because it reduces the number of compatibility.

there is not much used for iOS 9, I think there is only 1% of users for this.

Note – react-native targeting the version of node 10, if you are still using node 8 for the development then you need to upgrade it.

Some of the other notable improvements –

• Support rendering <View /> within <Text /> – You can now render the <view> within any <Text> without defining his height and width explicitly. previously this is a result of a Redbox error.
• iOS LaunchScreen changes from xib to storyboard – After April 30, 2020, you can only submit the App Store must use an Xcode storyboard for the app’s launch screen.

Note – Archived versions – 0.60 is an archived version of which has a separate website called React Native Archive.

So we completed the react-native react-native version changes which are “React Native Version Update Part – 2“.

if you guys want to know about react native 0.64 updates then please comment so I can write one more.

If have any query or issues, please feel free to ask.

Happy Coding Guys.