Skip to content

Commit 14b0ed4

Browse files
cabelitosfacebook-github-bot
authored andcommitted
Do not override ActivityIndicator color when setting its size (#25849)
Summary: The activityIndicatorViewStyle property overrides the previous set color if it's changed. Depending on the property set order you may end in a state that the color property will never be respected since it first sets the color and then the activityIndicatorViewStyle property (which overrides the color property). In order to prevent this problem before setting the new activityIndicatorViewStyle save the old color and override it after activityIndicatorViewStyle is set. Thus always respecting the user's color. ## Changelog [iOS] [Fixed] - Do not override ActivityIndicator color when setting its size Pull Request resolved: #25849 Test Plan: Using the code below on iOS notice that the last ActivityIndicator will always have its color set to white while te testID is provided ### Without the patch Notice the white -> blue transition when disabling the testID ![broken](https://user-images.githubusercontent.com/984610/61999339-16c2ed80-b095-11e9-80f7-81c38eca761a.gif) ### With the patch Color remains unchanged ![working](https://user-images.githubusercontent.com/984610/61999338-1165a300-b095-11e9-9cb6-e45999db1544.gif) ```javascript import React from "react"; import { View, StyleSheet, ActivityIndicator, Button } from "react-native"; const App = () => { const [enableTestID, onSetEnableTestID] = React.useState(true); const onPress = React.useCallback(() => { onSetEnableTestID(!enableTestID); }, [enableTestID]); return ( <View style={styles.container}> <ActivityIndicator size="large" color="red" /> <ActivityIndicator size="small" color="red" /> <ActivityIndicator size="small" /> <ActivityIndicator color="green" /> <ActivityIndicator key={enableTestID.toString()} size="large" color="blue" testID={enableTestID ? 'please work' : undefined} /> <Button title={enableTestID ? 'Disable testID' : 'enable testID'} onPress={onPress} /> </View> ); }; export default App; const styles = StyleSheet.create({ container: { flex: 1, alignItems: "center", justifyContent: "center", backgroundColor: "black" }, }); ``` Closes #25319 Reviewed By: cpojer Differential Revision: D16559929 Pulled By: sammy-SC fbshipit-source-id: ac6fd572b9f91ee5a2cbe46f8c46c1f46a1ba8b3
1 parent 1db96a3 commit 14b0ed4

File tree

1 file changed

+11
-1
lines changed

1 file changed

+11
-1
lines changed

React/Views/RCTActivityIndicatorViewManager.m

+11-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,17 @@ - (UIView *)view
3333

3434
RCT_EXPORT_VIEW_PROPERTY(color, UIColor)
3535
RCT_EXPORT_VIEW_PROPERTY(hidesWhenStopped, BOOL)
36-
RCT_REMAP_VIEW_PROPERTY(size, activityIndicatorViewStyle, UIActivityIndicatorViewStyle)
36+
RCT_CUSTOM_VIEW_PROPERTY(size, UIActivityIndicatorViewStyle, UIActivityIndicatorView)
37+
{
38+
/*
39+
Setting activityIndicatorViewStyle overrides the color, so restore the original color
40+
after setting the indicator style.
41+
*/
42+
UIColor *oldColor = view.color;
43+
view.activityIndicatorViewStyle = json ? [RCTConvert UIActivityIndicatorViewStyle: json] : defaultView.activityIndicatorViewStyle;
44+
view.color = oldColor;
45+
}
46+
3747
RCT_CUSTOM_VIEW_PROPERTY(animating, BOOL, UIActivityIndicatorView)
3848
{
3949
BOOL animating = json ? [RCTConvert BOOL:json] : [defaultView isAnimating];

0 commit comments

Comments
 (0)