width is specified as the screen width by default

[otusweb]

It would be great if the component could just take the width of its container (could use the 'stretch' mode)

As of right now, I have to calculate the width manually otherwise the web view overflows the container.

[iou90]

You can wrap a View to do this:

<View
  style={{ flex: 1, alignSelf: 'stretch' }}
  onLayout={event => {
    this.setState({ webviewWidth: event.nativeEvent.layout.width });
  }}
>
  <AutoHeightWebView
    style={{ width: this.state.webviewWidth }}

[otusweb]

Sure I can do that. But that is pretty complex. If I want other react control to stretch the whole screen I don't have to do the logic you just mention.

It would be great if the code could look for the other layout attribute than width before deciding to set its width to the screen width.
Maybe what we'd need is a way to lock the width and let the default layout attribute take care of setting the size when in that mode.

[iou90]

@otusweb The only way to horizontally stretch a WebView is to set explicit width: react-native-webview/react-native-webview#27
I will try with onLayout inside this lib when this PR (react-native-webview/react-native-webview#206) was merged.

[otusweb]

@iou90 Good to know and thanks for considering this feature request!

[iou90]

Unfortunately, I found the onLayout callback on NativeWebView of react-native-webview can not provide the width of its container like View does, may be they should put the onLayout callback to it's View wrapper.

[vasylnahuliak]

It just helped me style={{ width: '100%' }}