How to get the dominant color from an image ?

How to / Third Party Tooling
1

Hello there,
I would like to know how to get the dominant color from an image (by giving an URL). I searched for libs but all were only for react native and I couldn’t get them working for expo…
Thanks a lot for your answers !

2

Hi @cleeryy

What React Native libraries did you find for this? With EAS Build and config plugins it’s theoretically possible to use any React Native library in the managed workflow.

3

Hey @wodin
The main library that I’ve seen the most is rn-dominant-color.
I am still learning a bit expo, so could you clarify EAS builds and config plugins ? I’ve seen it for uploading apps into the AppStore or PlayStore, but how could I get my app only in test mode on my phone as usually do ?
Thanks a lot for your help !

4

EAS is Expo’s new “Expo Application Services” which currently consists of:

  • EAS Build - their new build service that will replace the classic expo build service
  • EAS Submit - this is for submitting your app to the App/Play store. You could, of course, upload the app yourself, but this makes things a lot easier
  • EAS Update - their new OTA updates system. This is currently in preview and should eventually replace the current expo publish

The Expo Go app that you probably use for development includes all of the native code needed by every component of the Expo SDK (actually a few versions of the Expo SDK at once.) This makes it easy to run any Expo app as long as it only depends on the Expo SDK or dependencies written in plain JavaScript (or something that compiles to JavaScript.)

Something like rn-dominant-color includes its own native code, which is not included in the Expo Go app, so if you write an app that uses rn-dominant-color then when it tries to call into that code, Expo Go will get an error.

EAS Build solves two huge problems.

  • One of the biggest complaints that Expo used to get is that Expo apps were quite large. This was caused by every managed app including the entire Expo SDK, whether or not you were using e.g. the face detector etc.
  • There were many modules you could not use in a manged app because they depended on native code that was not included in the Expo SDK. So in the past you would have needed to eject to the Bare workflow,

Another problem was that it was difficult to convince Google/Apple that your app did not track your users because the code for various analytics services and Ad networks is included in the SDK and was therefore built into the final app, even if you were not calling that code.

So EAS Build changes how Expo apps are built. Instead of including the whole Expo SDK it installs your dependencies during the build process and compiles any included native code. This also means you can install extra things like rn-dominant-color without having to eject.

The problem is that some things that need native code that is not included in the Expo SDK require extra setup. e.g. they might need you to update AndroidManifest.xml or the native iOS project etc., etc. In the managed workflow these files do not exist in your project. They are only created during the build process.

So they created something called Config Plugins which are pieces of JavaScript code that run during the build process, after the native android and ios directories are created, to do this extra setup. Any module that needs native code that is not already included in the Expo SDK and requires extra setup will need a config plugin to do this setup during the build process.

You’re in luck, though. According to the rn-dominant-color installation instructions it only needs:

  • react-native link (which is handled automatically by recent versions of React Native, and therefore recent versions of Expo - as long as you build with EAS Build)
  • Swift support in the native iOS project (which Expo apps already include)

So rn-dominant-color should work out of the box with no need for a config plugin. But you will have to build with EAS Build.

All of the above implies that you will not be able to call the rn-dominant-color code in Expo Go, so instead you can build a custom development client. This is basically like a version of Expo Go that is customised to include all of the dependencies from your app (and only those dependencies, so if you add new dependencies you will need to rebuild the development client.) You will then use this development client instead of Expo Go for your development.

1 Like
5

Hey @wodin ! Sorry for the late answer… Thanks a lot, I haven’t tried but I’ve read the documentation and I think I’ll make it work !
Have a nice day and thanks again for your very helpful answer !

1 Like
6

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.