Q:

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

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)

A:

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.