Webview 问题 Injecting javascript in React Native

Question

I have this screen in a React Native using Expo app:

function DeviceVerification({navigation}) {
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
      flexDirection: 'column',
    }
  });

  const runFirst = `
    setTimeout(() => {
      window.sessionStorage.setItem('currentUser', ${userNameLogged});
      alert('Setting the values');
    }, 6000);
    window.localStorage.setItem('workgroup_code', ${authObj.workgroup_code});
    window.localStorage.setItem('accessor_id', ${authObj.mpv_device_id});
    window.document.cookie = ${loginCookie};
    true; // note: this is required, or you'll sometimes get silent failures
  `;

  return (
    <WebView 
      javaScriptEnabled={true}
      originWhitelist={['*']}
      style={styles.container}
      source={{ uri: 'htxxs://xxx.com/#/login/restriction/verify_device' }}
      sharedCookiesEnabled={true}
      injectedJavaScriptBeforeContentLoaded={runFirst}
      pullToRefreshEnabled={true}
    />
  );
}

I'm injecting some javascript as you can see injectedJavaScriptBeforeContentLoaded={runFirst} and the thing is that the localstorage part of the code works fine I can see the those being added correctly but the sessionStorage is not being set.

I never received an alert from this code:

setTimeout(() => {
          window.sessionStorage.setItem('currentUser', ${userNameLogged});
          alert('Setting the values');
        }, 6000);

I tried also window.sessionStorage.setItem('currentUser', ${userNameLogged}); without the setTimeout and it does not creates the sessionStorage item.

I will appreciate any help you can provide me.

@aleksandarZoric here is the evidence:

Answer 1

Try the following WebView props, notice the additional domStorageEnabled property.

<WebView
ref={ref => (this.webview = ref)}
  originWhitelist={['*']}
  style={styles.container}
  source={{ uri: 'htxxs://xxx.com/#/login/restriction/verify_device' }}
  sharedCookiesEnabled={true}
  injectedJavaScriptBeforeContentLoaded={runFirst}
  pullToRefreshEnabled={true}
  javaScriptEnabled={true}
  domStorageEnabled={true}
/>

Answer 2

This is what I did to make it work

const setSessionStorage = `(function() {
    window.sessionStorage.setItem('currentUser', '${userNameLogged}');
  })();`;

  handleWebViewNavigationStateChange = () => { 
    deviceVerificationWebView.injectJavaScript(setSessionStorage);
  }

  return (
    <WebView
      ref={ref => (deviceVerificationWebView = ref)}
      originWhitelist={['*']}
      style={styles.container}
      source={{ uri: 'htcps://xxx.com/#/login/restriction/verify_device' }}
      sharedCookiesEnabled={true}
      injectedJavaScriptBeforeContentLoaded={runFirst}
      javaScriptEnabled={true}
      pullToRefreshEnabled={true}
      domStorageEnabled={true}
      javaScriptCanOpenWindowsAutomatically={true}
      onNavigationStateChange={this.handleWebViewNavigationStateChange}
    />
  );

basically I need to use this listener onNavigationStateChange and then inject the code to change there the sessionStorage