Nativebase: Extend default props interface to support custom props (Typescript)

[KowalskiP]

I have gone through these following points

• [x] Check latest documentation: https://docs.nativebase.io/
• [x] Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
• [x] Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
• [ ] Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink
• [ ] For discussion purpose make use of NativeBase Slack: http://slack.nativebase.io/
• [x] For queries related to theme, check Theme Variables from Docs and live NativeBase Theme Editor http://nativebase.io/customizer/

Issue Description

node, npm, react-native, react and native-base version, expo version if used, xcode version

• node - v8.12.0
• npm - 6.5.0
• react-native - 0.59
• native-base - 2.13.4
• expo - 33
• xcode - 10.2.1

Hi, thank you for you library, it's awesome.
I am wondering if there is a way to customize current typescript interfaces to support my custom prop styles from theme folder?

[KowalskiP]

For example I want to have a way to use this:

<Button myCustomPropStyle />

Without using ts-ignore above

[bscaspar]

@KowalskiP were you ever able to make any progress on this? I am stuck with the same errors.

[KowalskiP]

@bscaspar no, I did not have any good news

[Rionardo]

@KowalskiP @bscaspar you can override it,

declare module 'native-base' { namespace NativeBase { interface Button { [props: string]: any; } } }

[connor-odoherty]

@RioFiveJack

I would like to use a more limited type that merely extends the original NativeBase type instead of making everything legal.

Additionally, I would like to wrap all of the NativeBase components I use with my own wrappers, and use the exact same type for the wrappers that I use for the extended, custom NativeBase components. My implementation is as follows:

import React, { Component } from "react";
import { Card as NBCard, NativeBase } from "native-base";

declare module "native-base" {
  namespace NativeBase {
    interface Card {
      whiteBackground?: boolean;
      noPadding?: boolean;
      noBorder?: boolean;
    }
  }
}

export default class CustCard extends Component<NativeBase.Card, any> {
  render() {
    return <NBCard {...this.props} />;
  }
}

However, this causes a new, larger TypeScript error on NBCard:

Error:(16, 13) TS2769: No overload matches this call.
  Overload 1 of 2, '(props: Readonly<Card>): Card', gave the following error.
    Type '{ dataArray?: any[] | undefined; style?: false | ViewStyle | RegisteredStyle<ViewStyle> | RecursiveArray<false | ViewStyle | RegisteredStyle<ViewStyle> | null | undefined> | StyleProp<...>[] | null | undefined; ... 71 more ...; children?: ReactNode; }' is not assignable to type 'IntrinsicClassAttributes<Card>'.
      Types of property 'ref' are incompatible.
        Type '((instance: ViewProps | ListViewProps | null) => void) | RefObject<ViewProps | ListViewProps> | null | undefined' is not assignable to type 'string | ((instance: Card | null) => void) | RefObject<Card> | null | undefined'.
          Type '(instance: ViewProps | ListViewProps | null) => void' is not assignable to type 'string | ((instance: Card | null) => void) | RefObject<Card> | null | undefined'.
            Type '(instance: ViewProps | ListViewProps | null) => void' is not assignable to type '(instance: Card | null) => void'.
              Types of parameters 'instance' and 'instance' are incompatible.
                Type 'Card | null' is not assignable to type 'ViewProps | ListViewProps | null'.
                  Type 'Card' is not assignable to type 'ViewProps | ListViewProps | null'.
                    Type 'Card' is missing the following properties from type 'ListViewProps': dataSource, renderRow
  Overload 2 of 2, '(props: Card, context?: any): Card', gave the following error.
    Type '{ dataArray?: any[] | undefined; style?: false | ViewStyle | RegisteredStyle<ViewStyle> | RecursiveArray<false | ViewStyle | RegisteredStyle<ViewStyle> | null | undefined> | StyleProp<...>[] | null | undefined; ... 71 more ...; children?: ReactNode; }' is not assignable to type 'IntrinsicClassAttributes<Card>'.
      Types of property 'ref' are incompatible.
        Type '((instance: ViewProps | ListViewProps | null) => void) | RefObject<ViewProps | ListViewProps> | null | undefined' is not assignable to type 'string | ((instance: Card | null) => void) | RefObject<Card> | null | undefined'.
          Type '(instance: ViewProps | ListViewProps | null) => void' is not assignable to type 'string | ((instance: Card | null) => void) | RefObject<Card> | null | undefined'.
            Type '(instance: ViewProps | ListViewProps | null) => void' is not assignable to type '(instance: Card | null) => void'.

This error happens even if I don't extend NativeBase.Card in the first place. Is there a better way to wrap these NB components and alias their type?

[mccordgh]

Having the same issue :(

[connor-odoherty]

@mccordgh I solved this by using a similar pattern to @RioFiveJack, but extending the interface instead of overwriting it as my original solution did:

declare module "native-base" {
  namespace NativeBase {
    interface Card extends CustomStyleProps {}
  }
}

interface CustomStyleProps {
  noShadow?: boolean;
  whiteBackground?: boolean;
  noPadding?: boolean;
  noBorder?: boolean;
  cardBody?: boolean;
}

interface IProps extends CustomStyleProps {}

export class Card extends Component<IProps> {
  render() {
    return <NBCard {...this.props} />;
  }
}

Is this the use case you're looking for?