Skip to content
Permalink
Browse files

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
  • Loading branch information...
cabelitos authored and facebook-github-bot committed Jul 30, 2019
1 parent 1db96a3 commit 14b0ed4c5d872cd992f6e1ca072a2c44c8ece25f
Showing with 11 additions and 1 deletion.
  1. +11 −1 React/Views/RCTActivityIndicatorViewManager.m
@@ -33,7 +33,17 @@ - (UIView *)view

RCT_EXPORT_VIEW_PROPERTY(color, UIColor)
RCT_EXPORT_VIEW_PROPERTY(hidesWhenStopped, BOOL)
RCT_REMAP_VIEW_PROPERTY(size, activityIndicatorViewStyle, UIActivityIndicatorViewStyle)
RCT_CUSTOM_VIEW_PROPERTY(size, UIActivityIndicatorViewStyle, UIActivityIndicatorView)
{
/*
Setting activityIndicatorViewStyle overrides the color, so restore the original color
after setting the indicator style.
*/
UIColor *oldColor = view.color;
view.activityIndicatorViewStyle = json ? [RCTConvert UIActivityIndicatorViewStyle: json] : defaultView.activityIndicatorViewStyle;
view.color = oldColor;
}

RCT_CUSTOM_VIEW_PROPERTY(animating, BOOL, UIActivityIndicatorView)
{
BOOL animating = json ? [RCTConvert BOOL:json] : [defaultView isAnimating];

0 comments on commit 14b0ed4

Please sign in to comment.
You can’t perform that action at this time.