Commit Graph

95 Commits

Author SHA1 Message Date
Janic Duplessis 1658f36630 Improve z-index implementation on iOS
Summary:
This avoids reordering views because it created some bugs when the native hierarchy is different from the shadow views. This leverages `layer.zPosition` and takes z-index in consideration when we check what view should be the target of a touch.

**Test plan**
Tested that this fixes some layout issues that occurred when using sticky headers in the Expo home screen.
Closes https://github.com/facebook/react-native/pull/14011

Differential Revision: D5108437

Pulled By: shergin

fbshipit-source-id: 0abfe85666e9d236a190e6f54cdd5453cacfbcac
2017-05-28 21:45:32 -07:00
Valentin Shergin 5058e7eb05 Several layout related helper methods of RCTShadowView was moved to new (+Layout) category.
Reviewed By: javache

Differential Revision: D4865327

fbshipit-source-id: 4df71b57433370ee09c3f1288c4d6241a33f440a
2017-05-08 11:31:20 -07:00
Valentin Shergin 18fd18e792 Assertion on attempt to get layout metrics from dirtied Yoga node
Reviewed By: javache

Differential Revision: D4865294

fbshipit-source-id: e1bd2f297af87ffa817003f9e4dae94ad2c96644
2017-05-01 12:16:42 -07:00
Lukas Wöhrl 992e37c8bc Fix sizing of non strech items
Summary:
Fixes the sizing of items so that under most scenarios it calcultes its height by it's content for non exact measurings. This introduces a new useLegacyStretchBehaviour flag on the config to opt out of this change as it is breaking.

See facebook/yoga#505
Closes https://github.com/facebook/yoga/pull/506

Reviewed By: astreet

Differential Revision: D4954016

Pulled By: emilsjolander

fbshipit-source-id: d28bd5d174cd76951fb94df85e3b0cfab7f81ff7
2017-04-28 06:18:30 -07:00
Valentin Shergin ca07a5fd5f Adopting Yoga's YGConfig in RCTShadowView
Reviewed By: javache

Differential Revision: D4932540

fbshipit-source-id: 4a5ff3b34fc635b3291dff9a7c1a603179c90fa7
2017-04-27 13:05:55 -07:00
Pieter De Baets 41f3d0cf2d Expose getter for 'flex' property
Summary: Helps mitigate part of https://github.com/facebook/react-native/pull/12245 while we wait for a more comprehensive solution.

Reviewed By: emilsjolander

Differential Revision: D4571776

fbshipit-source-id: 185cd1b0d3af37724136a37471df412c2000dfe4
2017-03-13 06:00:19 -07:00
Emil Sjolander 4d69f4b2d1 Add display:none support to react native
Summary:
This diff adds display:none support to React Native. This enables hiding components which still calling their render method and keeping them within the state of your application. This enables preserving state in a component even though the component is not visible. Previously this was often implemented by rendering a component off screen as a work around. See below playground for usage.

```
class Playground extends React.Component {
  render() {
    return (
      <View style={{width: '100%', height: '100%', flexDirection: 'row', backgroundColor: 'white'}}>
        <View style={{width: 100, height: 100, display: 'none', backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, backgroundColor: 'blue'}}/>
      </View>
    );
  }
}
```

Reviewed By: astreet

Differential Revision: D4611771

fbshipit-source-id: 0dbe0494d989df42994ab9ad5125d47f3233cc5a
2017-03-01 09:16:05 -08:00
Emil Sjolander 31f848a5fa Expose alignContent to react native
Summary:
This diff adds alignContent (https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) support to React Native. This enables aligning the lines of multi-line content. See below playground for example usage.

```
class Playground extends React.Component {
  render() {
    return (
      <View style={{width: '100%', height: '100%', flexDirection: 'row', backgroundColor: 'white', flexWrap: 'wrap', alignContent: 'space-between'}}>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
      </View>
    );
  }
}
```

Reviewed By: astreet

Differential Revision: D4611803

