`cannot read property getColors of null` on Android

[zkrige]

The lib works fine on iOS, but on android I'm getting this error - I'm not quite sure how to resolve - could you please advise

[osamaqarem]

Hey, sorry about that. Could you create a repo where I can take a look at the error?

[zkrige]

I'll get something set up, but our use is very simple

import ImageColors from 'react-native-image-colors'
import { Color } from 'src/common/colors'
import { Business } from 'src/models/business'

interface Props {
  business: Business
}

const BusinessLogo = ({ business }: Props) => {
  const [color, setColor] = useState<string>(Color.purple)
  const [logo, setLogo] = useState<string>()

  axios.get(business.logo, { responseType: 'arraybuffer' }).then(res => loadImage(res.data))

  const loadImage = async (arrayBuffer: ArrayBuffer) => {
    const base64 = btoa(
      new Uint8Array(arrayBuffer).reduce((data, byte) => data + String.fromCharCode(byte), ''),
    )
    const logoBinary = `data:image/png;base64,${base64}`

    setLogo(logoBinary)

    // use the base64 string here instead of the remote uri - this speeds up loading
    try {
      const colors = await ImageColors.getColors(logoBinary, { <---- fails here
        fallback: Color.purple,
        quality: 'lowest',
      })

[osamaqarem]

This kind of error can happen if the Android app wasn't rebuilt (react-native run-android) after installing the library. If you did rebuild it and the error still happens, I'll need a repo with the error to investigate 🙏

[zkrige]

The app is definitely rebuilt. I'm wondering if its not a babel or typescript error. Its very weird.

The example app seems to work fine, and also it works fine in iOS.

try {
      const colors = await ImageColors.getColors(logoBinary, {
        fallback: Color.purple,
        quality: 'lowest',
      })

      if (colors.platform === 'ios') {
        setColor(colors.primary)
      } else {
        setColor(colors.dominant || Color.purple)
      }
    } catch (error) {
      console.log("error", error)
      console.log("ImageColors", ImageColors)
    }

this is the debug output

So if I log ImageColors, it appears to have the getColors function but react native says ImageColors is undefined

[zkrige]

sigh

I'm retarded. I never loaded ImageColorsPackage() in my main application

[osamaqarem]

Happens to everyone 😂
But unless the app is RN < 0.60, linking should be performed automatically. Did you perform manual linking for iOS too?
I might need to add manual linking instructions for older RN users.

[zkrige]

im on 0.61.5 - I didn't have to link manually for iOS. I haven't linked manually for android, but I did need to manually add the package initialiser in my main android app

[osamaqarem]

That is weird.. I'm willing to look into it if you want to provide me with a repo having the problem. Otherwise, we can close the issue 😄

[zkrige]

dont worry :)

[spiralman]

FWIW, for others finding this bug report, I also ran into a similar issue (using RN 0.60), and had to clear out the Java build cache. ./gradlew clean didn't delete enough, but rm -rf android/app/build/ did. Alternately, ./gradlew cleanBuildCache might have worked, but I didn't try it.