React Native - What is the benefit of using StyleSheet vs a plain object?

Question

What exactly is the benefit of using StyleSheet.create() vs a plain object?

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
}

Vs.

const styles = {
  container: {
    flex: 1
  }
}

Answer 1

Quoting directly from comment section of StyleSheet.js of React native

Code quality:

• By moving styles away from the render function, you're making the code easier to understand.

• Naming the styles is a good way to add meaning to the low level components in the render function.

Performance:

• Making a stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time.

• It also allows to send the style only once through the bridge. All subsequent uses are going to refer an id (not implemented yet).

Also StyleSheet validates your stylesheet content as well. So any error of incorrect style property is shown at time of compiling rather than at runtime when StyleSheet is actually implemented.