ActivityIndicator breaks when adding a testID

[Twinbird24]

This is the exact same issue as reported here by another user: #21563.
The previous ticket was not resolved and was closed, so I am opening a new one to address the issue. I am using the latest React Native release, 0.59.9.

 React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: (4) x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz
      Memory: 26.00 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.13.0 - ~/.nvm/versions/node/v10.13.0/bin/node
      Yarn: 1.13.0 - /usr/local/bin/yarn
      npm: 6.4.1 - ~/.nvm/versions/node/v10.13.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 23, 25, 26, 27, 28
        Build Tools: 23.0.1, 26.0.2, 27.0.3, 28.0.3
        System Images: android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64, android-25 | Android TV Intel x86 Atom, android-25 | Google APIs Intel x86 Atom, android-25 | Google APIs Intel x86 Atom_64, android-25 | Google Play Intel x86 Atom, android-26 | Android TV Intel x86 Atom, android-26 | Google APIs Intel x86 Atom_64, android-26 | Google Play Intel x86 Atom, android-27 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.4 AI-183.6156.11.34.5522156
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: ^16.8.6 => 16.8.6
      react-native: ^0.59.9 => 0.59.9

Steps To Reproduce

1. Import ActivityIndicator anywhere into your project and have it render, i.e.
   <ActivityIndicator color="blue" />
2. You'll notice the color of the indicator is blue. Now, add a testID, i.e.
   <ActivityIndicator color="blue" testID="activity-indicator" />
   You'll notice that the color changes to white (appears to disappear on a white background) and you cannot change the color to anything else.

https://snack.expo.io/@twinbird24/rn-activityindicator-bug-0.59.9

[mrozbarry]

Could only reproduce on iOS, Android appears to be fine.

[JLWalsh]

A temporary workaround would to be extract the testID prop and instead assign it to the View that wraps the PlatformActivityIndicator in ActivityIndicator.js. However, I don't think that this behaviour is wanted, because from what I've read here, is seems that testID is also assigned on native views on IOS. While the testID would still show up when inspecting the native components, it might break some tests for future versions. It also may be a bit of a hack, because the real bug is likely lying in native code.

Line 71:

-    const {onLayout, style, size, ...restProps} = props;
+    const {onLayout, style, size, testID, ...restProps} = props;

Line 101:

return (
    <View
+     testID={testID}   
      onLayout={onLayout}
      style={StyleSheet.compose(
        styles.container,
        style,
      )}>
      {Platform.OS === 'android' ? (
        // $FlowFixMe Flow doesn't know when this is the android component
        <PlatformActivityIndicator {...nativeProps} {...androidProps} />
      ) : (
        <PlatformActivityIndicator {...nativeProps} />
      )}
    </View>
  );

[cabelitos]

Hello everyone. I've submitted a fix for this problem. comments and suggestions are appreciated.
Please take a look in here: #25849