React Native: Invalid prop `transform` of type `string` supplied, expected an array

Question

We are using the CSS style transform/translate parameters but this is invalid for React Native typescript.

 Invariant Violation: Invalid prop `transform` of type `string` supplied to `StyleSheet modalContent`, expected an array.
    StyleSheet modalContent: {
      "transform": "translate(-50%, -50%)",
    }

What is the correct way to write this in React Native?

Answer 1

I found the official docs here.

These are the options for the array:

[
 {matrix: number[]}, 
 {perspective: number}, 
 {rotate: string}, 
 {rotateX: string}, 
 {rotateY: string}, 
 {rotateZ: string}, 
 {scale: number}, 
 {scaleX: number}, 
 {scaleY: number}, 
 {translateX: number}, 
 {translateY: number}, 
 {skewX: string}, 
 {skewY: string}
]

So in my case it would be:

transform: [
  {translateX: '-50%'}, 
  {translateY: '-50%'}
]