Android OS version 12 scroll to top or scroll to end will be force exit App without red error or native error

[donghuiqiu]

Bug description:
when scroll to top or scroll to end is crash without any error tips , Android OS < 12 is normal

To Reproduce:

Android OS Version : 12
react-native : '0.63.3'
react-native-webview: '11.23.0'
eact-native-autoheight-webview:'1.6.4'

Source (static HTML or url):

Example my code:

import React, {useState} from 'react';

import {Linking, Dimensions, View, Text, ActivityIndicator, Platform} from 'react-native';

import AutoHeightWebView from 'react-native-autoheight-webview';
import {getRealDP as dp, DEVICE_WIDTH, DEVICE_HEIGHT} from "../utils/Common";

const onShouldStartLoadWithRequest = (result, props) => {
    console.log(result, props);
    // props.navigation.push('SpacialScript',props)
    return true;
};

const onError = ({nativeEvent}) =>
    console.error('WebView error: ', nativeEvent);

const onMessage = (event, props) => {
    const {data} = event.nativeEvent;
    console.log('messageData====>>>', data, props)

    let messageData;
    try {
        messageData = JSON.parse(data);
    } catch (e) {
        console.log(e.message);
    }

    if (typeof messageData === 'object') {
        const {url, video} = messageData;
        // check if this message concerns us
        if (url && url.startsWith('http')) {
            Linking.openURL(url).catch(error =>
                console.error('An error occurred', error),
            );
        }
        if (video) {
            // console.log('video====>>>',video)
            // let url = 'http://sp1.nineddc.com:8866/api/alien/download/28481223-5320-4f78-6704-1fbb3ca66836/lidongyang2.mp4'
            props.playVideo(video)
        }
    }
};

const onHeightLoadStart = (props, item) => {
    item.webView.postMessage(props.webFontSize)
};

const onHeightLoad = () => console.log('',);

const onHeightLoadEnd = () => console.log('',);


const customCss = '* { -webkit-user-select: none; } input, textarea { -webkit-user-select: initial; } body { user-select: none !important; overflow-x: hidden !important; }';

const customJs = `
      (function() {
        setTimeout(function() {
          try {
            var s = document.createElement('style');
            s.innerHTML = '${customCss.replace(/'/g, "\\'").replace(/(\r\n|\n|\r)/gm, '')}';
            document.head.appendChild(s);
          } catch (e) {  }
        }, 0); 
      })();`;

const _injectJavaScript = () => `
              var ps=document.getElementsByTagName('p');
              let size = 10;
      for(var i=0;i<ps.length;i++){
            ps[i].style.fontSize=size+10.5+'pt';
            // ps[i].style.lineHeight=(size*1.5+18)+'pt';
      }
      var ss=document.getElementsByTagName('span');
      for(var i=0;i<ss.length;i++){
            ss[i].style.fontSize=size+10.5+'pt';
            // ss[i].style.lineHeight=(size*1.5+18)+'pt';
      }

    `

