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 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:

Javascript
Typescript

ColorView.tsx

import React from "react";import { View } from "react-native";import {  useStyledProps,  backgroundColor,  BackgroundColorProps,  border,  BorderProps,  StyleFunctionContainer,} from "pearl-ui";
type ColorViewProps = BackgroundColorProps & BorderProps;
const colorViewStyleFunctions = [  border,  backgroundColor,] as StyleFunctionContainer[];
type ViewProps = React.ComponentProps<typeof View> & {  children?: React.ReactNode;};type ComponentProps = ColorViewProps & Omit<ViewProps, keyof ColorViewProps>;
const ColorView: React.FC<ComponentProps> = (props) => {  const passedProps = useStyledProps(props, colorViewStyleFunctions);
  return <View {...passedProps}>{props.children}</View>;};

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#

Name	Type	Description
`props`	object	Raw props passed to the component where the hook is being used
`styleFunctions`	StyleFunctionContainer[]	List of style functions to use for computing the received style props