How to remove color banding in react-native Android

Multi tool use
Multi tool use












0














In the past, I have written a few Android applications natively, and I discovered that the default pixel format often results in banding (at one point, and possibly still, it was RGBA_565, I believe). I have now just begun learning react-native, and I've discovered a similar issue. React Native BackgroundImages seem to suffer from color banding, at least in my scenario.



I have read a bit about the ReactActivityDelegate, but have been unable to find a way to set the pixel format through delegate methods. I have tried getWindow().setFormat(PixelFormat.RGBA_8888) in onAttachedToWindow, but it does not seem to have any effect, at least in a ReactActivity.



I've defined a BackgroundImage as <ImageBackground source={require('./my_img.png')} resizeMode='cover' style={styles.container}>..., but the resulting image has significant color banding as seen below



image



compared with the original image original image For reference, I'm emulating a Pixel 2 XL on Arch Linux, and that is what is reflected in the images.



As Drawable.setDither(boolean) has been deprecated and the property is now ignored, and as far as I know the React Native content view is not drawn on a SurfaceView from which to access a SurfaceHolder and define a PixelFormat, I am not sure how to force RGBA_8888 pixel format or remove the color banding in any other way.



Without explicitly defining the PixelFormat, color banding is expected, but I do not know how to define the PixelFormat for a React Native Android app given its limited access to the native code. Any ideas?










share|improve this question





























    0














    In the past, I have written a few Android applications natively, and I discovered that the default pixel format often results in banding (at one point, and possibly still, it was RGBA_565, I believe). I have now just begun learning react-native, and I've discovered a similar issue. React Native BackgroundImages seem to suffer from color banding, at least in my scenario.



    I have read a bit about the ReactActivityDelegate, but have been unable to find a way to set the pixel format through delegate methods. I have tried getWindow().setFormat(PixelFormat.RGBA_8888) in onAttachedToWindow, but it does not seem to have any effect, at least in a ReactActivity.



    I've defined a BackgroundImage as <ImageBackground source={require('./my_img.png')} resizeMode='cover' style={styles.container}>..., but the resulting image has significant color banding as seen below



    image



    compared with the original image original image For reference, I'm emulating a Pixel 2 XL on Arch Linux, and that is what is reflected in the images.



    As Drawable.setDither(boolean) has been deprecated and the property is now ignored, and as far as I know the React Native content view is not drawn on a SurfaceView from which to access a SurfaceHolder and define a PixelFormat, I am not sure how to force RGBA_8888 pixel format or remove the color banding in any other way.



    Without explicitly defining the PixelFormat, color banding is expected, but I do not know how to define the PixelFormat for a React Native Android app given its limited access to the native code. Any ideas?










    share|improve this question



























      0












      0








      0







      In the past, I have written a few Android applications natively, and I discovered that the default pixel format often results in banding (at one point, and possibly still, it was RGBA_565, I believe). I have now just begun learning react-native, and I've discovered a similar issue. React Native BackgroundImages seem to suffer from color banding, at least in my scenario.



      I have read a bit about the ReactActivityDelegate, but have been unable to find a way to set the pixel format through delegate methods. I have tried getWindow().setFormat(PixelFormat.RGBA_8888) in onAttachedToWindow, but it does not seem to have any effect, at least in a ReactActivity.



      I've defined a BackgroundImage as <ImageBackground source={require('./my_img.png')} resizeMode='cover' style={styles.container}>..., but the resulting image has significant color banding as seen below



      image



      compared with the original image original image For reference, I'm emulating a Pixel 2 XL on Arch Linux, and that is what is reflected in the images.



      As Drawable.setDither(boolean) has been deprecated and the property is now ignored, and as far as I know the React Native content view is not drawn on a SurfaceView from which to access a SurfaceHolder and define a PixelFormat, I am not sure how to force RGBA_8888 pixel format or remove the color banding in any other way.



      Without explicitly defining the PixelFormat, color banding is expected, but I do not know how to define the PixelFormat for a React Native Android app given its limited access to the native code. Any ideas?










      share|improve this question















      In the past, I have written a few Android applications natively, and I discovered that the default pixel format often results in banding (at one point, and possibly still, it was RGBA_565, I believe). I have now just begun learning react-native, and I've discovered a similar issue. React Native BackgroundImages seem to suffer from color banding, at least in my scenario.



      I have read a bit about the ReactActivityDelegate, but have been unable to find a way to set the pixel format through delegate methods. I have tried getWindow().setFormat(PixelFormat.RGBA_8888) in onAttachedToWindow, but it does not seem to have any effect, at least in a ReactActivity.



      I've defined a BackgroundImage as <ImageBackground source={require('./my_img.png')} resizeMode='cover' style={styles.container}>..., but the resulting image has significant color banding as seen below



      image



      compared with the original image original image For reference, I'm emulating a Pixel 2 XL on Arch Linux, and that is what is reflected in the images.



      As Drawable.setDither(boolean) has been deprecated and the property is now ignored, and as far as I know the React Native content view is not drawn on a SurfaceView from which to access a SurfaceHolder and define a PixelFormat, I am not sure how to force RGBA_8888 pixel format or remove the color banding in any other way.



      Without explicitly defining the PixelFormat, color banding is expected, but I do not know how to define the PixelFormat for a React Native Android app given its limited access to the native code. Any ideas?







      android react-native






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Dec 28 '18 at 5:49









      markspace

      6,82321529




      6,82321529










      asked Dec 28 '18 at 3:10









      Nerdizzle

      686511




      686511
























          0






          active

          oldest

          votes











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53953266%2fhow-to-remove-color-banding-in-react-native-android%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          0






          active

          oldest

          votes








          0






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes
















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.





          Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


          Please pay close attention to the following guidance:


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53953266%2fhow-to-remove-color-banding-in-react-native-android%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          GA 5nbIu6Hc3P7JxRrhHs8TNkUpMCXfiYwCNUIWxKARArd KjqRwqF SIZbaxEeeiz Ev9L9JGHvtDyY7BJ,aVGfEo1J,9k5kBqAJ6a
          I5WRjOaZP,g48,3Sc

          Popular posts from this blog

          Monofisismo

          compose and upload a new article using a custom form

          “attempting to read past stream EOM” using Sybase.AdoNet4.AseClient