1

I'm making a view in react native but my component has a webview to display HTML, below the webview is a flatlist( list of items) The parent component is supposed to be scrollable based on the webview & the flatlist. I tried to put them together but it doesn't work as I want.

Therefore I would appreciate all of your advice & suggestions. Thank you

enter image description here

Updated: I found out a solution here after the owner of the lib has been updated https://github.com/iou90/react-native-autoheight-webview/issues/81

2 Answers 2

2

You can use WebView as a header component of FlatList as this:

 <View style={styles.container}>
    <FlatList
      data={[
        { key: 'a' },
        { key: 'b' },
        { key: 'c' },
        { key: 'd' },

      ]}
      renderItem={({ item }) => <Text>{item.key}</Text>}
      ListHeaderComponent={
        <View style={{ height: 200 }}>
          <WebView
            originWhitelist={['*']}
            source={{ html: '<h1>Hello world</h1>' }}
          />
        </View>
      }
    />
  </View>

But there is still a limitation, you have to specify the height of the view that wraps WebView as done above. Hope, you got the idea ?

5
  • Thanks Roshan Gautam for supporting me. Do you know how to measure the height of webview based on its content after rendering? My idea is the webview will change its height dynamically
    – Uni
    Dec 14, 2018 at 2:30
  • You can specify the custom height in the HTML itself. And also, even if you give the height to the view that wraps WebView, you can scroll the WebView independently to see the contents. Dec 14, 2018 at 2:41
  • Also, you can give minimum height required to the View that wraps WebView. If this solves your initial issue, the please upvote my answer. :) Dec 14, 2018 at 2:44
  • Another idea for work around, get the device's height using Dimensions and use that to give required height to the View. Dec 14, 2018 at 2:46
  • I found out a solution in my update part above. Thank you for your suggestion with one vote
    – Uni
    Jan 3, 2019 at 6:46
0

Maybe this will help.

import React, { Component } from 'react';
import { Text, View, StyleSheet, WebView, FlatList } from 'react-native';

export default class App extends Component {
  onNavigationStateChange = navState => {
    if (navState.url.indexOf('https://www.google.com') === 0) {
      const regex = /#access_token=(.+)/;
      let accessToken = navState.url.match(regex)[1];
      console.log(accessToken);
    }
  };
  render() {
    const url = 'https://api.instagram.com/oauth/authorize/?client_id={CLIENT_ID}e&redirect_uri=https://www.google.com&response_type=token';
    return (
      <View style={{flex: 1}}>
      <WebView
        source={{
          uri: url,
        }}

        scalesPageToFit
        javaScriptEnabled
        style={{ flex: 1 }}
      />
      <FlatList data={[1, 2, 3]} renderItem={(item) => <Text>item</Text>}/>
      </View>
    );
  }
}
2
  • Thank you for you advice.. But this is no help because, the Webview height is just a haft, the rest is the FlatList space, The View height is not WebView's height + FlatList's height
    – Uni
    Dec 13, 2018 at 15:40
  • What you are trying to achieve is impossible. I find this github issue interesting. Have a look at this. Happy coding :)
    – bjupreti
    Dec 13, 2018 at 15:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.