Constrain View to square aspect ratio

Question

I'm playing with an iPhone app in react-native and I'd like a view to fill the screen in width and maintain a square aspect ratio. So the height should equal the width. I can't seem to find a way to achieve that. The other option is to specify a specific width and height but I'm not seeing a way to query the device width from within react-native to allow me to do this. Any pointers?

Answer 1

I hope you are looking for this...

var Dimensions = require('Dimensions');
var device = Dimensions.get('window');


var styles = StyleSheet.create({
  squareBox: {
    width: device.width,
    height: device.width,
  }
);