React Native - WebView & FlatList in a ScrollView to be scrollable

Question

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

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

score 2 · Answer 1 · answered Dec 13 '18 at 15:46

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 ?

answered Dec 13 '18 at 15:46

Roshan Gautam

480
1
5
15

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 '18 at 02: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. – Roshan Gautam Dec 14 '18 at 02: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. :) – Roshan Gautam Dec 14 '18 at 02:44
Another idea for work around, get the device's height using Dimensions and use that to give required height to the View. – Roshan Gautam Dec 14 '18 at 02:46
I found out a solution in my update part above. Thank you for your suggestion with one vote – Uni Jan 03 '19 at 06:46

score 0 · Answer 2 · answered Dec 13 '18 at 15:30

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>
    );
  }
}

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 '18 at 15:40
What you are trying to achieve is impossible. I find this [github issue](https://github.com/facebook/react-native/issues/4773#issuecomment-198738602) interesting. Have a look at this. Happy coding :) — bjupreti, Dec 13 '18 at 15:57

React Native - WebView & FlatList in a ScrollView to be scrollable

2 Answers2