react-native-material-you

Bring newest Android 12 feature Material You to your React Native app. This package enables you to use the from wallpaper generated colors in your app.

RNMY Thumbnail

Features

🪝 Supports React hooks
♻️ Refreshes palette when the wallpaper changes

How to install

Yarn

yarn add @assembless/react-native-material-you

NPM

npm install @assembless/react-native-material-you

In order to get the colors always refreshed when the palette is being regenerated on the native side, it's necessary to wrap your app with MaterialYouService and get the palette from the context, by using useMaterialYouPalette or useMaterialYouContext hooks. The service subscribes to palette changes on the native side and updates the context when the palette is changed.

import { MaterialYouService, useMaterialYouPalette } from '@assembless/react-native-material-you';

const App = () => (
    <MaterialYouService>
        {...}
    </MaterialYouService>
)

const MyComponent = () => {
    const palette = useMaterialYouPalette();

    return (
        <View style={{ backgroundColor: palette.system_neutral2[2] }}>
            <Text style={{ color: palette.system_accent1[6] }}>Hello World</Text>
        </View>
    );
}

React Hook

Alternatively, you can use the useMaterialYou hook that returns the system generated color palette. In order to get the newest palette, run the _refresh method exposed by the hook.

import { useMaterialYou } from '@assembless/react-native-material-you';

const MyComponent = () => {
    const { palette } = useMaterialYou();

    return (
        <View style={{ backgroundColor: palette.system_neutral2[2] }}>
            <Text style={{ color: palette.system_accent1[6] }}>Hello World</Text>
        </View>
    );
}

Static methods

Get palette synchronously

The getPaletteSync function returns a rich palette of 5 system generated colors (system_accent1, system_accent2, system_accent3, system_neutral1, system_neutral2) and each containing 12 shades of Material color in hex strings that are used to determine the hues closest to the user’s wallpaper. The color constants are passed from the native module. Check out the Android documentation for more details about system generated colors.

import { getPaletteSync } from '@assembless/react-native-material-you';

const palette = getPaletteSync();

const theme = {
    palette: {
        primary: palette.system_accent1[6],
        background: palette.system_neutral2[2],
        ...
    }
}

⚠️ This function only returns constant colors generated at runtime once. If you want to get the colors regenerated while the app is already running, you need to use the getPalette function which is asynchronous.

Get palette asynchronously

import { getPalette } from '@assembless/react-native-material-you';

const createTheme = async () => {
    const palette = await getPalette();

    return ({
        palette: {
            primary: palette.system_accent1[6],
            background: palette.system_neutral2[2],
            ...
        }
    })
}

Documentation

Coming soon!

How to debug

Install dependencies (in root dir and ./example dir)
Open the example directory project in Android Studio, build and run the project. (./example/android)
Run yarn start in the example directory.

@assembless/react-native-material-you