Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webview inside Flatlist does not scroll smoothly #22550

Closed
kevinloc opened this issue Dec 7, 2018 · 5 comments
Closed

Webview inside Flatlist does not scroll smoothly #22550

kevinloc opened this issue Dec 7, 2018 · 5 comments
Labels
Bug Component: FlatList Component: WebView Related to the WebView component. Platform: Android Android applications. Resolution: Locked This issue was locked by the bot.

Comments

@kevinloc
Copy link

kevinloc commented Dec 7, 2018

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Memory: 6.28 GB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.11.4 - /usr/local/bin/node
npm: 5.6.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
API Levels: 21, 22, 23, 24, 25, 26, 27, 28
Build Tools: 27.0.3, 28.0.2, 28.0.3
System Images: android-23 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5014246
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.5.0 => 16.5.0
react-native: 0.57.0 => 0.57.0
npmGlobalPackages:
react-native-cli: 2.0.1

Description

The scrolling of Webview inside Flatlist does not run smoothly only in Android device (it works very well on IOS ). I have an array webviews, then in Flatlist, each renderItem I will have one Webview inside. Here is my simple Flatlist and renderContentRow

<View style={{ flex: 1 }} onLayout={this.onLayout}>
<FlatList
data={listWebview}
bounces={false}
renderItem={this.renderContentRow}
keyExtractor={(item, index) => ${item.Id}-${index}}
horizontal={true}
pagingEnabled
>
</ FlatList>
</ View>
renderContentRow = (row) => {
return (
<View style={{
width: deviceWidth - 40,
height: deviceHeight - 230,
backgroundColor: 'green'
}}>
<WebView
originWhitelist={['*']}
scalesPageToFit={true}
source={{ uri: 'https://stackoverflow.com/questions/52929589/how-to-display-data-using-flatlist-and-webview-in-react-native' }}
/>
</ View>
)
}

@react-native-bot

This comment has been minimized.

@react-native-bot

This comment has been minimized.

@kevinloc
Copy link
Author

kevinloc commented Dec 7, 2018

I still face this issue with the new version. It only happens on ANDROID

@hramos hramos added Platform: Android Android applications. and removed Component: View labels Dec 14, 2018
@rinku-k
Copy link

rinku-k commented Jan 10, 2019

I also have the exact same scenario. I found that the issue persists in old react-native versions too.
I have tested in react-native 0.55.4 and 0.57.8. The issue is consistent.

Since you are using webview, you may also face issue #22940

@cpojer
Copy link
Contributor

cpojer commented Mar 20, 2019

This issue has been moved to react-native-webview/react-native-webview#436.

@cpojer cpojer closed this as completed Mar 20, 2019
@facebook facebook locked as resolved and limited conversation to collaborators Mar 20, 2020
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Mar 20, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Bug Component: FlatList Component: WebView Related to the WebView component. Platform: Android Android applications. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

5 participants