const Explorer = (props) => {
    const [setHeightSize] = useState({height: 0, width: 0});
    // let data = props.data
    console.log('props=====>>>>>', props.data)

    let data = [
        {url:'https://imgurl.ninedvr.com/laitan/book/2022/10/27/7f32a8bd-3477-41ae-8436-91ffc87a7542.html'},
        {url:'https://imgurl.ninedvr.com/laitan/book/2022/10/27/14e67b97-c705-43c1-b960-f1abf0e8990f.html'},
        {url:'https://imgurl.ninedvr.com/laitan/book/2022/10/27/9df2bce8-96cf-4053-b373-a9f7994d78cc.html'},
    ]

    return (
        data.map((item, id) => {
            item.webView && item.webView.postMessage(props.webFontSize);
            return (
                <AutoHeightWebView
                    key={id}
                    ref={ref => item.webView = ref}
                    customStyle={null}
                    originWhitelist={["*"]}
                    onError={onError}
                    // onLoad={onHeightLoad}
                    onLoadStart={() => onHeightLoadStart(props, item)}
                    // onLoadEnd={onHeightLoadEnd}
                    startInLoadingState={true}
                    scalesPageToFit={false}
                    scrollEnabledWithZoomedin={false}
                    viewportContent={'width=device-width, user-scalable=no'}
                    mixedContentMode={'always'}
                    onShouldStartLoadWithRequest={(e) => onShouldStartLoadWithRequest(e, props)}
                    customScript={
                        `document.body.style.width = ${Dimensions.get('window').width};
                         let background = document.getElementById('content-txt');
                         // background.style.backgroundColor = '#fff';
                         background.style.backgroundColor = 'transparent';
                         document.body.style.userSelect = 'none';

                         ${customJs}
                        `
                    }
                    // injectedJavaScript={_injectJavaScript()}
                    // injectedJavaScriptBeforeContentLoaded={Platform.OS === 'ios' ? customJs : undefined}
                    // injectedJavaScript={Platform.OS === 'android' ? customJs : undefined}

                    onSizeUpdated={(size) => {
                        setHeightSize
                        if (size.height !== 0 && id >= 1) {
                            data[id].height = data[id - 1].height + size.height
                            data[id].width = size.width
                        } else {
                            data[id].height = size.height
                            data[id].width = size.width
                        }

                        if (id === data.length - 1 && size.height !== 0) {
                            // props.getHeight(data)
                        }
                    }}
                    source={{uri: item.url,}}
                    onMessage={event => onMessage(event, props)}
                    renderLoading={() => {
                        return (
                            <View style={{
                                height: dp(200),
                                backgroundColor: 'rgba(0,0,0,.5)',
                                justifyContent: 'center',
                                alignItems: 'center'
                            }}>
                                <Text style={{color: '#fff'}}>Loading... </Text>
                                <ActivityIndicator size="small" color="#ccc" animating={true}/>
                            </View>
                        )
                    }}
                />
            )
        })
    );
};

export default Explorer;

use template

                    <ScrollView
                        ref={scrollView => this.scrollView = scrollView}
                        // onScroll={(e) => this.onScroll(e, html_list)}
                        onScrollBeginDrag={() => {
                            this.setState({isTabLocation: false})
                        }}
                    >
                        <MyWebViewList
                            webFontSize={`${webFontSize ? webFontSize : 0}`}
                            data={html_list}
                            playVideo={(e) => this.onPlayVideo(e)}/>
                    </ScrollView>

Expected behavior:

scroll to top or scroll to end will be force exit App without red error or native error

Screenshots/Videos:

Environment:

• OS: Android
• OS version: 12
• react-native version: 0.63.3
• react-native-webview version: '11.23.0'
• react-native-autoheight-webview version: '1.6.4'

[adametsderschopfer]

Were you able to fix the problem?

[donghuiqiu]

I solved by adding prop overScrollMode="never" to ScrollView, it works for me, if no work for you, try adding another prop removeClippedSubviews={true} , and react-native-webview issues have say the solution link: [react-native-webview/react-native-webview#2364](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Freact-native-webview%2Freact-native-webview%2Fissues%2F2364)

…

------------------&nbsp;原始邮件&nbsp;------------------ 发件人: "iou90/react-native-autoheight-webview" ***@***.***&gt;; 发送时间:&nbsp;2022年11月25日(星期五) 晚上11:15 ***@***.***&gt;; ***@***.******@***.***&gt;; 主题:&nbsp;Re: [iou90/react-native-autoheight-webview] Android OS version 12 scroll to top or scroll to end will be force exit App without red error or native error (Issue #248) Were you able to fix the problem? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***&gt;

[kennedy-f]

I solved by adding prop overScrollMode="never" to ScrollView, it works for me, if no work for you, try adding another prop removeClippedSubviews={true} , and react-native-webview issues have say the solution link: [react-native-webview/react-native-webview#2364](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Freact-native-webview%2Freact-native-webview%2Fissues%2F2364)
…
------------------ 原始邮件 ------------------ 发件人: "iou90/react-native-autoheight-webview" @.>; 发送时间: 2022年11月25日(星期五) 晚上11:15 @.>; @.@.>; 主题: Re: [iou90/react-native-autoheight-webview] Android OS version 12 scroll to top or scroll to end will be force exit App without red error or native error (Issue #248) Were you able to fix the problem? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

This worked perfectly for me! This issue it's also happening on Android 13.

[iou90]

Maybe you can try react-native-webview@13.6.1 with their fix: react-native-webview/react-native-webview#2874