Cannot read property 'width' of undefined (style.width)

Question

Alright, so I got following component (uses typescript but should be self-explanatory) for ImageBackground. (this is react-native)

import * as React from "react";
import { ImageBackground, ImageURISource } from "react-native";
import { width as deviceW } from "../services/device";

type Props = {
  width: number;
  ratio: number;
  unit: "px" | "%";
  source: ImageURISource;
};

class AspectRatioBackground extends React.Component<Props> {
  render() {
    const { width, ratio, unit, ...props } = this.props;
    let w = width;
    let h = width * ratio;
    if (unit === "%") {
      w = deviceW * (width / 100);
      h = deviceW * (width / 100) * ratio;
    }
    console.log(w, h);
    return <ImageBackground style={{ width: w, height: h }} {...props} />;
  }
}

export default AspectRatioBackground;

and it is being used like this

    <AspectRatioBackground
      source={pressed ? activeBackgroundUrl : backgroundUrl}
      width={55}
      unit="%"
      ratio={0.2946}
    >
      <View pointerEvents="none">
        <String>{children}</String>
      </View>
    </AspectRatioBackground>

That console log returns correct number values i.e. 100 and 200, but for some reason, I am getting the following error:

TypeError: Cannot read property 'width' of undefined

This error is located at: in ImageBackground (at AspectRatioBackground.js:25) in AspectRatioBackground (at Button.js:61) in TouchableWithoutFeedback (at Button.js:60) in Button (at SignInEmailPage.js:22) in SignInEmailPage (created by Route) in Route (created by withRouter(SignInEmailPage)) in withRouter(SignInEmailPage) (created by Route) in Route (at _Onboarding.js:44) in Switch (at _Onboarding.js:43) in RCTView (at View.js:71) in View (at createAnimatedComponent.js:147) in AnimatedComponent (at OnboardingRouteAnimation.js:33) in OnboardingRouteAnomation (at _Onboarding.js:42) in RCTView (at View.js:71) in View (at ImageBackground.js:68) in ImageBackground (created by Styled(ImageBackground)) in Styled(ImageBackground) (at _Onboarding.js:32) in Onboarding (created by Route) in Route (created by withRouter(Onboarding)) in withRouter(Onboarding) (at index.js:20) in LayoutIndex (created by Route) in Route (created by withRouter(LayoutIndex)) in withRouter(LayoutIndex) (at index.js:13) in Router (created by MemoryRouter) in MemoryRouter (at NativeRouter.js:11) in NativeRouter (at index.js:12) in Provider (at index.js:11) in App (at renderApplication.js:35) in RCTView (at View.js:71) in View (at AppContainer.js:102) in RCTView (at View.js:71) in View (at AppContainer.js:122) in AppContainer (at renderApplication.js:34)

Answer 1

I know it's a late answer but for anyone who runs into the same issue:

Providing a style prop to ImageBackground (even an empty one like <ImageBackground style={{}}.../>) solves the problem.