how can I define prop type when set a custom props?

[dohooo]

how can I define prop type when set a custom props?

[dohooo]

import { BorderRadiuses } from "react-native-ui-lib";

BorderRadiuses.loadBorders({
    br500: 50,
});

---------------

// type error
<View br500/>

[dohooo]

in modifiers.d.ts

declare module "react-native-ui-lib" {
    import type { IViewCustomProps, ITextCustomProps } from "@/utils/initUiLibModifiers";

    export * from "react-native-ui-lib/generatedTypes";
    import type { default as View, ViewProps } from "react-native-ui-lib/generatedTypes/components/view";
    export declare const View: React.ComponentClass<
        ViewProps & {
            useCustomTheme?: boolean | undefined;
        } & IViewCustomProps,
        any
    >;

    import type { default as Text, TextProps } from "react-native-ui-lib/generatedTypes/components/text";
    export declare const Text: React.ComponentClass<
        TextProps & {
            useCustomTheme?: boolean | undefined;
        } & ITextCustomProps,
        any
    >;
}

[dohooo]

in modifiers.d.ts

declare module "react-native-ui-lib" {
    import type { IViewCustomProps, ITextCustomProps } from "@/utils/initUiLibModifiers";

    export * from "react-native-ui-lib/generatedTypes";
    import type { default as View, ViewProps } from "react-native-ui-lib/generatedTypes/components/view";
    export declare const View: React.ComponentClass<
        ViewProps & {
            useCustomTheme?: boolean | undefined;
        } & IViewCustomProps,
        any
    >;

    import type { default as Text, TextProps } from "react-native-ui-lib/generatedTypes/components/text";
    export declare const Text: React.ComponentClass<
        TextProps & {
            useCustomTheme?: boolean | undefined;
        } & ITextCustomProps,
        any
    >;
}

Is there a better way？

[ethanshar]

@zwh1666258377
I believe that with the new typescript template literal feature we can now define dynamic types, including the one you want.
Would you consider submitting a PR with a fix?

[dohooo]

@ethanshar okay， I can try

[dohooo]

@ethanshar Can you tell me briefly about your thoughts？

[dohooo]

@zwh1666258377
I believe that with the new typescript template literal feature we can now define dynamic types, including the one you want.
Would you consider submitting a PR with a fix?

Oh, I think I see what you mean. Like this we can

type BorderRadiuses = `br${number}`;

But that's not what I meant. When I set other props

// In a situation like this, This is how I handle it
const customTypography = {
    // fontSize
    "fs-10": { fontSize: 10 },
    "fs-12": { fontSize: 12 },
    // lineHeight
    "lh-10": { lineHeight: 10 },
    "lh-12": { lineHeight: 12 },
    // fontWeight
    "fw-400": { fontWeight: "400" },
    "fw-500": { fontWeight: "500" },
};

type GetCustomType<T> = Partial<{ [k in keyof T]: boolean }>;
type TCustomTypography = GetCustomType<typeof customTypography>;
export interface ITextCustomProps extends TCustomTypography {}

// In modifiers.d.ts

declare module "react-native-ui-lib" {
    import type { ITextCustomProps } from "@/utils/initUiLibModifiers";
    export * from "react-native-ui-lib/generatedTypes";
    import type { default as Text, TextProps } from "react-native-ui-lib/generatedTypes/components/text";
    export declare const Text: React.ComponentClass<
        TextProps & {
            useCustomTheme?: boolean | undefined;
        } & ITextCustomProps,
        any
    >;
}

// When I use

...
render(){
    // There will be type hints
    return <Text fs-10 fw-10 fw-400> ... </Text>
}
...

[dohooo]

I'm a junior programmer and would love to be able to commit changes, but I think I need some guidance. Thank you very much

[dohooo]

hey, this is my PR #1463

[ethanshar]

Hi @ethanshar
So for the typography we have a generic type as part of the Typography typings, we just allow this {[key: string]: boolean}

If I understand correctly, you decided on adding a dynamic typing for BorderRadius right?

[dohooo]

Hi @ethanshar
So for the typography we have a generic type as part of the Typography typings, we just allow this {[key: string]: boolean}

If I understand correctly, you decided on adding a dynamic typing for BorderRadius right?

Yes

[ethanshar]

Hi @zwh1666258377
I recently merged your PR but unfortunately had to revert.
Our internal consumers as for for our open source user still don't use TS v4.4.0 necessarily.
And therefor this is a breaking change.
We'll have to wait a little more for this change.