osamaqarem/react-native-image-colors

Android always gives unknown color error when fallback color is #000

Closed this issue · 6 comments

Bug

When I call getColors using the following example code.

import React from 'react'
import { getColors } from 'react-native-image-colors'

const useImageColors = () => {
  const [colors, setColors] = React.useState(null)

  React.useEffect(() => {
    const url = 'https://i.imgur.com/68jyjZT.jpg'

    getColors(url, {
      fallback: '#000',
      cache: true,
      key: url,
    }).then(setColors)
  }, [])

  return colors
}

I keep getting the following error "Unknown color":

Screenshot 2023-06-29 at 3 17 09 PM

Notice the #000 as the fallback.

Environment info

Library Version
react-native-image-colors 2.1.0

I'm using a Samsung Galaxy Tab S6 Lite (New - 2023)

Steps To Reproduce

  1. Use an Android device
  2. Use the example code above on version 2.1.0
  3. Make sure the fallback is set to #000, this is very important to reproduce the bug
  4. Check the console for the error "Unknown color"

Describe what you expected to happen:

  1. I expected it to detect the color like it does for iOS. This #000 fallback works fine for iOS but not for Android.
  2. I also think the error message could be improved it should say Unknown fallback color so its clear why this error is occurring. It took me awhile to figure this out.

Reproducible sample code

import React from 'react'
import { getColors } from 'react-native-image-colors'

const useImageColors = () => {
  const [colors, setColors] = React.useState(null)

  React.useEffect(() => {
    const url = 'https://i.imgur.com/68jyjZT.jpg'

    getColors(url, {
      fallback: '#000', // <---------------- IMPORTANT for bug to reproduce on Android
      cache: true,
      key: url,
    }).then(setColors)
  }, [])

  return colors
}

@KrzysztofMoch I update the bug report. This only happens when the fallback color is set to #000. On iOS this works but on Android this throws an error. See my description for further details.

To answer your question, it happens for all pictures when given the fallback #000. I fixed it when I gave the fallback #000000. For Android you must give a full hex code otherwise this error is thrown.

Yes In docs for fallback collor

fallback collor: If a color property couldn't be retrieved, it will default to this hex color string (note: do not use shorthand hex. e.g. #fff).

You must to use 6 characters (e.g #000000)

@osamaqarem should we add support for 3 chars colros on android ?

@KrzysztofMoch Yeah my minimal suggestion here is that the error message is improved. Instead of:

Error: Unknown color

It should be:

Error: Unknown fallback color. Do not use shorthand hex e.g. #fff.

This will make debugging easier for future developers. If you can support shorthand that would be even better but not necessarily needed.

Edit: I thought the error was saying it could not detect the color of the image but it was related to the fallback color which took me awhile to realize.

@osamaqarem should we add support for 3 chars colros on android ?

If you would like to go for it, that would be nice 👍

Otherwise the report makes a good point, it would be easy for us to detect the length of the fallback string and throw a friendly error.

Okay, I will create PR on days