React Native - Set localStorage in WebView

Question

I would like to set localStorage in the WebView component before loading the page.

https://facebook.github.io/react-native/docs/webview

My use case for this is that my RN app would like to open a page on it's accompanying website. The website authenticates on load by checking for a token in localStorage. If the token isn't there they will be prompted to login. Seen as the user has already logged in on the app I would prefer it if they could avoid logging in again in the WebView.

Answer 1

You might have overcome the issue. If not here is my solution.

You can use injectedJavaScript property of WebView and add javascript code to add the token on page load.

Example code snippet.

1. My Custom Javascript code that i need to inject.

let myInjectedJs = `(function(){ let tk = window.localStorage.getItem('tokenKey');
      if(!tk || (tk && tk != '${token}')){
        window.localStorage.setItem('tokenKey', '${token}');
        window.location.reload();
      }
    })();`;

Code Explanation

Function is called as soon as loaded. Checks if tokenKey is already set. If not set we are setting it to the new token ${token} and reloading the page.

Note: We need to pass function as a string to injectedJavaScript in webview.

2. Using myInjectedJs in WebView.

<WebView
    ref={webView => { this.refWeb = webView; }}
    javaScriptEnabled={true}
    injectedJavaScript={myInjectedJs}
    ...

Hope this solves your problem.