mirror of
https://github.com/status-im/react-native.git
synced 2025-01-10 09:35:48 +00:00
b0b9a56ef8
Summary: public
This has been broken for a while. The styles in the JS were being set on the container instead of the activity view itself.
Also, due to the way frames were set directly on layer properties instead of the view, resizing didn't work properly because the UIImageView inside the UIActivityView was not being realligned when the bounds changed. This also caused problems for other controls such as maps, where it was fixed with a method override, but the simpler solution is just to set the view center and bounds directly.
Before: {F23631143}
After: {F23631144}
Reviewed By: javache, tadeuzagallo
Differential Revision: D2575156
fb-gh-sync-id: e82e56d36648e7c924df77da1750e03037b5d5be
106 lines
2.5 KiB
JavaScript
106 lines
2.5 KiB
JavaScript
/**
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the BSD-style license found in the
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
*
|
|
* @providesModule ActivityIndicatorIOS
|
|
* @flow
|
|
*/
|
|
'use strict';
|
|
|
|
var NativeMethodsMixin = require('NativeMethodsMixin');
|
|
var PropTypes = require('ReactPropTypes');
|
|
var React = require('React');
|
|
var StyleSheet = require('StyleSheet');
|
|
var View = require('View');
|
|
|
|
var requireNativeComponent = require('requireNativeComponent');
|
|
|
|
var GRAY = '#999999';
|
|
|
|
type DefaultProps = {
|
|
animating: boolean;
|
|
color: string;
|
|
hidesWhenStopped: boolean;
|
|
size: 'small' | 'large';
|
|
};
|
|
|
|
var ActivityIndicatorIOS = React.createClass({
|
|
mixins: [NativeMethodsMixin],
|
|
|
|
propTypes: {
|
|
/**
|
|
* Whether to show the indicator (true, the default) or hide it (false).
|
|
*/
|
|
animating: PropTypes.bool,
|
|
/**
|
|
* The foreground color of the spinner (default is gray).
|
|
*/
|
|
color: PropTypes.string,
|
|
/**
|
|
* Whether the indicator should hide when not animating (true by default).
|
|
*/
|
|
hidesWhenStopped: PropTypes.bool,
|
|
/**
|
|
* Size of the indicator. Small has a height of 20, large has a height of 36.
|
|
*/
|
|
size: PropTypes.oneOf([
|
|
'small',
|
|
'large',
|
|
]),
|
|
/**
|
|
* Invoked on mount and layout changes with
|
|
*
|
|
* {nativeEvent: { layout: {x, y, width, height}}}.
|
|
*/
|
|
onLayout: PropTypes.func,
|
|
},
|
|
|
|
getDefaultProps: function(): DefaultProps {
|
|
return {
|
|
animating: true,
|
|
color: GRAY,
|
|
hidesWhenStopped: true,
|
|
size: 'small',
|
|
};
|
|
},
|
|
|
|
render: function() {
|
|
var {onLayout, style, ...props} = this.props;
|
|
var sizeStyle = (this.props.size === 'large') ? styles.sizeLarge : styles.sizeSmall;
|
|
return (
|
|
<View
|
|
onLayout={onLayout}
|
|
style={[styles.container, style]}>
|
|
<RCTActivityIndicatorView {...props} style={sizeStyle} />
|
|
</View>
|
|
);
|
|
}
|
|
});
|
|
|
|
var styles = StyleSheet.create({
|
|
container: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
sizeSmall: {
|
|
width: 20,
|
|
height: 20,
|
|
},
|
|
sizeLarge: {
|
|
width: 36,
|
|
height: 36,
|
|
}
|
|
});
|
|
|
|
var RCTActivityIndicatorView = requireNativeComponent(
|
|
'RCTActivityIndicatorView',
|
|
ActivityIndicatorIOS,
|
|
{nativeOnly: {activityIndicatorViewStyle: true}},
|
|
);
|
|
|
|
module.exports = ActivityIndicatorIOS;
|