From 14b0ed4c5d872cd992f6e1ca072a2c44c8ece25f Mon Sep 17 00:00:00 2001
From: Guilherme Iscaro <cabelitostos@gmail.com>
Date: Tue, 30 Jul 2019 04:22:14 -0700
Subject: [PATCH] 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: https://github.com/facebook/react-native/pull/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 https://github.com/facebook/react-native/issues/25319

Reviewed By: cpojer

Differential Revision: D16559929

Pulled By: sammy-SC

fbshipit-source-id: ac6fd572b9f91ee5a2cbe46f8c46c1f46a1ba8b3
---
 React/Views/RCTActivityIndicatorViewManager.m | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/React/Views/RCTActivityIndicatorViewManager.m b/React/Views/RCTActivityIndicatorViewManager.m
index 5de5643a3b9b1b..932e2aa9517da6 100644
--- a/React/Views/RCTActivityIndicatorViewManager.m
+++ b/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];