Skip to main content


The useAtomicComponentConfig hook is a powerful tool that transforms an atomic component style config into a format that React Native can understand and apply.

This hook takes in the default component config, the desired size/variant configuration, and any custom style props passed into a component. It then combines these inputs into a final styles object, prioritizing them in the following order:

  1. Custom style props (Highest priority)
  2. size/variant styles from the component style config (Medium priority)
  3. baseStyle from the component style config (Lowest priority)


import { useAtomicComponentConfig } from "pearl-ui";

Return value#

The useAtomicComponentConfig hook returns an object that merges custom props with React Native styles computed using style props.

For instance, consider the output value for the wave variant of the Spinner component:

{  "animating": true,  "animationDuration": 1200,  "count": 4,  "size": 30,  "style": {    "color": "#6A7BFF"  },  "waveFactor": 0.54,  "waveMode": "fill"}

In this example, the color style prop is transformed into a valid React Native style, while the other props are returned without any changes. This functionality is particularly useful when you need to adapt a third-party component to be compatible with Pearl UI.


To demonstrate the use of useAtomicComponentConfig, we will modify the ColorView example from the useStyleProps section to utilize the component style config approach:

import { extendTheme } from "pearl-ui";
const colorViewConfig = {  baseStyle: {    backgroundColor: {      light: "neutral.300",      dark: "neutral.600",    },    borderWidth: 2,    borderColor: "red",  },  variants: {    redBox: {      backgroundColor: "red",    },    cyanBox: {      backgroundColor: "cyan",      borderColor: "cyan",    },  },  defaults: {    variant: "redBox",  },};
const theme = extendTheme({  components: {    ColorView: colorViewConfig,  },});
import React from "react";import { View } from "react-native";import { useStyleProps, backgroundColor, border } from "pearl-ui";
const colorViewStyleFunctions = [border, backgroundColor];
const ColorView = (props) => {  const componentConfig = useAtomicComponentConfig(    "ColorView",    props,    { variant: props.variant },    undefined,    colorViewStyleFunctions  );
  return <View {...componentConfig}>{props.children}</View>;};

And there you have it! You can now control the active visual style of the component using the variant prop:

<ColorView variant="cyanBox" />


themeComponentKeyYesPearlTheme.componentsIdentifies the component in theme.components whose configuration is to be used
receivedPropsYesobjectThe raw props passed to the component where the hook is being used
sizeAndVariantPropsNo{size: string | undefined, variant: string | undefined}{ size: undefined, variant: undefined }Specifies custom size and variant configuration
colorSchemeNostring"primary"Defines the active color scheme of the component
styleFunctionsNoArray of Style FunctionsboxStyleFunctionsSpecifies the list of style functions for computing the received style props