Search code examples
react-nativeshoutem

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

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: enter image description here

Please help me fix this! Thanks guys so much

Solution

  • 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.