Best way to use the library with Typescript

[dpoltoratsky]

Hi guys!

I am learning TypeScript and RNUILib, and I was wondering if I am approaching something in a good way.

For example, I want to wrap a Button component in my custom one and correctly declare its props type.

Here is my hypothetical example:

import Button from "react-native-ui-lib/button";
import { ButtonProps } from "react-native-ui-lib/generatedTypes/src/components/button/ButtonTypes";

export type CustomButtonProps = ButtonProps & {
  isCustom?: boolean | null;
};

export const DayQualityButton = (props: CustomButtonProps): JSX.Element => {
  return (
    <Button
      {...props}
      backgroundColor={
        props?.isCustom === null ? "white" : props.isCustom ? "red" : "yellow"
      }
    />
  );
};

What concerns me is importing the type like so:

import { ButtonProps } from "react-native-ui-lib/generatedTypes/src/components/button";

Which implies that I have to know how the library is structured inside.

I would much rather prefer it to be like so:

import { Button, ButtonProps } from "react-native-ui-lib/button";

P.S.
I could do it this way instead:

import { Button, ButtonProps } from "react-native-ui-lib";

But would it not defeat the purpose of importing only the components I need?

Before You Start: UILib Packages
Starting with version 5.12.0 UILib exports individual packages so you can import only what you need.

Why packages are important?

• Smaller bundle size. By importing only the components you need, your bundle size will be reduced to the files that were imported.
• Quicker setup. Avoid installing peer dependencies and linking native dependencies you don't need.

[ethanshar]

Hi @dpoltoratsky
You concern is definitely justified.
The structure of this path "react-native-ui-lib/generatedTypes/src/components/button" is something that probably will change in the future and might break you.

As you suggested, we should support importing the ButtonProps from the Button package or any other solution.

If you feel comfortable with the code, consider submitting a PR with a suggestion, I'd love to assist.