Can someone explain this react native code snippet to me?

Question

I'm starting to look into react native, and for most of if, im doing good. But, although I know the concept of destructuring, I'm, scratching my head with this snippet of code.

var {
          View,
          Text,
          Image,
          Animated,
          StatusBarIOS,
          TouchableOpacity,
          DeviceEventEmitter
    } = React;

Can someone explain this to me?
Thanks!

Answer 1

This is just ES6 object destructuring. It is essentially creating a new variable for each one of the keywords listed in the object.

It is equivilant to :

var View = React.View;
var Text = React.Text;
var Image = React.Image;
var Animated = React.Animated;

.. etc

If this is unclear at all look at a simple object as an example:

const person = {
  name: 'sam',
  gender: 'male',
  age: 52
}

// create a variable for any property you want from the person object
let { name, age } = person;

console.log(name) // 'sam'
console.log(age) // 52..

As mentioned in the comments below because you are already using ES6 syntax you are most likely using a build tool or in an environment that supports ES6 and you should opt to use let or const instead of the ES5 var

Answer 2

This is ES2015 " destructuring assignment ". In simple words, this is a shorthand for assigning multiple variables in a single statement, extracting their values from the object at the right of the = operator. Is the same as doing:

var View = React.View,
    Text = React.Text,
    Image = React.Image,
//... and so on.

So, the important part to note here is that this is a short way of the following:

var {
  View: View,
  Text: Text, 
  // ...   
} = React;

But since, the newly created variables have the same name as React object's properties, it can be simplified to:

var {
  View,
  Text, 
  // ...   
} = React;