Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ActivityIndicator not visible without color prop on Pixel 3a #29495

Closed
emersonhsieh opened this issue Jul 26, 2020 · 3 comments
Closed

ActivityIndicator not visible without color prop on Pixel 3a #29495

emersonhsieh opened this issue Jul 26, 2020 · 3 comments
Labels
Component: ActivityIndicator Needs: Triage 🔍 Resolution: Locked This issue was locked by the bot.

Comments

@emersonhsieh
Copy link

Description

The ActivityIndicator is not visible without setting the color prop on Pixel 3a. Setting the animating prop to true does not work either. Running on the Expo snack displays a green ActivityIndicator without the color prop, which was how it behaved in React Native 0.62.2 on the Pixel 3a. I believe this is a device specific issue, but I'm not sure what the scope is.

React Native version: 0.63.2

Device: Pixel 3a
Android version: 10 (QQ3A.200605.002)

react-native info:

daSystem:
    OS: macOS 10.15.3
    CPU: (4) x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz
    Memory: 110.00 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.2.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.14.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.8.4 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 26, 28, 29
      Build Tools: 26.0.2, 28.0.3, 29.0.1, 29.0.2
      Android NDK: Not Found
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.4/11E146 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_212 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.2 => 0.63.2 
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

  1. Create a fresh React Native app with npx react-native init test_app
  2. Replace App.js with the code below
  3. Plug in Pixel 3a phone, run npm run android

Expected Results

Displaying two green ActivityIndicators (both on Dark and Light modes)

Snack, code example, screenshot, or link to a repository:

Initialize the app and replace App.js with the following. For me, the first is not visible, while the second is visible.

import React from 'react';
import {ActivityIndicator} from 'react-native';

const App: () => React$Node = () => {
  return (
    <>
      <ActivityIndicator />
      <ActivityIndicator color="00ff00" />
    </>
  );
};

export default App;
@emersonhsieh
Copy link
Author

Might be a duplicate of #29378

@jayshah123 jayshah123 mentioned this issue Sep 28, 2020
Closed
@Kreozot
Copy link

Kreozot commented Oct 4, 2020

Same bug on OnePlus 5T

@hank121314 hank121314 mentioned this issue Nov 13, 2020
Closed
@AlexanderMelchers
Copy link

+1 on this issue: ActivityIndicator not showing up on Android without specifying the color-attribute.

This was referenced Jul 9, 2021
Merged
Merged
kelset pushed a commit that referenced this issue Aug 19, 2021
@hank121314 @kelset
Android/ColorProps: ColorProps with value null should be defaultCol…
2209bb7 
…or instead of transparent (#29830)

Summary:
This pr:
- Fixes: #30183
- Fixes: #30056
- Fixes: #29950
- Fixes: #29717
- Fixes: #29495
- Fixes: #29412
- Fixes: #29378

Because most of ReactProps(name = ViewProps.COLOR) accept @ Nullable Integer.
For example:
https://github.com/facebook/react-native/blob/abb6433f506851430dffb66f0dd34c1e70a223fe/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java#L472-L479

After update to react-native 0.63.2 to make PlatformColor work, there is a new ColorPropSetter.
https://github.com/facebook/react-native/blob/abb6433f506851430dffb66f0dd34c1e70a223fe/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewManagersPropertyCache.java#L194-L215

But ColorPropSetter won't return an nullable value with getValueOrDefault, it will always return it's defaultValue which is 0.
And 0 is equal to TRANSPARENT, will cause <Text /> disappear.
## Changelog

[Android] [Fixed] - ColorProps with value null should be defaultColor instead of transparent

Pull Request resolved: #29830

Test Plan:
Please initiated a new project and replaced the app with the following code:
```
import * as React from 'react';
import {Text, View, TouchableOpacity, PlatformColor} from 'react-native';

export default function App() {
  const [active, setActive] = React.useState(false);

  return (
    <View>
      <Text style={active ? {color: 'green'} : null}>Example</Text>
      <Text
        style={
          active ? {color: PlatformColor('android:color/holo_purple')} : null
        }>
        Example2
      </Text>
      <TouchableOpacity onPress={() => setActive(!active)}>
        <Text>Toggle Active</Text>
      </TouchableOpacity>
    </View>
  );
}
```

Thanks you so much for your code review!

Reviewed By: JoshuaGross

Differential Revision: D30209262

Pulled By: lunaleaps

fbshipit-source-id: bc223f84a92f742266cb7b40eb26722551940d76
@facebook facebook locked as resolved and limited conversation to collaborators Aug 18, 2022
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Aug 18, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Component: ActivityIndicator Needs: Triage 🔍 Resolution: Locked This issue was locked by the bot.
Projects
None yet
Milestone
No milestone
4 participants
@Kreozot @emersonhsieh @AlexanderMelchers @react-native-bot