fbshipit-source-id: ae7f6b4b7e9f4bc78d2502da948214294aad4dd2
2017-03-01 09:16:05 -08:00
Emil Sjolander cc275557be Add margin auto support to react native
Summary:
This diff adds margin:auto (https://drafts.csswg.org/css-flexbox-1/#auto-margins) support to React Native. This enables layout not previously supported without inserting empty 'spacer' views. See below Playground for usage.

```
class Playground extends React.Component {
  render() {
    return (
      <View style={{width: '100%', height: '100%', flexDirection: 'row', backgroundColor: 'white'}}>
        <View style={{width: 100, height: 100, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 'auto', backgroundColor: 'blue'}}/>
      </View>
    );
  }
}
```

Reviewed By: astreet

Differential Revision: D4611753

fbshipit-source-id: e78335565c193f7fb263129a638b444715ba5ab0
2017-03-01 09:16:05 -08:00
Emil Sjolander 702564fb60 Pass the parent size to YGNodeCalculateLayout instead of the node size
Reviewed By: astreet

Differential Revision: D4611417

fbshipit-source-id: 2fb0eedffa17f0ec89b601722a1717a72e216b9e
2017-02-28 08:14:51 -08:00
Valentin Shergin e361ce8673 `RCTShadowViews`'s `cssNode` property was renamed to `yogaNode`
Reviewed By: javache

Differential Revision: D4590104

fbshipit-source-id: 7767aaa62bcbdce2746c3a26543052dd46be63e0
2017-02-21 08:45:05 -08:00
Emil Sjolander 1b5eb36e2f Fix up some small issues with YGUnitAuto
Reviewed By: wwjholmes

Differential Revision: D4567045

fbshipit-source-id: ace5fd89bd534a6bb5ec7dba0c3afbf13d62d7c9
2017-02-16 06:59:33 -08:00
David Hart 67f6b32409 Rename YGUnitPixel to YGPoint...
Summary:
...to reflect the modern world we live in with dynamic DPI platforms :)
Closes https://github.com/facebook/yoga/pull/375

Reviewed By: dshahidehpour

Differential Revision: D4528518

Pulled By: emilsjolander

fbshipit-source-id: e422bd4ae148e02c598a7b484a6adfa8c0e1e0c9
2017-02-14 14:31:31 -08:00
Lukas Wöhrl dbaa687518 Feature auto margin
Summary:
Even so I know there are some opinions against ```margin: 0 auto``` it's still part of the spec: https://www.w3.org/TR/css-flexbox-1/#auto-margins and pretty usefull if you have to position via ```justify-content```.

This PR adds an implementation for that.

It adds an additonal ```YGUnitAuto``` and margins got ```YGNodeStyleSetMarginAuto``` functions as well.
Closes https://github.com/facebook/yoga/pull/357

Reviewed By: astreet

Differential Revision: D4501142

Pulled By: emilsjolander

fbshipit-source-id: 86519f8632496f46e78a7c9dbc5b21e212e3e0c7
2017-02-14 14:31:31 -08:00
Valentin Shergin 7686274e13 Removed RTL workaround in RCTShadowText
Reviewed By: fkgozali

Differential Revision: D4511274

fbshipit-source-id: f658afb4e1c943cc9ecab2dd2a91f251edd3fa36
2017-02-13 12:00:57 -08:00
Valentin Shergin ec673d0771 Added support of `direction` style property
Summary: Now layout direction (LTR or LTR) can be specified not only for whole app but also for view subtree via `direction` style property.

Reviewed By: mmmulani

Differential Revision: D4510206

fbshipit-source-id: 4e56c5886b6e42f2343165eb76be897e681c5ba4
2017-02-06 21:00:16 -08:00
Valentin Shergin 91910d87de Better RTL support especially for ScrollView's
Reviewed By: fkgozali

Differential Revision: D4478913

fbshipit-source-id: 525c17fa109ad3c35161b10940776f1426ba2535
2017-02-02 09:58:30 -08:00
Valentin Shergin f33f84e75f Deprecating/removing `setFrame`, `setLeftTop`, and co.
Summary:
Motivation:
 * `RCTShadowView`'s `frame` property actually represents computed layout of the view. We must not use it as a setter for yoga node styles;
 * Using `frame` and `setLeftTop` in existing way actually works only for view with absolute positioning, so it is super rare and special case;
 * Internally, setting `frame` only make sense to `RootView`, and in that case there we always must not change `origin` we are introducing `setSize` method.

Changes:
 * `[-RCTShadowView setFrame:]` was removed, `frame` property is readonly now;
 * `[-RCTShadowView setLeftTop:]` was removed; no replacement provided;
 * `[-RCTShadowView size]` read-write property was added;
 * `[-RCTUIManager setFrame:forView:]` was deprecated, use (just introduced) `setSize:forView:` instead;
 * `[-RCTUIManager setSize:forView:]` was added.

