Fix: RefreshControl in FlatList makes borderWidth not working (#24411)
Summary: Fixes #22752 On line 1021 you are passing base style to props: `style: [baseStyle, this.props.style],` Explicitly passing base style to ScrollView just overrides this line and doesn't let developers to customise style of any inheritors of ScrollView (not only FlatList) with custom RefreshControl. So this line (1113) seems to be removed. ## Changelog [GENERAL] [Fixed] - fix of Android's bug that doesn't let override ScrollView's Style with custom RefreshControl. Pull Request resolved: https://github.com/facebook/react-native/pull/24411 Differential Revision: D15713061 Pulled By: cpojer fbshipit-source-id: 461259800f867af15e53e0743a5057ea4528ae69
This commit is contained in:
Родитель
348c3ebefa
Коммит
d9a8ac5071
|
@ -25,6 +25,7 @@ const invariant = require('invariant');
|
||||||
const processDecelerationRate = require('./processDecelerationRate');
|
const processDecelerationRate = require('./processDecelerationRate');
|
||||||
const requireNativeComponent = require('../../ReactNative/requireNativeComponent');
|
const requireNativeComponent = require('../../ReactNative/requireNativeComponent');
|
||||||
const resolveAssetSource = require('../../Image/resolveAssetSource');
|
const resolveAssetSource = require('../../Image/resolveAssetSource');
|
||||||
|
const splitLayoutProps = require('../../StyleSheet/splitLayoutProps');
|
||||||
|
|
||||||
import type {
|
import type {
|
||||||
PressEvent,
|
PressEvent,
|
||||||
|
@ -1125,15 +1126,15 @@ class ScrollView extends React.Component<Props, State> {
|
||||||
// On Android wrap the ScrollView with a AndroidSwipeRefreshLayout.
|
// On Android wrap the ScrollView with a AndroidSwipeRefreshLayout.
|
||||||
// Since the ScrollView is wrapped add the style props to the
|
// Since the ScrollView is wrapped add the style props to the
|
||||||
// AndroidSwipeRefreshLayout and use flex: 1 for the ScrollView.
|
// AndroidSwipeRefreshLayout and use flex: 1 for the ScrollView.
|
||||||
// Note: we should only apply props.style on the wrapper
|
// Note: we should split props.style on the inner and outer props
|
||||||
// however, the ScrollView still needs the baseStyle to be scrollable
|
// however, the ScrollView still needs the baseStyle to be scrollable
|
||||||
|
const {outer, inner} = splitLayoutProps(flattenStyle(props.style));
|
||||||
return React.cloneElement(
|
return React.cloneElement(
|
||||||
refreshControl,
|
refreshControl,
|
||||||
{style: props.style},
|
{style: [baseStyle, outer]},
|
||||||
<ScrollViewClass
|
<ScrollViewClass
|
||||||
{...props}
|
{...props}
|
||||||
style={baseStyle}
|
style={[baseStyle, inner]}
|
||||||
// $FlowFixMe
|
// $FlowFixMe
|
||||||
ref={this._setScrollViewRef}>
|
ref={this._setScrollViewRef}>
|
||||||
{contentContainer}
|
{contentContainer}
|
||||||
|
|
|
@ -0,0 +1,44 @@
|
||||||
|
/**
|
||||||
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||||
|
*
|
||||||
|
* This source code is licensed under the MIT license found in the
|
||||||
|
* LICENSE file in the root directory of this source tree.
|
||||||
|
*
|
||||||
|
* @format
|
||||||
|
* @emails oncall+react_native
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const splitLayoutProps = require('../splitLayoutProps');
|
||||||
|
|
||||||
|
test('splits style objects', () => {
|
||||||
|
const style = {width: 10, margin: 20, padding: 30};
|
||||||
|
const {outer, inner} = splitLayoutProps(style);
|
||||||
|
expect(outer).toMatchInlineSnapshot(`
|
||||||
|
Object {
|
||||||
|
"margin": 20,
|
||||||
|
"width": 10,
|
||||||
|
}
|
||||||
|
`);
|
||||||
|
expect(inner).toMatchInlineSnapshot(`
|
||||||
|
Object {
|
||||||
|
"padding": 30,
|
||||||
|
}
|
||||||
|
`);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('does not copy values to both returned objects', () => {
|
||||||
|
const style = {marginVertical: 5, paddingHorizontal: 10};
|
||||||
|
const {outer, inner} = splitLayoutProps(style);
|
||||||
|
expect(outer).toMatchInlineSnapshot(`
|
||||||
|
Object {
|
||||||
|
"marginVertical": 5,
|
||||||
|
}
|
||||||
|
`);
|
||||||
|
expect(inner).toMatchInlineSnapshot(`
|
||||||
|
Object {
|
||||||
|
"paddingHorizontal": 10,
|
||||||
|
}
|
||||||
|
`);
|
||||||
|
});
|
|
@ -0,0 +1,62 @@
|
||||||
|
/**
|
||||||
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||||
|
*
|
||||||
|
* This source code is licensed under the MIT license found in the
|
||||||
|
* LICENSE file in the root directory of this source tree.
|
||||||
|
*
|
||||||
|
* @format
|
||||||
|
* @flow strict-local
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
import type {DangerouslyImpreciseStyle} from './StyleSheet';
|
||||||
|
|
||||||
|
const OUTER_PROPS = Object.assign(Object.create(null), {
|
||||||
|
margin: true,
|
||||||
|
marginHorizontal: true,
|
||||||
|
marginVertical: true,
|
||||||
|
marginBottom: true,
|
||||||
|
marginTop: true,
|
||||||
|
marginLeft: true,
|
||||||
|
marginRight: true,
|
||||||
|
flex: true,
|
||||||
|
flexGrow: true,
|
||||||
|
flexShrink: true,
|
||||||
|
flexBasis: true,
|
||||||
|
alignSelf: true,
|
||||||
|
height: true,
|
||||||
|
minHeight: true,
|
||||||
|
maxHeight: true,
|
||||||
|
width: true,
|
||||||
|
minWidth: true,
|
||||||
|
maxWidth: true,
|
||||||
|
position: true,
|
||||||
|
left: true,
|
||||||
|
right: true,
|
||||||
|
bottom: true,
|
||||||
|
top: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
function splitLayoutProps(
|
||||||
|
props: ?DangerouslyImpreciseStyle,
|
||||||
|
): {
|
||||||
|
outer: DangerouslyImpreciseStyle,
|
||||||
|
inner: DangerouslyImpreciseStyle,
|
||||||
|
} {
|
||||||
|
const inner = {};
|
||||||
|
const outer = {};
|
||||||
|
if (props) {
|
||||||
|
Object.keys(props).forEach(k => {
|
||||||
|
const value: $ElementType<DangerouslyImpreciseStyle, typeof k> = props[k];
|
||||||
|
if (OUTER_PROPS[k]) {
|
||||||
|
outer[k] = value;
|
||||||
|
} else {
|
||||||
|
inner[k] = value;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return {outer, inner};
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = splitLayoutProps;
|
Загрузка…
Ссылка в новой задаче