question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

RN 0.63.3 is adding some gray backgrounds in Android.

See original GitHub issue

Description

Automatically after updating to RN 0.63.3 I had a problem with some gray colors in android (only Android, iOS works fine). It seems that some styles are being injected at some point in the build process, in addition, the logbox seems to be being modified as well (with same gray background). I can ensure that those styles are not being applied from the JavaScript code.

Any help can be useful. At the end you will find some screenshots.

React Native version:

System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 841.49 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.13.1 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.1, DriverKit 19.0, macOS 10.15, tvOS 14.0, watchOS 7.0
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3, 29.0.2
      System Images: android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom, android-30 | Google Play Intel x86 Atom, android-R | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6626763
    Xcode: 12.1/12A7403 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_222 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.14.0 => 16.14.0 
    react-native: 0.63.3 => 0.63.3 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

  1. Upgrade to React Native v0.63.3.
  2. Run react-native start.
  3. Run react-native run-android.

Expected Results

Colors should look right.

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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:15

github_iconTop GitHub Comments

1reaction
devmartinez0commented, Oct 31, 2020

@fervailanti have you found a solution? I am still stuck with this, I have tried several things and i can’t find what is causing this issue. I have another similar project and the colors are working fine on android (they both use the same react native version).

Maybe can you share with me the dependencies of your project to compare them with mine?

1reaction
fervailanticommented, Oct 29, 2020

The problem is also related with ScrollView, if I remove the ScrollView component from a View the problem disappear for that View, but not using ScrollView is not an option.

Anyone has a solution for this?

The workaround i found for FlatList for now is with contentContainerStyle prop but not really scalable.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Text color is overridden to white when tested on a device with ...
Text color is overridden to white when tested on a device with Android 10 in dark mode. Save this question. Show activity on...
Read more >
How Android 12 lets you customize your phone's color palette
One of the new features in Android 12 is the ability to automatically fit your phone's color palette to that of your wallpaper....
Read more >
Light and dark modes - Expo Documentation
Learn how to support light and dark modes in your app.
Read more >
Turn on Dark theme & color inversion - Google Support
You can change your display to a dark background using a dark theme or color inversion. Dark theme applies to the Android system...
Read more >
Add Custom Fonts in React Native 0.63 for iOS and android
Adding Custom Fonts to React Native App is quite easy and only needs a few steps. I am writing down t... Tagged with...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found