If you are still need some of removed methods, you are probably doing something wrong. Consider using `setIntrinsicContentSize`-family methods,
`setSize`-family methods, or (in the worst case) accessing `yogaNode` directly.

Reviewed By: javache

Differential Revision: D4491384

fbshipit-source-id: 56dd84567324c5a86e4c870a41c38322dc1224d2
2017-02-01 13:13:27 -08:00
Valentin Shergin d1990f8fc4 Better (right) implementation of `intrinsicContentSize`
Reviewed By: emilsjolander

Differential Revision: D4486767

fbshipit-source-id: d37ea11f9f48425d4d99c29e8bfb6c8ed2353f04
2017-01-31 16:58:32 -08:00
Emil Sjolander 3f49e743be 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 (
      <View style={{backgroundColor: 'white', padding: 10, paddingTop: 30, height: '100%'}}>
        <Text>
          If you want to quickly test out something,
          open the Playground.js file and start coding.
        </Text>
        <View style={{backgroundColor: 'red', height: 50, width: 50}}/>
        <View style={{backgroundColor: 'blue', height: '50%', width: '50%'}}/>
      </View>
    );
  }
}
```

Reviewed By: astreet

Differential Revision: D4376549

fbshipit-source-id: c41d68a7555396f95d063a7527ee081773ac56dc
2017-01-11 03:58:37 -08:00
Emil Sjolander 5d6ce0e4ae Rely on yoga to enforces precedence rules
Reviewed By: javache

Differential Revision: D4376526

fbshipit-source-id: b37e541f74674ce0c918cc4993943a972bc4dc87
2017-01-06 06:43:45 -08:00
Emil Sjolander 828addcf55 Use layout padding instead of style padding
Reviewed By: javache

Differential Revision: D4377071

fbshipit-source-id: c4a534a07f335c39ec50214e33a41aeff0389bf1
2017-01-06 06:43:45 -08:00
Lukas Woehrl 16359ec8ee Add feature to use percentage as value unit
Summary:
Adds the feature to use percentage as a value unit.

You can use the function ```YGPx(float)``` and ```YGPercent(float)``` for convenience.

I did some benchmarks:

```
Without Percentage Feature - Release x86:

Stack with flex: median: 0.000000 ms, stddev: 0.146683 ms
Align stretch in undefined axis: median: 0.000000 ms, stddev: 0.136525 ms
Nested flex: median: 0.000000 ms, stddev: 0.490101 ms
Huge nested layout: median: 23.000000 ms, stddev: 0.928291 ms

Stack with flex: median: 0.000000 ms, stddev: 0.170587 ms
Align stretch in undefined axis: median: 0.000000 ms, stddev: 0.143384 ms
Nested flex: median: 0.000000 ms, stddev: 0.477791 ms
Huge nested layout: median: 22.000000 ms, stddev: 2.129779 ms

With Percentage Feature - Release x86:

Stack with flex: median: 0.000000 ms, stddev: 0.132951 ms
Align stretch in undefined axis: median: 0.000000 ms, stddev: 0.136525 ms
Nested flex: median: 0.000000 ms, stddev: 0.489570 ms
Huge nested layout: median: 21.000000 ms, stddev: 1.390476 ms
Closes https://github.com/facebook/yoga/pull/258

Reviewed By: dshahidehpour

Differential Revision: D4361945

Pulled By: emilsjolander

fbshipit-source-id: a8f5bc63ad352eb9410d792729e56664468cd76a
2017-01-02 05:28:30 -08:00
David Hart c1aff605ed Transform the Count enum values into private constants
Summary:
Hides implementation details for the C, Objective-C and Swift APIs.
Closes https://github.com/facebook/yoga/pull/292

Differential Revision: D4351523

Pulled By: emilsjolander

fbshipit-source-id: 18a1149d169f0d52bd078714295000b5d07434dd
2016-12-22 02:58:59 -08:00
Emil Sjolander 45fdcdc93a YGNodeChildCount -> YGNodeGetChildCount for consistency
Reviewed By: gkassabli

Differential Revision: D4333480

fbshipit-source-id: 17058f18fa9e26b3e02f7a1651f7295cae59acad
2016-12-16 04:44:18 -08:00
Emil Sjolander 85ac5fc354 Rename C api
Differential Revision: D4259190

fbshipit-source-id: 26c8b356ca464d4304f5f9dc4192bff10cea2dc9
2016-12-03 04:44:10 -08:00
Emil Sjolander 779508c0ba Rename enums
Differential Revision: D4244360

