CODEWITHSUNDEEP
reactjstypescriptreact-nativeecmascript-6spread-syntax
Ilja
Ilja

Reputation: 46479

Spread types may only be created from object types

I have a simple react-native component using ts that specifies its own styling, however I also want to pass down any styling I might use on it from above the component tree (i.e. somewhere where I am using this component)

class RatioImage extends React.Component<Props> {
  render() {
    const { width, ratio, style, ...props } = this.props;
    return (
      <Image
        {...props}
        style={{
          width: deviceWidth * (width / 100),
          height: deviceWidth * (width / 100) * ratio,
          ...style
        }}
      />
    );
  }
}

I am currently getting error below on my ...style not sure why, as its supposed to be an object?

[ts] Spread types may only be created from object types.
const style: false | ImageStyle | (number & {
    __registeredStyleBrand: ImageStyle;
}) | RecursiveArray<false | ImageStyle | (number & {
    __registeredStyleBrand: ImageStyle;
}) | null | undefined> | null | undefined

Upvotes: 3

Views: 3508

Answers (1)

Anthony
Anthony

Reputation: 6482

You need to use an array syntax to supply multiple styles in react native

<Image style={[{ width: x, height; y}, style]} />

See the docs for more info

Upvotes: 7

Related Questions