Typescript extend react native View component

Question

Trying to extend react-native View component. However I'm having trouble extending props of the View component.

Here is how I extend the Props

import { StyleSheet, View, ViewStyle, ViewProps } from "react-native";
interface Props extends ViewProps {
  pb?: keyof Size | number;
  pt?: keyof Size | number;
  pv?: keyof Size | number;
  ph?: keyof Size | number;
}

Here is my custom View component

class WrappedView extends Component<Props> {
  render() {
    const methods = {};
    let { style: attrStyles, children, pb, pt, pv, ph, ...rest } = this.props;
    let style = [attrStyles];
    // Shorthand prop styles
    let propStyles: ViewStyle = {};
    propStyles.paddingBottom = pb;
    propStyles.paddingTop = pt;
    propStyles.paddingVertical = pv;
    propStyles.paddingHorizontal = ph;
    style.push(propStyles);
    return (
      <View style={style} {...rest} {...this.state} {...methods}>
        {children}
      </View>
    );
  }
}

When I try a test like so

const test = () => {
  return <WrappedView pb={"large"} width={"100%"} />;
};

I get the following issue

Type '{ pb: "large"; width: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<WrappedView> & Readonly<Props> & Readonly<{ children?: ReactNode; }>'.
  Property 'width' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<WrappedView> & Readonly<Props> & Readonly<{ children?: ReactNode; }>'.

width is not a prop from ViewProps. Check it here

Milore
– Milore

2019-05-08 10:55:38 +00:00
Commented May 8, 2019 at 10:55 — Milore
– Milore, Commented May 8, 2019 at 10:55
Argh this is pretty embarrassing thanks

david_adler
– david_adler

2019-05-08 10:58:51 +00:00
Commented May 8, 2019 at 10:58 — david_adler
– david_adler, Commented May 8, 2019 at 10:58

david_adler · Accepted Answer · 2019-05-08 11:00:40Z

2

The code in the question does indeed extend the props correctly instead it was a client mistake. The client should read:

const test = () => {
  return <WrappedView pb={"large"} style={{width:"100%"}} />;
};

answered May 8, 2019 at 11:00

david_adler

11.1k10 gold badges72 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Milore Over a year ago

Exactly. Note that you don't need to redefine style prop in your interface Props extends ViewProps as you did in the question, 'cause style is already a ViewProp.

Collectives™ on Stack Overflow

Typescript extend react native View component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related