Skip to main content


useStyleProps is a custom hook in Pearl UI that transforms the style props you provide into a format that React Native can understand and apply.

This hook takes in a props object, filters it based on the style properties you want, and generates a style object that can be passed to any React Native component.


import { useStyleProps } from "pearl-ui";

Return value#

The useStyleProps hook returns the processed React Native styles as an object.

{    style: {        color: "#000",        ....    }}


You can use the useStyleProps hook to add style props support to any React Native element. Here's an example of how you can add border and backgroundColor style props support to a native View element:

import React from "react";import { View } from "react-native";import { useStyleProps, backgroundColor, border } from "pearl-ui";
const colorViewStyleFunctions = [border, backgroundColor];
const ColorView = (props) => {  const passedProps = useStyleProps(props, colorViewStyleFunctions);
  return <View {...passedProps}>{props.children}</View>;};

In the examples above, the useStyleProps hook takes the raw props of the component and the desired style functions as parameters. It then generates a style object that can be directly passed to the target React Native element.

Now, any props passed into this component will automatically be converted into valid React Native styles:

<ColorView  backgroundColor="neutral.700"  borderColor="blue"  borderWidth={4}  borderStyle="dotted"/>


propstrueobjectThe raw props passed to the component where the hook is being used
styleFunctionstrueArray of Style FunctionsThe list of style functions to use for processing the received style props