Skip to content

Commit

Permalink
Update css-layout dependency
Browse files Browse the repository at this point in the history
A second attempt at updating the css-layout dependency. This commit
includes the changes from these 2 commits:
  - 104aa49: Update css-layout dependency
  - 4501096: Clean up warnings due to project.json

It also includes a fix for microsoft#561 (horizontal scrolling broken) which was
introduced by the previous attempt at upgrading the layout engine.
Facebook already found and fixed this bug in their repo so I imported
their fix: facebook/react-native@6603cef

The updated version of css-layout includes significant
changes which make the layout engine conform closer to
the W3C spec. For details, see facebook/yoga#185

The inline view implementation had to be modified slightly
due to a change in the layout engine. In the updated layout
engine, nodes with a measure function are treated as leaves.
Consequently, nodes with a mesaure function (e.g. Text) do
not have their children laid out automatically.

To fix this, Text nodes now manually invoke the layout engine
on each of their inline views.
  • Loading branch information
Adam Comella committed Aug 6, 2016
1 parent 2051d67 commit ce98cd1
Show file tree
Hide file tree
Showing 6 changed files with 48 additions and 7 deletions.
13 changes: 9 additions & 4 deletions Libraries/Components/ScrollView/ScrollView.windows.js
Original file line number Diff line number Diff line change
Expand Up @@ -485,12 +485,14 @@ const ScrollView = React.createClass({
this.props.alwaysBounceVertical !== undefined ?
this.props.alwaysBounceVertical :
!this.props.horizontal;

const baseStyle = this.props.horizontal ? styles.baseHorizontal : styles.baseVertical;

const props = {
...this.props,
alwaysBounceHorizontal,
alwaysBounceVertical,
style: ([styles.base, this.props.style]: ?Array<any>),
style: ([baseStyle, this.props.style]: ?Array<any>),
onTouchStart: this.scrollResponderHandleTouchStart,
onTouchMove: this.scrollResponderHandleTouchMove,
onTouchEnd: this.scrollResponderHandleTouchEnd,
Expand Down Expand Up @@ -557,7 +559,7 @@ const ScrollView = React.createClass({
return React.cloneElement(
refreshControl,
{style: props.style},
<ScrollViewClass {...props} style={styles.base} ref={this._setScrollViewRef}>
<ScrollViewClass {...props} style={baseStyle} ref={this._setScrollViewRef}>
{contentContainer}
</ScrollViewClass>
);
Expand All @@ -572,11 +574,14 @@ const ScrollView = React.createClass({
});

const styles = StyleSheet.create({
base: {
baseVertical: {
flex: 1,
},
baseHorizontal: {
flex: 1,
flexDirection: 'row',
},
contentContainerHorizontal: {
alignSelf: 'flex-start',
flexDirection: 'row',
},
});
Expand Down
2 changes: 1 addition & 1 deletion ReactWindows/Playground/project.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"dependencies": {
"Facebook.CSSLayout": "2.0.0-pre",
"Facebook.CSSLayout": "2.0.1-pre",
"Microsoft.ApplicationInsights": "1.0.0",
"Microsoft.ApplicationInsights.PersistenceChannel": "1.0.0",
"Microsoft.ApplicationInsights.WindowsApps": "1.0.0",
Expand Down
2 changes: 1 addition & 1 deletion ReactWindows/ReactNative.Tests/project.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"dependencies": {
"Facebook.CSSLayout": "2.0.0-pre",
"Facebook.CSSLayout": "2.0.1-pre",
"Microsoft.NETCore.UniversalWindowsPlatform": "5.2.2"
},
"frameworks": {
Expand Down
18 changes: 18 additions & 0 deletions ReactWindows/ReactNative/Views/Text/ReactSpanShadowNode.cs
Original file line number Diff line number Diff line change
Expand Up @@ -127,5 +127,23 @@ public override void UpdateInline(Inline inline)
inline.FontWeight = _fontWeight ?? FontWeights.Normal;
inline.FontFamily = _fontFamily != null ? new FontFamily(_fontFamily) : FontFamily.XamlAutoFontFamily;
}

/// <summary>
/// This method will be called by <see cref="UIManagerModule"/> once
/// per batch, before calculating layout. This will only be called for
/// nodes that are marked as updated with <see cref="ReactShadowNode.MarkUpdated"/> or
/// require layout (i.e., marked with <see cref="ReactShadowNode.dirty"/> ).
/// </summary>
public override void OnBeforeLayout()
{
// Run flexbox on the children which are inline views.
foreach (var child in this.Children)
{
if (!(child is ReactInlineShadowNode))
{
child.CalculateLayout();
}
}
}
}
}
18 changes: 18 additions & 0 deletions ReactWindows/ReactNative/Views/Text/ReactTextShadowNode.cs
Original file line number Diff line number Diff line change
Expand Up @@ -267,5 +267,23 @@ private void UpdateTextBlockCore(RichTextBlock textBlock, bool measureOnly)
0);
}
}

/// <summary>
/// This method will be called by <see cref="UIManagerModule"/> once
/// per batch, before calculating layout. This will only be called for
/// nodes that are marked as updated with <see cref="MarkUpdated"/> or
/// require layout (i.e., marked with <see cref="ReactShadowNode.dirty"/>).
/// </summary>
public override void OnBeforeLayout()
{
// Run flexbox on the children which are inline views.
foreach (var child in this.Children)
{
if (!(child is ReactInlineShadowNode))
{
child.CalculateLayout();
}
}
}
}
}
2 changes: 1 addition & 1 deletion ReactWindows/ReactNative/project.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"dependencies": {
"Facebook.CSSLayout": "2.0.0-pre",
"Facebook.CSSLayout": "2.0.1-pre",
"Microsoft.NETCore.UniversalWindowsPlatform": "5.2.2",
"Newtonsoft.Json": "9.0.1",
"System.Reactive": "3.0.0",
Expand Down

0 comments on commit ce98cd1

Please sign in to comment.