Skip to main content

useStyledProps

useStyledProps is a custom hook used to convert the received style props to appropriate React Native styles.

It expects a props object, filters them based on the desired style properties, and creates a style object that can be passed to any React Native component

Import#

import { useStyledProps } from "pearl-ui";

Return value#

The useStyledProps hook returns the built React native styles as an object.

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

Usage#

The useStyledProps can be used to add style props support to any React Native element. Here's how you would go about adding border and backgroundColor style props support to a native View element:

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

As you can notice above, the useStyledProps hook takes the components raw props and the desired style functions as the parameters and passes the output style object directly to the target React Native element.

That's it! Now, any props passed into this component would automatically be converted into valid React Native styles:

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

Parameters#

NameRequiredTypeDescription
propstrueobjectRaw props passed to the component where the hook is being used
styleFunctionstrueStyleFunctionContainer[]List of style functions to use for computing the received style props