fbshipit-source-id: c9fcbdd231098c9ff230a6055676bbc7cbd11001
2016-12-02 05:58:45 -08:00
Pieter De Baets e1577df1fd Move all header imports to "<React/..>"
Summary:
To make React Native play nicely with our internal build infrastructure we need to properly namespace all of our header includes.

Where previously you could do `#import "RCTBridge.h"`, you must now write this as `#import <React/RCTBridge.h>`. If your xcode project still has a custom header include path, both variants will likely continue to work, but for new projects, we're defaulting the header include path to `$(BUILT_PRODUCTS_DIR)/usr/local/include`, where the React and CSSLayout targets will copy a subset of headers too. To make Xcode copy headers phase work properly, you may need to add React as an explicit dependency to your app's scheme and disable "parallelize build".

Reviewed By: mmmulani

Differential Revision: D4213120

fbshipit-source-id: 84a32a4b250c27699e6795f43584f13d594a9a82
2016-11-23 07:58:39 -08:00
Emil Sjolander 5850165795 Add support for aspectRatio style prop
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
2016-11-23 07:43:28 -08:00
Emil Sjolander ffcdf25281 Autogenerate enum defenitions for all languages
Reviewed By: gkassabli

Differential Revision: D4174263

fbshipit-source-id: 478961a8f683e196704d3c6ea1505a05c85fcb10
2016-11-15 08:44:30 -08:00
Emil Sjolander a2cafb062e rename CSSWrapType to shorter CSSWrap matching java and csharp
Reviewed By: gkassabli

Differential Revision: D4174257

fbshipit-source-id: ba0bfab996ba158b07863d8c72cf2a41262c9592
2016-11-14 03:28:38 -08:00
Emil Sjolander 454c33884a Revert D4133643: [react-native] Fix incorrect pixel-rounding in RCTShadowView.
Differential Revision: D4133643

fbshipit-source-id: bb17e0c84ba9d85c5d03129c602d1d432ee0aa56
2016-11-10 15:13:43 -08:00
Dustin Shahidehpour 4d35f65eb7 Fix incorrect pixel-rounding in RCTShadowView.
Reviewed By: emilsjolander

Differential Revision: D4133643

fbshipit-source-id: 28a4408ba8da797138b9e100fa1555ddb0856ceb
2016-11-07 15:58:43 -08:00
Mehdi Mulani a96b4ab5a0 Warn when height/width is set in style without correct flex
Reviewed By: emilsjolander, yungsters

Differential Revision: D4095399

fbshipit-source-id: 6246e47a39ebbc60835bc1ce5e9fb78c6630a851
2016-10-28 12:13:37 -07:00
Emil Sjolander 8e69a9f695 BREAKING - Make first parameter of measure and print functions CSSNodeRef instead of just context
Reviewed By: javache

Differential Revision: D4081544

fbshipit-source-id: d49679025cea027cf7b8482898de0a01fe0f9d40
2016-10-27 10:58:42 -07:00
Pieter De Baets 82911a8204 s/CGFloat/float in RCTShadowView
Reviewed By: emilsjolander

Differential Revision: D4081788

fbshipit-source-id: 91da6af0fff1317ff4661572e8e7c1cc5594f810
2016-10-26 13:13:47 -07:00
Pieter De Baets 4ea359a4f3 Remove getter for RCTShadowView flex
Reviewed By: emilsjolander

Differential Revision: D4081779

fbshipit-source-id: 4e2a1780738423396111c7cfde2fe12010ad0e93
2016-10-26 13:13:47 -07:00
Emil Sjolander ea6458b63e Remove flex shorthand getter because it doesnt make a lot of sense
Reviewed By: gkassabli

Differential Revision: D4064674

fbshipit-source-id: 69935b85042020b4e8c61a393c1be8f4d42a6674
2016-10-24 03:44:22 -07:00
Emil Sjolander 899adf5343 Expose flexGrow, flexShrink, and flexBasis properties
Reviewed By: javache, astreet

Differential Revision: D3785140

fbshipit-source-id: a735602c53da72e3bce69ba30936c4ed25d76b88
2016-08-30 03:13:39 -07:00
Adam Comella 4178d21e96 Expose overflow prop to layout engine
Summary:
The overflow prop needs to be set on the shadow view so that it can make its way into the layout engine. In some situations, the value of the overflow prop affects the calculations of the layout engine.

**Test plan (required)**

