Skip to content

Commit

Permalink
Add support for aspectRatio style prop
Browse files Browse the repository at this point in the history
Summary:
Expose aspectRatio style prop from css-layout to React Native.

This means the following will now work:

    <View style={{backgroundColor: 'blue', aspectRatio: 1}}/>

Reviewed By: javache

Differential Revision: D4226472

fbshipit-source-id: c8709a7c0abbf77089a4e867879b42dcd9116f65
  • Loading branch information
Emil Sjolander authored and Facebook Github Bot committed Nov 23, 2016
1 parent 1488725 commit 5850165
Show file tree
Hide file tree
Showing 7 changed files with 30 additions and 0 deletions.
15 changes: 15 additions & 0 deletions Libraries/StyleSheet/LayoutPropTypes.js
Expand Up @@ -365,6 +365,21 @@ var LayoutPropTypes = {
flexShrink: ReactPropTypes.number,
flexBasis: ReactPropTypes.number,

/**
* Aspect ratio control the size of the undefined dimension of a node. Aspect ratio is a
* non-standard property only available in react native and not CSS.
*
* - On a node with a set width/height aspect ratio control the size of the unset dimension
* - On a node with a set flex basis aspect ratio controls the size of the node in the cross axis
* if unset
* - On a node with a measure function aspect ratio works as though the measure function measures
* the flex basis
* - On a node with flex grow/shrink aspect ratio controls the size of the node in the cross axis
* if unset
* - Aspect ratio takes min/max dimensions into account
*/
aspectRatio: ReactPropTypes.number,

/** `zIndex` controls which components display on top of others.
* Normally, you don't use `zIndex`. Components render according to
* their order in the document tree, so later components draw over
Expand Down
2 changes: 2 additions & 0 deletions React/Views/RCTShadowView.h
Expand Up @@ -138,6 +138,8 @@ typedef void (^RCTApplierBlock)(NSDictionary<NSNumber *, UIView *> *viewRegistry
@property (nonatomic, assign) float flexShrink;
@property (nonatomic, assign) float flexBasis;

@property (nonatomic, assign) float aspectRatio;

- (void)setFlex:(float)flex;

/**
Expand Down
1 change: 1 addition & 0 deletions React/Views/RCTShadowView.m
Expand Up @@ -652,6 +652,7 @@ - (type)getProp \
RCT_STYLE_PROPERTY(Position, position, PositionType, CSSPositionType)
RCT_STYLE_PROPERTY(FlexWrap, flexWrap, FlexWrap, CSSWrap)
RCT_STYLE_PROPERTY(Overflow, overflow, Overflow, CSSOverflow)
RCT_STYLE_PROPERTY(AspectRatio, aspectRatio, AspectRatio, float)

- (void)setBackgroundColor:(UIColor *)color
{
Expand Down
1 change: 1 addition & 0 deletions React/Views/RCTViewManager.m
Expand Up @@ -294,6 +294,7 @@ - (RCTViewManagerUIBlock)uiBlockToAmendWithShadowViewRegistry:(__unused NSDictio
RCT_EXPORT_SHADOW_PROPERTY(alignItems, CSSAlign)
RCT_EXPORT_SHADOW_PROPERTY(alignSelf, CSSAlign)
RCT_EXPORT_SHADOW_PROPERTY(position, CSSPositionType)
RCT_EXPORT_SHADOW_PROPERTY(aspectRatio, float)

RCT_EXPORT_SHADOW_PROPERTY(overflow, CSSOverflow)

Expand Down
Expand Up @@ -112,6 +112,11 @@ public void setFlexBasis(float flexBasis) {
super.setFlexBasis(flexBasis);
}

@ReactProp(name = ViewProps.ASPECT_RATIO, defaultFloat = CSSConstants.UNDEFINED)
public void setAspectRatio(float aspectRatio) {
setStyleAspectRatio(aspectRatio);
}

@ReactProp(name = ViewProps.FLEX_DIRECTION)
public void setFlexDirection(@Nullable String flexDirection) {
if (isVirtual()) {
Expand Down
Expand Up @@ -576,6 +576,10 @@ public void setFlexBasis(float flexBasis) {
mCSSNode.setFlexBasis(flexBasis);
}

public void setStyleAspectRatio(float aspectRatio) {
mCSSNode.setStyleAspectRatio(aspectRatio);
}

public void setFlexDirection(CSSFlexDirection flexDirection) {
mCSSNode.setFlexDirection(flexDirection);
}
Expand Down
Expand Up @@ -64,6 +64,8 @@ public class ViewProps {
public static final String MIN_HEIGHT = "minHeight";
public static final String MAX_HEIGHT = "maxHeight";

public static final String ASPECT_RATIO = "aspectRatio";

// Props that affect more than just layout
public static final String ENABLED = "enabled";
public static final String BACKGROUND_COLOR = "backgroundColor";
Expand Down

0 comments on commit 5850165

Please sign in to comment.