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

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

Answer 1

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 ?

Answer 2

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