ios – WebView (Commerce View chart) Scroll Battle in React Native (Android)

I’m embedding the TradingView chart inside a react-native-webview.
The chart shows and works tremendous for zoom/pan gestures, however there’s a scrolling situation:

When the person tries to scroll the whole display screen (e.g., a father or mother ScrollView) ranging from the chart space, the display screen doesn’t transfer — the contact will get “caught” within the WebView.

Iam dealing with a difficulty with the TradingView chart that’s rendered inside a react-native-webview. The chart itself hundreds and capabilities appropriately for zooming and panning, however when a person tries to scroll the whole display screen beginning their swipe from throughout the WebView space, the scroll gesture doesn’t propagate — the display screen will get “caught” and gained’t transfer. This solely occurs when the gesture begins contained in the chart; if the person begins scrolling from one other a part of the display screen, it really works usually. It looks like the WebView is intercepting all contact and scroll gestures, stopping the father or mother ScrollView or essential structure from dealing with them. The issue seems solely on Android. Basically, I want a method to let customers work together with the chart easily whereas nonetheless having the ability to scroll the general display screen even when their swipe begins throughout the WebView space.

right here is my code how i’m utilizing the net View:

import WebView from 'react-native-webview';
import { StyleSheet, View, Platform, NativeModules } from 'react-native';
import { borderRadius, spacing, ThemeType } from '../../theme';
import { useTheme } from '../../information/suppliers/ThemeProvider';
import { mergeDataMarketListCandle } from '../../providers/api/itemizing/itemizing';
import { useEffect } from 'react';
import { useDxTradeSession } from '../../information/suppliers/DxTradeSessionProvider.tsx';
import { useSelectedAccountProvider } from '../../information/suppliers/selectedAccountProvider.tsx';

kind ChartURLs = { html: string; folder: string };

kind Props = {
  merchandise: mergeDataMarketListCandle;
  disableAnimation?: boolean;
  animationThresholdPct?: quantity;
};
kind LocalWebProps = { uri: ChartURLs; theme: ThemeType; image: string };

export const TradingChartWebView = React.memo(perform LocalWeb({ uri, theme, image }: LocalWebProps) {
  const kinds = useStyles(theme);
  const { sessionToken } = useDxTradeSession();
  const { accountNumber } = useSelectedAccountProvider();
  const webSource = React.useMemo(() => {
    if (!uri) return null;
    return {
      uri: `${uri.html}?image=${encodeURIComponent(image)}&&sessionToken=${encodeURIComponent(sessionToken!)}&&account=${accountNumber}`,
    };
  }, [sessionToken, symbol, uri]);

  return (
    
       true}
        onMessage={occasion => {
          attempt {
            const { kind, message } = JSON.parse(occasion.nativeEvent.information);
            // console[type]?.(`[WebView ${type}]`, message);
          } catch (e) {
            console.log('[WebView]', occasion.nativeEvent.information);
          }
        }}
        scrollEnabled={false}
        bounces={false}
        startInLoadingState
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
        overScrollMode="by no means"
        nestedScrollEnabled
        scalesPageToFit={Platform.OS === 'android' ? false : true}
        automaticallyAdjustContentInsets={false}
        useWebKit={true}
        javaScriptEnabled={true}
      />
    
  );
});

perform InstrumentTradingView(props: Props) {
  const { merchandise } = { ...props };
  const { theme } = useTheme();
  const [urls, setUrls] = React.useState(null);

  useEffect(() => {
    if (Platform.OS === 'ios') {
      NativeModules.BundlePath.chartHTMLURLs()
        .then((u: ChartURLs) => setUrls(u))
        .catch((e: any) => console.warn('chartHTMLURLs error:', e));
    } else {
      setUrls({
        html: 'file:///android_asset/charting_library/index.html',
        folder: 'file:///android_asset/charting_library',
      });
    }
  }, []);

  return urls && ;
}

export default InstrumentTradingView;

const useStyles = (theme: ThemeType) =>
  StyleSheet.create({
    webView: {
      flex: 1,
      marginTop: 20,
      backgroundColor: 'crimson',
      paddingHorizontal: Platform.OS === 'android' ? spacing.md : 0,
    },
    webStyle: {
      flex: 1,
      peak: 400,
      padding: 20,
      paddingBottom: 0,
      backgroundColor: 'clear',
      borderRadius: borderRadius.xxl,
    },
  });

show Commerce view chart. all wants for this library is put in and appears all good.

I discovered that is a standard situation with react-native-webview, particularly inside scrollable React Native containers (like ScrollView, FlatList, or PanResponder setups). The contact occasions usually get “stolen” by the father or mother view earlier than the WebView can deal with them.

any resolution for this?