[Question] Access initial URL

[ctoLarsson]

Super simple question: How to access the initial load URL, like 123 or hello below? http://localhost:8081/vr/#!/123?q=hello

I tried with getInitialURL() from LinkingManager, but I suppose it's not setup to work with an initial web browser load?

For clarity: Documentation talks about modules Linking and History, but at least for linking out and pushState etc, I only got linking to work by using LinkingManager and History from NativeModules respectively.

import { NativeModules } from 'react-vr'; const LinkingManager = NativeModules.LinkingManager; const History = NativeModules.History; ... Maybe that is the problem?

Of course I could pass additional arguments to index.vr.bundle?platform=vr&dev=true from the index.html. But then how to access them in the React component? I saw you talked about an initialProps in one issue reply but I couldn't figure it out. Similarly, how to access that dev=true parameter in the component?

Such a simple task, but I can't figure it out and I would be most grateful for an advice :-)

[larrylin28]

Want to make clear I understand your requirement: First, if you follow the document, you should be able to get the initial load URL with LinkingManager:

componentDidMount() {
  var url = Linking.getInitialURL().then((url) => {
    if (url) {
      console.log('Initial url is: ' + url);
    }
  }).catch(err => console.error('An error occurred', err));
}

Second, reading your description, I think what you want to achieve is pass additional parameters to React Component? If so, initialProps would be most fit your requirement: In index.html, add initialProps in options, code will be something like:

     ReactVR.init(
        // When you're ready to deploy your app, update this line to point to
        // your compiled index.bundle.js
        '../index.vr.bundle?platform=vr&dev=true',
        // Attach it to the body tag
        document.body,
        {
          initialProps: {
            message: 'hello',
          }
        }
      );

The initial props will pass to your root view(the one you use with AppRegistry.registerComponent in index.vr.js)

  componentDidMount() {
    console.log(this.props.message);
  }

And you will get "hello".

[ctoLarsson]

Thank you so much larrylin28. The second part with the initialProps exactly did the trick. Question answered. It worked. I'm happy.

Regarding your Linking example:

This doesn't work (at least not on 1.4.0 which is what I tried)

import { Linking } from 'react-vr';
componentDidMount() {
  var url = Linking.getInitialURL().then((url) => {
    if (url) {
      console.log('Initial url is: ' + url);
    }
  }).catch(err => console.error('An error occurred', err));
}

Linking remains undefined so you get Cannot read property 'getInitialURL' of undefined. Maybe I'm using it wrong.

This renders, but it's not what it says in the documentation (and doesn't give the initial URL when on web) but can be used for pushState etc.

import { NativeModules } from 'react-vr';
componentDidMount() {
const LinkingManager = NativeModules.LinkingManager;
  var url = LinkingManager.getInitialURL().then((url) => {
    if (url) {
      console.log('Initial url is: ' + url);
    }
  }).catch(err => console.error('An error occurred', err));
}

Unless I'm doing an obvious mistake maybe update the documentation section on the Linking part to clearer explain how it's supposed to be used.

Cheers and many thanks again for answering my question so promptly and with such high quality. Cheers

[larrylin28]

I think you should directly import Linking, not import it from 'react-vr'

import Linking from 'Linking';

If you think the document is not clear enough and lead to misunderstanding, you can submit a pull request :-)

[ctoLarsson]

Many times thank you again Yidong for your prompt reply. What you suggest works in the react-cli environment but not when creating an NPM package (unless I include another copy of everything in the package).

NPM doesn't know where to find 'Linking' or 'History' since they are not defined in the module map and fails at that point.

After some work-around testing, this is the best I could come up with:

For Linking:

import {Linking} from 'react-native';
Linking.getInitialURL()

For History:

import { NativeModules } from 'react-vr'
const NativeHistory = NativeModules.History;
NativeHistory.pushState(...);

Probably there is a better way to use these modules also when creating NPM packages, but I can't figure it out.

Suggest review if Linking and History are exported as they should in the main files of react-vr, I think that's what is missing :-) If it's indeed missed, maybe reopen this one for tracking.