Verified in a test app that the `overflow` prop makes its way into the layout engine. Also, my team's app is currently using this change.

Adam Comella
Microsoft Corp.
Closes https://github.com/facebook/react-native/pull/9659

Differential Revision: D3790552

fbshipit-source-id: 61513ece63ae214f48c6cb6f40fb29757a0ac706
2016-08-30 00:59:00 -07:00
Emil Sjolander f7a22bc33c Use single function for margin, position, padding, and border
Reviewed By: lucasr

Differential Revision: D3715201

fbshipit-source-id: ea81ed426f0f7853bb542355c01fc16ae4360238
2016-08-15 09:28:41 -07:00
Pieter De Baets 6775d1f136 Set property ivar for shadow view frame
Reviewed By: emilsjolander

Differential Revision: D3683649

fbshipit-source-id: d818cb0eea064baca99be2bc6edf1b61b90bb64b
2016-08-10 10:58:49 -07:00
Pieter De Baets 335132ad63 Fix some analyzer warnings
Reviewed By: majak

Differential Revision: D3683672

fbshipit-source-id: 879578b050186bc779d01a17822d41bf7e473123
2016-08-09 03:58:36 -07:00
James Ide f8f7a1540d Prefix isUndefined with "CSS"
Summary:
Consistently namespace all of css-layout's public C API with "CSS". The only function that needed to be renamed was isUndefined, which I renamed to CSSValueIsUndefined.

Fixes #210.
Closes https://github.com/facebook/css-layout/pull/211

Reviewed By: lucasr

Differential Revision: D3674922

Pulled By: emilsjolander

fbshipit-source-id: 1752f477bde45586db112fe2654d0404cc52e1d1
2016-08-05 06:28:38 -07:00
alvaromb e52cab5a7f Adds the ability to use UIManager to check if a node is an ancestor
Summary:
Sometimes is handy to check if a React node is a descendant of another node or not. For instance, I want to check if the focused `TextInput` is descendant of an specific `ScrollView`:

```js
const currentlyFocusedField = TextInput.State.currentlyFocusedField()
UIManager.viewIsAncestorOf(
  currentlyFocusedField,
  this.getInnerViewNode(),
  (isAncestor) => {
    if (isAncestor) {
      console.log('The focused field is a descendant of this ScrollView!')
    }
  }
)
```

This function uses the same strategy as the `measureLayout` method to check if one node is an ancestor of other node. As the `measureLayout` method, this is performed outside the main thread.

By now I've only implemented the iOS version and its tests, but if this function is going to be merged I'll implement the Android version too. I have objc experience but no Java or Android, so I prefer to validate this functionality before jumping into developing the Android part.
Closes https://github.com/facebook/react-native/pull/7876

Differential Revision: D3662045

Pulled By: javache

fbshipit-source-id: b9668e8ea94fd01db76651f16243926cf9c2566f
2016-08-03 04:13:43 -07:00
Emil Sjolander 42fc2e80db shouldUpdate -> hasNewLayout
Reviewed By: majak

Differential Revision: D3613695

fbshipit-source-id: 4e16e8d4de90660a09d6e1d3a43c6c5e89349993
2016-08-01 05:28:28 -07:00
Mengjue Wang 66514869aa Provide RTL support for RCTShadowView
Summary:
The make current RCTShadowView support RTL layout.
Two changes I made:
1 Change all left/right to start/end for margin, padding, boarder and position
2 Change the paddingAsInsets to support RTL

Reviewed By: majak

Differential Revision: D3548002

fbshipit-source-id: 15cc5228d2d28d0e12a7147daf57967e5b87ee63
2016-07-28 17:28:32 -07:00
Emil Sjolander 471eefcb74 Move dirty layout into css-layout
Reviewed By: majak

Differential Revision: D3610634

fbshipit-source-id: 1dc9017c0a34ced231b5bebe334591f3d0b89bf3
2016-07-25 03:58:41 -07:00
Wenjing Wang 15dfa5b224 Reverted commit D3598946
Reviewed By: majak

Differential Revision: D3598946

fbshipit-source-id: fb70f5b031a85f30a6207eb95b7fd0ccd7d78039
2016-07-23 01:28:31 -07:00
Emil Sjolander 55638f804d Move dirty layout into css-layout
Reviewed By: majak

Differential Revision: D3598946

fbshipit-source-id: fdbbbf3b9bd262e0b14b5b9a40171a1c039695a7
2016-07-22 11:43:21 -07:00