React Native - Android issue with WebView scroll

Question

WebView scroll is not working in Android. I have searched a lot and seen a lot of other places, no one was able to help.

This is how I defined the component

 <WebView
    automaticallyAdjustContentInsets={false}
    source={{uri: this.props.url}}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    decelerationRate="normal"
    startInLoadingState={true}
    scalesPageToFit={isAndroid ? false : true}
/>

This seems a react native bug (which is out there forever), but there should be a workaround.

-- UPDATE --

I figured out that this is not the WebView problem and it's happening because I have it in a Modal and TouchableWithoutFeedback is needed to hide the modal and of course not hide when they touch inside the modal. TouchableWithoutFeedback steals the press event and does not the scroll work.

<Modal
    animationType='fade'
    onRequestClose={() => { }}
    transparent
    visible={visible} //its either true or false, if its ture it will be displayed if false, it will hide
>
    <TouchableWithoutFeedback onPress={onDecline} >
        <View style={containerStyle}>
            <Ionicons name="md-close" size={24} color={colors.primary} style={closeIconStyle} />
            <TouchableWithoutFeedback onPress={() => { }} >
                <View style={popupStyle}>
                    <View style={styles.textContainer}>
                        <Text style={textStyle}>
                            {this.props.title}
                        </Text>
                    </View>
                    <View style={[cardSectionStyle, {
                        marginTop: 5
                    }]}>

                        <View style={{ height: SCREEN_HEIGHT - 300, width: SCREEN_WIDTH - 80 }}>
                            <WebView
                                source={{ uri: this.props.url }}
                                style={contentStyle}
                                automaticallyAdjustContentInsets={false}
                                javaScriptEnabled={true}
                                domStorageEnabled={true}
                                decelerationRate="normal"
                                startInLoadingState={true}
                            />

                        </View>
                    </View>
                </View>
            </TouchableWithoutFeedback>

        </View>
    </TouchableWithoutFeedback>
</Modal>

How did you fix this? – Abhimanyu Pathania Sep 09 '22 at 10:51 — Abhimanyu Pathania, Sep 09 '22 at 10:51

score 2 · Answer 1 · answered Oct 08 '21 at 05:12

2

Adding "nestedScrollEnabled" property in WebView worked for me

answered Oct 08 '21 at 05:12

Naveen

21
2

score 1 · Accepted Answer · answered Oct 20 '18 at 07:27

You can add style={flex: 1} in the <Webview /> tag.

If it's still not working, just try this:

<WebView
    source={{uri: this.props.url }}
    style={{marginTop: 20, flex: 1}}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    startInLoadingState={true}
/>

React Native - Android issue with WebView scroll

2 Answers2