What is the purpose of double curly braces in React's JSX syntax?

It's just an object literal inlined in the prop value. It's the same as

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

Curly braces has got 2 usage here:-

1. { .. } evaluates to an expression in JSX.
2. { key: value } implies a javascript object.

Let see a simple example.

<Image source={pic} style={{width: 193}}/>

If you observe pic is surrounded by braces. That's the JSX way of embedding variable. pic can be any Javascript expression/variable/object. You can also do something like { 2+3 } and it will evaluate to { 5 }

Let's dissect style here. {width: 193} is a Javascript object. And to embed this object in JSX you need curly braces, hence, { {width: 193} }

Note: To embed any kind of Javascript expression/variable/object in JSX you need curly braces.

In case you didn’t know, why {{color: 'red'}} is used in the style tag

<span style={{color: 'red'}}>
    {this.props.product.name}
</span>;

According to React official documentation, the style attribute accepts a JavaScript object rather than a CSS string.