Unable to use scaleX, scaleY on <View>

[amitverma]

I have been trying to use scaleX and scaleY on a <View/> component, but it is not working. Do I need to keep something in mind while using it?

[brentvatne]

@amitverma - the documentation seems to be a bit unclear about this, this is how you need to specify it:

<View style={{flex: 1, transform: [{translateY: 50}, {scaleX: 0.5}, {scaleY: 0.5}]}}>
   <Text>Text here!</Text>
</View>

[brentvatne]

Updated docs to remove this, working on fixing it up to better display those options under the transform prop.

@vjeux also informed me of something interesting: the reason that these are in an array in separate objects inside of the transform property is because order matters here - translate followed by scale is different than scale followed by translate.

[amitverma]

thanks @brentvatne for clearing things up. would switching order between scaleX and scaleY also produce different results?

[brentvatne]

@amitverma - nope, those should be the same as they scale the X and Y axis independently and irrespective of aspect ratio. Another interesting thing to know is you can apply transforms multiple times:

transform: [{scaleX: 0.5}, {scaleY: 1.5}, {scaleX: 1.5}] 😄

[brentvatne]

See #1181 for doc fix