How to figure out which array position you need

[nabilfreeman]

Hi, this is something I found a little bit confusing and a refactor or at least README update would be helpful.

I think this is partly Android itself's fault, but I had to get it working so here we are 🤷‍♂️

1. Choose which material accent/tone you want

https://m3.material.io/styles/color/the-color-system/key-colors-tones#5b4f0cd4-beb7-41b1-b6ff-a952fcbea726

Let's say I want Secondary90 (I really did for this project)

2. Figure out how it corresponds to the Android R.Color

As usual Android's documentation sucks here but I found this cheatsheet which appears to be accurate:

https://github.com/material-components/material-components-android/blob/master/docs/theming/Color.md#using-the-color-theming-system

Looks like Secondary90 corresponds to system_accent2_100.

The relationship appears to be (1000 - $RColorValue) / 10) (e.g. (1000 - 100) / 10 = 90)

We can confirm this is a valid color value:

https://developer.android.com/reference/android/R.color#system_accent2_100

3. Read the source code of this library to find the array index

The magic file is RNMaterialYouModule.kt.

https://github.com/Assembless/react-native-material-you/blob/main/android/src/main/java/com/assembless/reactnativematerialyou/RNMaterialYouModule.kt#L67

        val system_accent2: WritableArray? = toWritableArray(arrayOf(
            R.color.system_accent2_0,
            R.color.system_accent2_10,
            R.color.system_accent2_50,
            R.color.system_accent2_100, ⬅️ here it is
            R.color.system_accent2_200,
            R.color.system_accent2_300,
            R.color.system_accent2_400,
            R.color.system_accent2_500,
            R.color.system_accent2_600,
            R.color.system_accent2_700,
            R.color.system_accent2_800,
            R.color.system_accent2_900,
            R.color.system_accent2_1000
        ).map { colorToHex(it) });

Looks like the color I need is the 4th element in the list, which is index position 3.

4. Reference in code

So, if I want Secondary90, I can write:

// An explanation of how to obtain the correct array index you need is available at:
// https://github.com/Assembless/react-native-material-you/issues/32
const { palette } = useMaterialYou({})

const secondary90 = palette.system_accent2[3]