I want to use WebView inside ScrollView for my react native app. But if I do so, I am not able to scroll my webview, unless I disable the scroll on scrollview. However, I need the scroll in both scrollview as well as webview. Any suggestions or solutions on how to accomplish this?
-
facing same issues, I am able to scroll horizontally but vertical scroll is causing the issue....any fixes so far – Nouman Tahir Dec 14 '17 at 14:42
-
This might help you check this – Arun kumar Feb 7 '18 at 11:47
I am also searching for this issue on the internet for the last 2-3 days and I have got an awesome solution for this ...
npm install --save react-native-webview-autoheight
After installing this with no issues
import MyWebView from "react-native-webview-autoheight";
<ScrollView style={{ flex: 1, backgroundColor: "white" }}>
<View
style={{ flex: 1, flexDirection: "column", backgroundColor: "white" }}
pointerEvents={"none"}
>
<Text>Hi I am at top</Text>
<MyWebView
//sets the activity indicator before loading content
startInLoadingState={true}
source={{
uri:
"https://stackoverflow.com/questions/43781301/react-native-how-do-i-scroll-a-webview-inside-scrollview-for-android"
}}
/>
<Text>Hi I am at bottom</Text>
</View>
</ScrollView>
it works perfectly for me..
-
1Hi @Tijo Thomas thanks much. <View style={{ flex: 1, flexDirection: 'column', backgroundColor: 'white' }} pointerEvents={'none'}> This style worked for me – Pruthvi Jun 7 '19 at 16:11
-
@Pruthvi I was looking for something like
pointerEvents={'none'}
Thanks. – Zeeshan Ahmad Khalil Oct 21 '20 at 7:44
I fix bug scroll Webview
inside ScrollView
. I override func onTouchEvent
if not only Webview
catch event onTouch
call requestDisallowInterceptTouchEvent(true);
.
You can try my repo https://github.com/thepday12/react-native-webview
package.json
"react-native-webview": "https://github.com/thepday12/react-native-webview",
Using
import WebView from 'react-native-webview';
Source from https://github.com/react-native-community/react-native-webview/?
use TouchyWebView.java
public class TouchyWebView extends WebView {
public TouchyWebView(Context context) {
super(context);
}
public TouchyWebView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public TouchyWebView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
requestDisallowInterceptTouchEvent(true);
return super.onTouchEvent(event);
}
and in layout
<yourpachagename.TouchyWebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
Try this code
heightValue = 1000 // putting 100 will let the Webview scroll normally.
<View> <Text> Viewtiful </Text> </View>
<WebView
source={{uri: 'www.reddit.com'}}
style={{height:heightValue}}
/>
Found this here.
this saved me: https://github.com/archriss/react-native-render-html/
[...]
import { ScrollView, Dimensions, Button } from 'react-native';
import HTML from 'react-native-render-html';
[...]
<ScrollView>
<Text>{strings.title}</Text>
<HTML
html={htmlText}
imagesMaxWidth={Dimensions.get('window').width}
baseFontStyle={styles.html}
/>
<Button
style={styles.button}
onButtonPressed={this.handleAcceptPress}
text={strings.accept}
/>
</ScrollView>
Try next code
<ScrollView>
<Text>Text before ScrollView</Text>
<WebView
source={{
uri:
"https://stackoverflow.com/questions/43781301/react-native-how-do-i-scroll-a-webview-inside-scrollview-for-android"
}}
style={{
marginTop: 20,
height: 100
}}
/>
<Text>Text after ScrollView</Text>
<WebView
source={{
uri:
"https://stackoverflow.com/questions/43781301/react-native-how-do-i-scroll-a-webview-inside-scrollview-for-android"
}}
style={{
marginTop: 20,
height: 100
}}
/>
</ScrollView>
-
1
-
this example is not complete, it will also not work as soon as you add more content to it – cinatic Jun 17 '20 at 20:29