title: WebView .reload() not working properly on iOS
body: <p>I'm using React Native's WebView component to display a chart. The chart has time scale selection controls and these are passed as props to the component containing the WebView. When a new time scale is passed to it, I need to reload the injected JS so that a new chart is rendered with the newly selected time scale. Here is the component:</p>
  
  <pre><code>function CandleChart(timeScale) {
    const width = Dimensions.get('window').width;
    const [candleChartJS, setCandleChartJS] = useState(
      chartJS.candleChart(width, timeScale.timeScale)
    );
    const [currTimeScale, setCurrTimeScale] = useState('1h');
  
    useEffect(() =&gt; {
      setCandleChartJS(chartJS.candleChart(width, timeScale.timeScale));
      if (currTimeScale !== timeScale.timeScale) {
        CandleWebViewRef.reload();
        setCurrTimeScale(timeScale.timeScale);
      }
    }, [timeScale]);
  
    return (
      &lt;View style={{ flex: 1, height: 300, zIndex: -1 }}&gt;
        &lt;WebView
          ref={CandleWVref =&gt; (CandleWebViewRef = CandleWVref)}
          originWhitelist={['*']}
          useWebKit={true}
          source={{ html: candleChartHtml }}
          domStorageEnabled={true}
          javaScriptEnabled={true}
          style={styles.WebViewStyle}
          injectedJavaScript={candleChartJS}
        /&gt;
      &lt;/View&gt;
    );
  }
  </code></pre>
  
  <p>Calling .reload() inside the <code>useEffect()</code> function works just as expected on Android, but on iOS the WebView just keeps loading after a different time scale is selected. How can I achieve the same behavior on iOS?</p>
  
  <p>Edit: I've solved my issue thanks to Mayank Garg, I'll just post the slightly modified final component here because his answer is aimed at class-based components, and I'm using functional components and hooks:</p>
  
  <pre><code>function CandleChart(timeScale) {
    const width = Dimensions.get('window').width;
    const [candleChartJS, setCandleChartJS] = useState(
      chartJS.candleChart(width, timeScale.timeScale)
    );
    const [currTimeScale, setCurrTimeScale] = useState('1h');
    const [isReloadWebView, setReloadWebView] = useState(false);
  
    useEffect(() =&gt; {
      setCandleChartJS(chartJS.candleChart(width, timeScale.timeScale));
      if (currTimeScale !== timeScale.timeScale) {
        setReloadWebView(!isReloadWebView);
        setCurrTimeScale(timeScale.timeScale);
      }
    }, [timeScale]);
  
    return (
      &lt;View style={{ flex: 1, height: 300, zIndex: -1 }}&gt;
        &lt;WebView
          ref={CandleWVref =&gt; (CandleWebViewRef = CandleWVref)}
          key={isReloadWebView}
          originWhitelist={['*']}
          useWebKit={true}
          source={{ html: candleChartHtml }}
          domStorageEnabled={true}
          javaScriptEnabled={true}
          style={styles.WebViewStyle}
          injectedJavaScript={candleChartJS}
        /&gt;
      &lt;/View&gt;
    );
  }
  </code></pre>