Skip to main content


The useMolecularComponentConfig is a custom hook that transforms a molecular component style config into corresponding React Native styles.

This hook extends the functionality of the useAtomicComponentConfig hook, enabling the creation of intricate components by merging various atomic components. It also simplifies the styling process through a component style config.


import { useMolecularComponentConfig } from "pearl-ui";

Return value#

The useMolecularComponentConfig hook yields an object that includes the style props, which are grouped according to their respective parts.

For instance, the output value for the Button component would look like this:

{  "icon": {    "color": "neutral.100",    "size": "l"  },  "root": {    "alignItems": "center",    "backgroundColor": "primary.500",    "borderRadius": "m",    "justifyContent": "center",    "margin": "2xs",    "px": "m",    "py": "m",    "style": {      "display": "flex"    }  },  "spinner": {    "color": "neutral.100",    "size": "l"  },  "text": {    "color": "neutral.100",    "variant": "btn1"  }}

As demonstrated, the hook segregates the appropriate props into their respective categories, allowing them to be directly passed to the underlying atomic components.


To demonstrate the application of useMolecularComponentConfig, we'll modify the ColorView example from the useAtomicComponentConfig section. We'll convert it into a molecular component that merges two atomic components:

  1. View
  2. Text
import { extendTheme,  } from "pearl-ui";import { ViewProps, TextProps } from "react-native";
type ColorViewAtoms = {  view: ViewProps;  text: TextProps;};

const colorViewConfig: MolecularComponentConfig<ColorViewAtoms> = {  parts: ["view", "text"],  baseStyle: {    view: {      backgroundColor: {        light: "neutral.300",        dark: "neutral.600",      },      borderWidth: 2,      borderColor: "red",    },    text: {      variant: "p2",    },  },  variants: {    redBox: {      view: {        backgroundColor: "red",      },      text: {        color: "red",      },    },    cyanBox: {      view: {        backgroundColor: "cyan",        borderColor: "cyan",      },      text: {        color: "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 =    useMolecularComponentConfig <    ColorViewAtoms >    ("ColorView",    props,    { variant: props.variant },    props.colorScheme,    colorViewStyleFunctions,    "view",    "text");
  return (    <View {...componentConfig.view}>      <Text {...componentConfig.text}>{props.children}</Text>    </View>  );};

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

<ColorView variant="cyanBox" />


themeComponentKeyYesPearlTheme.componentsIdentifies the component in PearlTheme.components whose config will be used
receivedPropsYesobjectThe raw props that are passed to the component where the hook is being used
sizeAndVariantPropsNo{size: string | undefined, variant: string | undefined}{ size: undefined, variant: undefined }Specifies the custom size and variant configuration to be used
colorSchemeNostring"primary"Defines the active color scheme of the component
targetKeyForOverridenStylePropsNostring | undefinedIdentifies the part where the style props passed to the component instance should be reflected. If undefined, the style props are passed to the first part as specified in the config
targetKeyForOverridenNativePropsNostring | undefinedIdentifies the part where other native props (non-style props) passed to the component instance should be reflected. If undefined, the native props are passed to the first part as specified in the config