Add percentage support to react native · facebook/react-native@3f49e74 · GitHub

  • – * must use logical pixel units, rather than percents, ems, or any of that .
  • +14 −1 ReactAndroid/src/main/java/com/facebook/react/flat/FlatARTSurfaceViewShadowNode.java
  • /** `left` is the number of logical pixels to offset the left edge of
  • /** `paddingBottom` works like `padding-bottom` in CSS.
  • /** `paddingLeft` works like `padding-left` in CSS.

react-native – A framework for building native apps with React.

@EmilSjolander: Percentage support has landed in React Native. , Try it out! Thanks @lwoehrl for the work on yoga. #reactnative

Add percentage support to react native · facebook/react-native@3f49e74 · GitHub

Skip to content

Ignore Learn more Please note that GitHub no longer supports old versions of Firefox.

We recommend upgrading to the latest Safari, Google Chrome, or Firefox.

Personal Open source Business Explore Sign up Sign in

Pricing Blog Support Search GitHub

This repository

Watch 2,808

Star 42,704

Fork 9,774

facebook / react-native

Code Issues 795 Pull requests 158 Projects 0 Wiki Pulse Graphs

Permalink Browse files Add percentage support to react native

Summary: Adds support for percentage value in react native. syntax: property: 100 | property | ‘100%’ supported properties: padding margin width height minWidth minHeight maxWidth maxHeight flexBasis “` class Playground extends React.Component { render() { return ( If you want to quickly test out something, open the Playground.js file and start coding. ); } } “` Reviewed By: astreet Differential Revision: D4376549 fbshipit-source-id: c41d68a7555396f95d063a7527ee081773ac56dc

Loading branch information…

1 parent 00d5674 commit 3f49e743bea730907066677c7cbfbb1260677d11 emilsjolander committed with facebook-github-bot Jan 11, 2017

Unified Split

Showing 16 changed files with 559 additions and 208 deletions.

+46 −0 Examples/UIExplorer/UIExplorerUnitTests/RCTConvert_YGValueTests.m

+114 −39 Libraries/StyleSheet/LayoutPropTypes.js

+3 −1 React/Base/RCTConvert.h

+19 −0 React/Base/RCTConvert.m

+26 −26 React/Views/RCTShadowView.h

+67 −46 React/Views/RCTShadowView.m

+26 −26 React/Views/RCTViewManager.m

+14 −1 ReactAndroid/src/main/java/com/facebook/react/flat/FlatARTSurfaceViewShadowNode.java

+14 −1 ReactAndroid/src/main/java/com/facebook/react/flat/FlatReactModalShadowNode.java

+14 −1 ReactAndroid/src/main/java/com/facebook/react/flat/NativeViewWrapper.java

+125 −39 ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java

+71 −21 ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactShadowNode.java

+17 −4 …n/java/com/facebook/react/views/text/frescosupport/FrescoBasedReactTextInlineImageShadowNode.java

+1 −1 ReactAndroid/src/main/java/com/facebook/yoga/YogaValue.java

+0 −2 ReactCommon/yoga/yoga/Yoga.c

+2 −0 ReactCommon/yoga/yoga/Yoga.h

Show comments View

46 Examples/UIExplorer/UIExplorerUnitTests/RCTConvert_YGValueTests.m

@@ -0,0 +1,46 @@

+/**

+ * The examples provided by Facebook are for non-commercial testing and

+ * evaluation purposes only.

+ *

+ * Facebook reserves all rights not expressly granted.

+ *

+ * THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS

+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,

+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL

+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN

+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN

+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

+ */

+

+#import

+

+#import

+#import

+

+@interface RCTConvert_YGValueTests : XCTestCase

+

+@end

+

+@implementation RCTConvert_YGValueTests

+

+- (void)testUndefined

+{

+ YGValue value = [RCTConvert YGValue: nil];

+ XCTAssertEqual(value.unit, YGUnitUndefined);

+}

