Skip to main content


pearlify is a custom hook to convert a third-party component to a Pearl atom component that can be configured using an atomic component configuration.


import { pearlify } from "pearl-ui";

Return value#

pearlify returns the passed-in component that expects Pearl supported style props.


import { View } from "react-native";
const newTheme = extendTheme({  components: {    TestView: {      baseStyle: {        width: 200,        height: 200,        backgroundColor: "danger.400",        boxShadow: "4xl",      },    },  },});
const PearlifyViewComponent: React.FC = ({ children, ...props }) => {  const PearlView = pearlify(View, "TestView");
  return <PearlView {...props}>{children}</PearlView>;};


ComponenttrueReact.ComponentOriginal component to be passed on where the atomic component configuration has to be applied.
componentNametruestringName of the custom component that would be stored in the active Pearl theme.