How i can using web view and one View inside ScrollView @shoutem/ui

Question

i try to use @shoutem/ui in my project! i have one Component with Webview and one View inside! I want design it like: Webview full screen, when scroll to end WebView i want see View, then i try to used ScrollView then put WebView and View inside, here is my code:

  <ScrollView >
          <Screen styleName="paper">
            <WebView
              style={{
                backgroundColor: '#fff',
                flex: 1,
              }}
              ref="myWebView"
              renderLoading={this.renderLoading}
              source={{ uri: this.state.rowdata.urlView }}
            />
          </Screen>

          <View styleName="horizontal space-between h-center" >
            <Button>
              <Icon name="like" />
            </Button>
            <TextInput
              placeholder={'Enter comment..'}
            />
            <Button>
              <Icon name="activity" />
            </Button>
          </View>
        </ScrollView>

But i think i wend wrong in some where! Here is my result:

Please help me fix this! Thanks guys so much

score 2 · Accepted Answer · answered May 02 '17 at 08:51

2

WebView automatically resizes itself, which means it'll shrink itself to nothingness if put inside a ScrollView component. WebView will show up fine if you give it a specific size:

  <ScrollView style={{flex: 1}}>
    <WebView source={src} style={{height: 250}}/>
  </ScrollView>

You can find out a more detailed explanation of how ScrollView child components work here.

answered May 02 '17 at 08:51

Vladimir Vdović

281
3
9

1

if we have variable height for webview how to do it ? – AlainIb Jul 03 '18 at 08:38
@AlainIb were you able figure out what to do when webview has a variable height? facing similar issue. – sidtagirisa Mar 18 '19 at 06:34
@setshaft i ended removing scrollview, // flex:1 style dont work for webview ! https://pastebin.com/Aie4eCuu – AlainIb Mar 18 '19 at 08:22
If you know the height of the webview, it's easy. Also give a height greater than the webview to ScrollView instead of flex property. – Devmaleeq Jan 22 '21 at 09:55

score 0 · Answer 2 · answered Jan 22 '21 at 09:57

Something like this works as long as you can get height of webview before loading

<ScrollView style={{ height:1000}}>
        <WebView
        style={ { height:700} }
        javaScriptEnabled={true}
            domStorageEnabled={true}
        
            source={{uri:"https://www.facebook.com" }}
            scrollEnabled={false}
        />
        <WebView
        style={ { height:700} }
            javaScriptEnabled={true}
            domStorageEnabled={true}
        
            source={{uri:"https://www.facebook.com" }}
            scrollEnabled={false}
        />
        <View/>
                                    }
                                />
    </ScrollView>

How i can using web view and one View inside ScrollView @shoutem/ui

2 Answers2