[fix] ScrollView forwards style when 'refreshControl' prop is present

Fix #2024
This commit is contained in:
aryo
2021-05-17 12:28:13 +12:00
committed by Nicolas Gallagher
parent a968c0ce66
commit a7fabe4500
3 changed files with 51 additions and 11 deletions
@@ -0,0 +1,27 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/ScrollView prop "refreshControl" with 1`] = `
<div
id="refresh-control"
>
<div
class="css-view-1dbjc4n r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-1sncvnh"
style="background-color: rgb(255, 0, 0);"
>
<div
class="css-view-1dbjc4n"
/>
</div>
</div>
`;
exports[`components/ScrollView prop "refreshControl" without 1`] = `
<div
class="css-view-1dbjc4n r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-1sncvnh"
style="background-color: rgb(255, 0, 0);"
>
<div
class="css-view-1dbjc4n"
/>
</div>
`;
@@ -86,4 +86,21 @@ describe('components/ScrollView', () => {
expect(typeof node.scrollResponderScrollNativeHandleToKeyboard === 'function').toBe(true);
});
});
describe('prop "refreshControl"', () => {
test('without', () => {
const { container } = render(<ScrollView style={{ backgroundColor: 'red' }} />);
expect(container.firstChild).toMatchSnapshot();
});
test('with', () => {
const { container } = render(
<ScrollView
refreshControl={<div id="refresh-control" />}
style={{ backgroundColor: 'red' }}
/>
);
expect(container.firstChild).toMatchSnapshot();
});
});
});
+7 -11
View File
@@ -223,21 +223,17 @@ const ScrollView = ((createReactClass({
invariant(ScrollViewClass !== undefined, 'ScrollViewClass must not be undefined');
if (refreshControl) {
return React.cloneElement(
refreshControl,
{ style: props.style },
<ScrollViewClass {...props} ref={this._setScrollNodeRef} style={baseStyle}>
{contentContainer}
</ScrollViewClass>
);
}
return (
const scrollView = (
<ScrollViewClass {...props} ref={this._setScrollNodeRef}>
{contentContainer}
</ScrollViewClass>
);
if (refreshControl) {
return React.cloneElement(refreshControl, { style: props.style }, scrollView);
}
return scrollView;
},
_handleContentOnLayout(e: Object) {