Create Native Modules to extend React 360 app functionality
Native Modules provide the ability for React 360 app code to call back into your runtime, and provide functionality that's only available in the main browser environment.
In this lesson we're going to learn how to create a TitleChanger module that will allow us to change the document title whenever we travel to a different place in our app
Instructor: [00:00] You would like to have a feature that whenever I travel to a different country, I would like to change the title of the place to say, "Welcome to Spain," "Welcome to Italy," and so on.
[00:08] Over here, we have the updated places array and each object inside of this array has a name, flag, and a panorama property. We're getting those over here in the flag method.
[00:18] I am going to pass in the name to change background method, get it over here as well. In order to change the title of the page, I am going to do document title equals welcome to plus name. After I save, in their first [inaudible] , we're going to have a problem.
[00:34] The problem is that as soon as I click on the flag, we're going to get a message, "Document is not defined." It is not defined because by default, the React 360 runs inside of web worker, and web workers do not have access to the DOM.
[00:46] In order to enhance our React 360 application with something that requires the DOM, we need to implement our value on native module. In order to do that, first, go to client.js.
[00:55] Next, import module from React 360 web. Next, we need to create a new class. I am going to call it a title changer. The title changer needs to extent the module that we'll import it from React 360.
[01:06] We need to specify constructor. This constructor is basically going to around the super method with the name of the class. I am going to do super title changer. Whatever is specified over here is going to be exposed to React 360 application.
[01:18] I am going to create a new method called change title. It's going to take titles and argument. I am going to do document title equals title.
[01:26] Next, we need to expose its native module to our React code. In order to do that, whenever we're creating a new React 360 instance, we can also pass in some custom options. Here, what we need to do is to pass in native modules. It takes an array. We're going to create a new title changer instance over here.
[01:43] I'll save that and go to index.js. Over here, import native modules from React 360. Next, we need to get our title changer module from all native modules. I am going to do title changer equals native modules to get the title changer module.
[01:59] Next, we need to remove this document title caller, and we're going to do title changer, change title, and then I am going to set the title to welcome to plus name. Let's see if it works.
[02:10] I am going to click on the flag of Spain. We see the title change to "Welcome to Spain." If I click on the flag of NASA, I am going to see the title change, "Welcome to space."
[02:18] There're a plenty of native modules already implemented for us. If I decide to log all of those, we're going to see our title changer module as well as useful stuff such as networking, location, or history.