[View] Keep view's aspect ratio based on new prop

Libraries/Components/View/View.js

@@ -182,6 +182,21 @@ var View = React.createClass({
     ]),
     style: stylePropType,
 
+    /**
+     * Makes the view resize in a fixed `aspectRatio` as the prop. It can be
+     * a number or a rectangle. As the width changes due to flex layout,
+     * the height will change in proportion with same aspect ratio. Use this
+     * to wrap images and other components, where you would like the aspect
+     * ratio to be maintained.
+     */
+    aspectRatio: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.shape({
+        width: PropTypes.number,
+        height: PropTypes.number,
+      }),
+    ]),
+
     /**
      * This is a special performance property exposed by RCTView and is useful
      * for scrolling content when there are many subviews, most of which are

Libraries/Image/Image.ios.js

@@ -93,6 +93,19 @@ var Image = React.createClass({
      * image dimensions.
      */
     resizeMode: PropTypes.oneOf(['cover', 'contain', 'stretch']),
+    /**
+     * Makes the image resize in a fixed `aspectRatio` as the prop. It can be
+     * a number or a rectangle. As the width changes due to flex layout,
+     * the height will change in proportion with same aspect ratio. Use this
+     * to wrap images where you would like the aspect ratio to be maintained.
+     */
+    aspectRatio: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.shape({
+        width: PropTypes.number,
+        height: PropTypes.number,
+      }),
+    ]),
     /**
      * A unique identifier for this element to be used in UI Automation
      * testing scripts.

Libraries/ReactNative/ReactNativeViewAttributes.js

@@ -35,6 +35,12 @@ ReactNativeViewAttributes.RCTView = merge(
   // many subviews that extend outside its bound. The subviews must also have
   // overflow: hidden, as should the containing view (or one of its superviews).
   removeClippedSubviews: true,
+
+  // This property makes the view resize in the same aspect ratio as the 
+  // `aspectRatio` rectangle. As the width changes due to flex layout,
+  // the height will change in proportion with same aspect ratio.
+  aspectRatio: true,
+
 });
 
 module.exports = ReactNativeViewAttributes;

React/Views/RCTShadowView.h

@@ -111,6 +111,12 @@ typedef void (^RCTApplierBlock)(RCTSparseArray *viewRegistry);
 @property (nonatomic, assign) css_wrap_type_t flexWrap;
 @property (nonatomic, assign) CGFloat flex;
 
+/**
+ * Makes the box rigid, and sizes itself in flex with the
+ * defined aspect ratio of the CGSize rectangle.
+ */
+@property (nonatomic, assign) CGSize aspectRatio;
+
 /**
  * Calculate property changes that need to be propagated to the view.
  * The applierBlocks set contains RCTApplierBlock functions that must be applied

React/Views/RCTShadowView.m

@@ -86,11 +86,45 @@ static void RCTProcessMetaProps(const float metaProps[META_PROP_COUNT], float st
   : 0;
 }
 
+/*
+ * Sets the measure function on the cssNode, when the aspectRatio rectangle is
+ * set. This helps calculate the height of the node based on width of the parent
+ * and maintains the aspect ratio of the node.
+ */
+static css_dim_t RCTAspectRatioMeasure(void *context, float width)
+{
+  RCTShadowView *shadowView = (__bridge RCTShadowView *)context;
+  if (isnan(width)) {
+    width = shadowView.aspectRatio.width;
+  }
+
+  CGFloat computedHeight = 0.0f;
+  if (shadowView.aspectRatio.width > 0) {
+    computedHeight = width * (shadowView.aspectRatio.height / shadowView.aspectRatio.width);
+  }
+
+  css_dim_t result;
+  result.dimensions[CSS_WIDTH] = width;
+  result.dimensions[CSS_HEIGHT] = computedHeight;
+  return result;
+}
+
 - (void)fillCSSNode:(css_node_t *)node
 {
   node->children_count = (int)_reactSubviews.count;
 }
 
+// Aspect Ratio
+- (void)setAspectRatio:(CGSize)aspectRatio {
+  _aspectRatio = aspectRatio;
+  if (aspectRatio.width && aspectRatio.height) {
+    self.cssNode->measure = RCTAspectRatioMeasure;
+  } else {
+    self.cssNode->measure = nil;
+  }
+  [self dirtyLayout];
+}
+
 // The absolute stuff is so that we can take into account our absolute position when rounding in order to
 // snap to the pixel grid. For example, say you have the following structure:
 //

React/Views/RCTViewManager.m

@@ -275,4 +275,16 @@ - (RCTViewEventHandler)eventHandlerWithName:(NSString *)eventName json:(id)json
 
 RCT_REMAP_SHADOW_PROPERTY(onLayout, hasOnLayout, BOOL)
 
+RCT_CUSTOM_SHADOW_PROPERTY(aspectRatio, CGSize, RCTShadowView) {
+  if ([view respondsToSelector:@selector(setAspectRatio:)]) {
+    if ([json isKindOfClass:NSDictionary.class]) {
+      [view setAspectRatio:[RCTConvert CGSize:json]];
+    } else if (json) {
+      [view setAspectRatio:CGSizeMake([RCTConvert CGFloat:json], 1.0f)];
+    } else {
+      [view setAspectRatio:defaultView.aspectRatio];
+    }
+  }
+}
+
 @end