React Native 0.56 release

React Native version 0.56 was recently released. Here is a selection of some changes to be excited about.

Support for Babel 7 and optional chaining

With React Native 0.56 comes support for Babel 7. If you are a Swift developer you will probably already be familiar with optional chaining.
Optional chaining allows you to access nested properties of an object without having to worry about undefined intermediate objects.

Let's say we have an object like this:

const house = {
	apartment: {
		tenant: {
			name: 'Peter'
		}
	}
}

Without optional chaining we would have to write something like this to access the nested name property of the house object:

let name = "";
if(house && house.apartment && house.apartment.tenant && house.apartment.tenant.name){
	name = house.apartment.tenant.name
}

Now with optional chaining we can try to access the name of the tenant without having to resort to querying each nested subproperty of house for undefined by simply writing:

const name = house?.apartment?.tenant?.name;

This line of code means:

If house is not undefined, evaluate house.apartment if house.apartment is not undefined evaluate house.apartment.tenant and if house.apartment.tenant is not undefined evaluate the value of house.apartment.tenant.name and assign it to name.

You can also mix optional chaining with normal chaining such as

const name = house?.apartment.tenant?.name;

This line means:

If house is not undefined, evaluate house.apartment and if house.apartment.tenant is not undefined, evaluate and assign the value of house.apartment.tenant.name to name.

Optional chaining is some nice syntactical sugar that allows you to write less code when accessing nested properties of an object. It also works with functions:

function identifyYourself() {
	return 'I am a function'
}

identifyYourself?.() // returns 'I am a function'

Flex wrap-reverse

Up until now flexWrap: wrap-reverse hadn't been implemented in React Native. flexWrap let's us specify wrapping behavior of flex elements. The default is nowrap. This means that when the elements are bigger than the row (or column) in which they are aligned, they will shrink according to their flex values without wrapping into the next row.
| 1 || 2 || 3 |

Specifying wrap tells Flexbox to wrap the elements into the next row (or column) if they are too big, so that they can retain their original sizes.
| 1 || 2 |
| 3 |

The wrap-reverse value is similar to wrap as it wraps the elements to the next row (or, yes you guessed it, column). However, on top of wrapping to the next column (or row; see what I did there? 😁), it also reverses the direction from which the elements are wrapped. Or more precisely in Flexbox parlance: 'cross-start and cross-end are swapped.
| 3 |
| 2 || 1 |

• Image.defaultSource property on Android
  • Allows you to set a local placeholder image while loading a remote image. This had already been implemented in iOS.
• Image.resizeMode=repeat on Android
  • Implements the repeat value for the resizeMode prop for the Image component. This also already existed on iOS.
• From now on the minimum required version of Node will be version 8. With this change trailing commas, which Prettier adds to function parameter lists, are now allowed.
• Xcode 9 and iOS 9 will now be the the minimum required versions for working with React Native 0.56
• Android projects are now compiled with the SDK 26.

Other noteworthy updates

• Image.defaultSource property on Android
  • Allows you to set a local placeholder image while loading a remote image. This had already been implemented in iOS.
• Image.resizeMode=repeat on Android
  • Implements the repeat value for the resizeMode prop for the Image component. This also already existed on iOS.
• From now on the minimum required version of Node will be version 8. With this change trailing commas, which Prettier adds to function parameter lists, are now allowed.
• Xcode 9 and iOS 9 will now be the the minimum required versions for working with React Native 0.56
• Android projects are now compiled with the SDK 26.