Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Flex styles are not working for WebView

See original GitHub issue

Description

What I did: Check the rnplay What is happening: Flex styles are not working for WebView What should happens: Flex working for WebView

Reproduction

https://rnplay.org/apps/K8tUAw

Check line 24 (<WebView style={styles.webview} source={{uri: 'http://random.org'}}></WebView>). Replace that line for: <View style={styles.webview}></View> and you will see that the View is working with Flex values.

If you add a width: 300 value in styles.webview (for the WebView component), you will see it will works.

Solution

No idea.

Additional Information

React Native version: react-native-cli: 1.2.0 react-native: 0.37.0
Platform: Both
Operating System: MacOS

Issue Analytics

State:
Created 7 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

1reaction

LeeZCcommented, Mar 1, 2018

hi guys , i fixed in my case, by package a father view , like: <View style={{flex:10}}> <WebView style={{flex:1}} /> </View> <View style={{flex:1}}> <WebView style={{flex:1}} /> </View>

0reactions

zfang6commented, Dec 21, 2017

Is this issue addressed?

Top Results From Across the Web

Flex WebView in react native - css - Stack Overflow

1 Answer 1 ; Container style={styles.container}> ; WebView source={{uri: 'https://testabcdef.com/privacy.html'}} style={{marginTop: 20, flex: 1}} ...

Flex Box Problem in Android browsers - CSS-Tricks

In my code, on tablet-style.css, you will see that I put just the flex command in .flex css class, but I say that...

flex-direction - CSS: Cascading Style Sheets - MDN Web Docs

The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or ......

`<webview>` Tag | Electron

Please note that the webview tag's style uses display:flex; internally to ensure the child iframe element fills the full height and width of...

React Native Show Progress bar While Loading WebView

React Native Show Progress bar While Loading WebView. ... style={{ flex: 1 }}> <View style={styles.container}> <WebView style={{ flex: 1 }} //Loading URL ...