+

+- (void)testNumberPoints

+{

+ YGValue value = [RCTConvert YGValue:@100];

+ XCTAssertEqual(value.unit, YGUnitPixel);

+ XCTAssertEqual(value.value, 100);

+}

+

+- (void)testStringPercent

+{

+ YGValue value = [RCTConvert YGValue: @”100% “];

+ XCTAssertEqual(value.unit, YGUnitPercent);

+ XCTAssertEqual(value.value, 100);

+}

+

+@end

Show comments View

153 Libraries/StyleSheet/LayoutPropTypes.js

@@ -30,184 +30,256 @@ var LayoutPropTypes = {

/** `width` sets the width of this component.

*

* It works similarly to `width` in CSS, but in React Native you

– * must use logical pixel units, rather than percents, ems, or any of that.

+ * must use points or percentages. Ems and other units are not supported.

* See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details.

*/

– width: ReactPropTypes.number,

+ width: ReactPropTypes.oneOfType([

+ ReactPropTypes.number,

+ ReactPropTypes.string,

+ ]),

/** `height` sets the height of this component.

*

* It works similarly to `height` in CSS, but in React Native you

– * must use logical pixel units, rather than percents, ems, or any of that.

+ * must use points or percentages. Ems and other units are not supported.

* See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details.

*/

– height: ReactPropTypes.number,

+ height: ReactPropTypes.oneOfType([

+ ReactPropTypes.number,

+ ReactPropTypes.string,

+ ]),

/** `top` is the number of logical pixels to offset the top edge of

* this component.

*

– * It works similarly to `top` in CSS, but in React Native you must

– * use logical pixel units, rather than percents, ems, or any of that.

+ * It works similarly to `top` in CSS, but in React Native you

+ * must use points or percentages. Ems and other units are not supported.

*

* See https://developer.mozilla.org/en-US/docs/Web/CSS/top

* for more details of how `top` affects layout.

*/

– top: ReactPropTypes.number,

+ top: ReactPropTypes.oneOfType([

+ ReactPropTypes.number,

+ ReactPropTypes.string,

+ ]),

/** `left` is the number of logical pixels to offset the left edge of

* this component.

*

– * It works similarly to `left` in CSS, but in React Native you must

– * use logical pixel units, rather than percents, ems, or any of that.

+ * It works similarly to `left` in CSS, but in React Native you

+ * must use points or percentages. Ems and other units are not supported.

*

* See https://developer.mozilla.org/en-US/docs/Web/CSS/left

* for more details of how `left` affects layout.

*/

– left: ReactPropTypes.number,

+ left: ReactPropTypes.oneOfType([

+ ReactPropTypes.number,

+ ReactPropTypes.string,

+ ]),

/** `right` is the number of logical pixels to offset the right edge of

* this component.

*

– * It works similarly to `right` in CSS, but in React Native you must

– * use logical pixel units, rather than percents, ems, or any of that.

+ * It works similarly to `right` in CSS, but in React Native you

+ * must use points or percentages. Ems and other units are not supported.

*

* See https://developer.mozilla.org/en-US/docs/Web/CSS/right

* for more details of how `right` affects layout.

*/

– right: ReactPropTypes.number,

+ right: ReactPropTypes.oneOfType([

+ ReactPropTypes.number,

+ ReactPropTypes.string,

+ ]),

/** `bottom` is the number of logical pixels to offset the bottom edge of

* this component.

*

– * It works similarly to `bottom` in CSS, but in React Native you must

– * use logical pixel units, rather than percents, ems, or any of that.

+ * It works similarly to `bottom` in CSS, but in React Native you

+ * must use points or percentages. Ems and other units are not supported.

*

* See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom

* for more details of how `bottom` affects layout.

*/

– bottom: ReactPropTypes.number,

+ bottom: ReactPropTypes.oneOfType([

+ ReactPropTypes.number,

+ ReactPropTypes.string,

+ ]),

/** `minWidth` is the minimum width for this component, in logical pixels.

*

* It works similarly to `min-width` in CSS, but in React Native you

– * must use logical pixel units, rather than percents, ems, or any of that.

+ * must use points or percentages. Ems and other units are not supported.

*

* See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width

* for more details.

*/

– minWidth: ReactPropTypes.number,

+ minWidth: ReactPropTypes.oneOfType([

+ ReactPropTypes.number,

+ ReactPropTypes.string,

+ ]),

/** `maxWidth` is the maximum width for this component, in logical pixels.

*

* It works similarly to `max-width` in CSS, but in React Native you

– * must use logical pixel units, rather than percents, ems, or any of that.

+ * must use points or percentages. Ems and other units are not supported.

*

* See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width

* for more details.

*/

– maxWidth: ReactPropTypes.number,

+ maxWidth: ReactPropTypes.oneOfType([

+ ReactPropTypes.number,

+ ReactPropTypes.string,

+ ]),

/** `minHeight` is the minimum height for this component, in logical pixels.

*

* It works similarly to `min-height` in CSS, but in React Native you

– * must use logical pixel units, rather than percents, ems, or any of that.

+ * must use points or percentages. Ems and other units are not supported.

*

* See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height

* for more details.

*/

– minHeight: ReactPropTypes.number,

+ minHeight: ReactPropTypes.oneOfType([

+ ReactPropTypes.number,

+ ReactPropTypes.string,

+ ]),

/** `maxHeight` is the maximum height for this component, in logical pixels.

*

* It works similarly to `max-height` in CSS, but in React Native you

– * must use logical pixel units, rather than percents, ems, or any of that.

+ * must use points or percentages. Ems and other units are not supported.

*

* See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height

* for more details.

*/

– maxHeight: ReactPropTypes.number,

+ maxHeight: ReactPropTypes.oneOfType([

+ ReactPropTypes.number,

+ ReactPropTypes.string,

+ ]),

/** Setting `margin` has the same effect as setting each of

* `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`.

* See https://developer.mozilla.org/en-US/docs/Web/CSS/margin

* for more details.

*/

– margin: ReactPropTypes.number,

+ margin: ReactPropTypes.oneOfType([

+ ReactPropTypes.number,

+ ReactPropTypes.string,

+ ]),

/** Setting `marginVertical` has the same effect as setting both

* `marginTop` and `marginBottom`.

*/

– marginVertical: ReactPropTypes.number,

+ marginVertical: ReactPropTypes.oneOfType([

+ ReactPropTypes.number,

+ ReactPropTypes.string,

+ ]),

/** Setting `marginHorizontal` has the same effect as setting

* both `marginLeft` and `marginRight`.

*/

– marginHorizontal: ReactPropTypes.number,

+ marginHorizontal: ReactPropTypes.oneOfType([

+ ReactPropTypes.number,

+ ReactPropTypes.string,

+ ]),

/** `marginTop` works like `margin-top` in CSS.

* See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top

* for more details.

*/

– marginTop: ReactPropTypes.number,

+ marginTop: ReactPropTypes.oneOfType([

+ ReactPropTypes.number,

+ ReactPropTypes.string,

+ ]),

/** `marginBottom` works like `margin-bottom` in CSS.

* See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom

* for more details.

*/

– marginBottom: ReactPropTypes.number,

+ marginBottom: ReactPropTypes.oneOfType([

+ ReactPropTypes.number,

+ ReactPropTypes.string,

+ ]),

/** `marginLeft` works like `margin-left` in CSS.

* See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left

* for more details.

*/

– marginLeft: ReactPropTypes.number,

+ marginLeft: ReactPropTypes.oneOfType([

+ ReactPropTypes.number,

+ ReactPropTypes.string,

+ ]),

/** `marginRight` works like `margin-right` in CSS.

* See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right

* for more details.

*/

– marginRight: ReactPropTypes.number,

+ marginRight: ReactPropTypes.oneOfType([

+ ReactPropTypes.number,

+ ReactPropTypes.string,

+ ]),

/** Setting `padding` has the same effect as setting each of

* `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`.

* See https://developer.mozilla.org/en-US/docs/Web/CSS/padding

* for more details.

*/

– padding: ReactPropTypes.number,

+ padding: ReactPropTypes.oneOfType([

+ ReactPropTypes.number,

+ ReactPropTypes.string,

+ ]),

/** Setting `paddingVertical` is like setting both of

* `paddingTop` and `paddingBottom`.

*/

– paddingVertical: ReactPropTypes.number,

+ paddingVertical: ReactPropTypes.oneOfType([

+ ReactPropTypes.number,

+ ReactPropTypes.string,

+ ]),

/** Setting `paddingHorizontal` is like setting both of

* `paddingLeft` and `paddingRight`.

*/

– paddingHorizontal: ReactPropTypes.number,

+ paddingHorizontal: ReactPropTypes.oneOfType([

+ ReactPropTypes.number,

+ ReactPropTypes.string,

+ ]),

/** `paddingTop` works like `padding-top` in CSS.

* See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top

* for more details.

*/

– paddingTop: ReactPropTypes.number,

+ paddingTop: ReactPropTypes.oneOfType([

+ ReactPropTypes.number,

+ ReactPropTypes.string,

+ ]),

/** `paddingBottom` works like `padding-bottom` in CSS.

* See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom

* for more details.

*/

– paddingBottom: ReactPropTypes.number,

+ paddingBottom: ReactPropTypes.oneOfType([

+ ReactPropTypes.number,

+ ReactPropTypes.string,

+ ]),

/** `paddingLeft` works like `padding-left` in CSS.

* See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left

* for more details.

*/

– paddingLeft: ReactPropTypes.number,

+ paddingLeft: ReactPropTypes.oneOfType([

+ ReactPropTypes.number,

+ ReactPropTypes.string,

+ ]),

/** `paddingRight` works like `padding-right` in CSS.

* See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right

* for more details.

*/

– paddingRight: ReactPropTypes.number,

+ paddingRight: ReactPropTypes.oneOfType([

+ ReactPropTypes.number,

+ ReactPropTypes.string,

+ ]),

/** `borderWidth` works like `border-width` in CSS.

* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width

@@ -365,7 +437,10 @@ var LayoutPropTypes = {

flex: ReactPropTypes.number,

flexGrow: ReactPropTypes.number,

flexShrink: ReactPropTypes.number,

– flexBasis: ReactPropTypes.number,

+ flexBasis: ReactPropTypes.oneOfType([

+ ReactPropTypes.number,

+ ReactPropTypes.string,

+ ]),

/**

* Aspect ratio control the size of the undefined dimension of a node. Aspect ratio is a

Show comments View

4 React/Base/RCTConvert.h

@@ -10,13 +10,13 @@

#import

#import

-#import

#import

#import

#import

#import

#import

#import

+#import

/**

* This class provides a collection of conversion functions for mapping

@@ -90,6 +90,8 @@ typedef NSURL RCTFileURL;

+ (UIColor *)UIColor :(id)json;

+ (CGColorRef)CGColor :(id)json CF_RETURNS_NOT_RETAINED;

++ (YGValue)YGValue :(id)json;

+

+ (NSArray *)NSArrayArray :(id)json;

+ (NSArray *)NSStringArray :(id)json;

+ (NSArray *> *)NSStringArrayArray :(id)json;

Oops, something went wrong. Retry

0 comments on commit 3f49e74

Please sign in to comment.

Contact GitHub

API

Training

Shop

Blog

About

© 2017 GitHub, Inc.

Terms

Privacy

Security

Status

Help

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Add percentage support to react native · facebook/react-native@3f49e74 · GitHub