Skip to content

Commit

Permalink
Do not override ActivityIndicator color when setting its size (#25849)
Browse files Browse the repository at this point in the history
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 14b0ed4
Showing 1 changed file with 11 additions and 1 deletion.
12 changes: 11 additions & 1 deletion React/Views/RCTActivityIndicatorViewManager.m
Expand Up @@ -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];
Expand Down

0 comments on commit 14b0ed4

Please sign in to comment.