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.

color banding on android

See original GitHub issue

Bug

i’m seeing color banding on some android devices. Below is a screenshot from a OnePlus 6t.

Environment info

React native info output:

  React Native Environment Info:
    System:
      OS: macOS 10.14.5
      CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
      Memory: 632.31 MB / 16.00 GB
      Shell: 5.0.2 - /usr/local/bin/bash
    Binaries:
      Node: 8.10.0 - ~/.nvm/versions/node/v8.10.0/bin/node
      Yarn: 1.17.3 - ~/.nvm/versions/node/v8.10.0/bin/yarn
      npm: 3.10.10 - ~/.nvm/versions/node/v8.10.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
      Android SDK:
        API Levels: 26, 27, 28
        Build Tools: 26.0.3, 27.0.3, 28.0.3, 29.0.0
        System Images: android-26 | Google APIs Intel x86 Atom, android-28 | Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.4 AI-183.6156.11.34.5522156
      Xcode: 10.3/10G8 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: 0.59.2 => 0.59.2

Library version: 9.5.3

Steps To Reproduce

see branch mv/svg here: https://github.com/mvayngrib/gradientbanding/tree/mv/svg

Describe what you expected to happen:

smooth gradient

Reproducible sample code

see branch mv/svg here: https://github.com/mvayngrib/gradientbanding/tree/mv/svg

here’s the main code though (colors hardcoded):

import React from 'react'
import { Dimensions } from 'react-native'

import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg'
const { width } = Dimensions.get('window')

const SvgBg = (props) => (
	<Svg width={width} height="100%" {...props}>
		<Defs>
			<LinearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%">
				<Stop offset="0%" stopColor="#0066ff" />
				<Stop offset="100%" stopColor="#00aaff" />
			</LinearGradient>
		</Defs>
		<Rect fill="url(#a)" width={width} height="100%" />
	</Svg>
)

export default React.memo(SvgBg)

Issue Analytics

State:
Created 4 years ago
Comments:58

Top GitHub Comments

1reaction

mvayngribcommented, Nov 7, 2019

@msand these are the minimal changes that it takes to get it to work on my device (plus android:hardwareAccelerated="false"): https://github.com/react-native-community/react-native-svg/compare/0cc5330...ExodusMovement:mv/dither

0reactions

gordonelcommented, Oct 22, 2020

Also, my device (Pixel 3) can dither with hardware acceleration turned on, apparently. It would be great to have hardware acceleration exposed for dither controls