In the last episode, we created some shapes, and we animated them. We saw how easy it is to animate things in React VR.

Today, we will create a menu, have some options, and choose one of them. The app will be a tour app. You can choose the city or place in the list and then, "travel" there.

Let's start by adding a city. New York. We will get a picture from NY. Searching on Flickr, we can find the Times Square equirectangular photo. Let's use that.

  <Pano source={asset("new_york.jpg")} />

We can change directly to the source of our Pano. And, boom! We are in New York!

We will not be using the shapes we created, the astronaut or the Animate button anymore. Let's remove all of that.

Handling the clicks

We will have a function to handle the click in the button. This function will get the location state and return the name of the picture.

  constructor(props){
    super(props);
    this.state = {location: "paris"}
  }

  getPhoto = () => {
    if(this.state.location == "new york"){
      return "new_york.jpg"
    }else if(this.state.location == "paris"){
      return "eiffel_tower.jpg"
    }
  }

Our state will have a location, and this will be a string. We will start our location with "paris". So, when we start the app, it will show the Eiffel Tower.

Ok, now we have an idea of how we will handle the clicks, let's create our Menu.

Creating the Menu

We will use VrButton and have a list of items vertically aligned. Let's add the two cities we have so far: "Paris" and "New York". They are not centered, but at least they are in the right place for the moment.

Let's now create a backgroundColor and have borders in our menu. For the moment, the border will be green and the menu will be red. We will improve the design later.

Let's align the text inside the view, and we will create a function called getbutton. This function will receive the name of the button and a onClick function.

   getButton = (name, clickFunction) => {
    return (
      <VrButton
        onClick={() => clickFunction()}
        style={{
          backgroundColor: "red",
          borderColor: "green",
          borderWidth: 0.1,
          width: 8,
          height: 1,
          color: "black",
          margin: 20,
          transform: [{ scale: 30 }, { translate: [0, 10, -30] }]
        }}
      >
        <Text
          style={{
            color: "black",
            textAlign: "center",
            fontSize: 0.7
          }}
        >
          {name}
        </Text>
      </VrButton>
    );
  };

The name will be used in the button name, and the clickFunction will be used in the onClick property from the VrButton.

Ok, now we have our menu. The function we will pass is a setState function, where we will update the location.

  {this.getButton("Paris", () => this.setState({ location: "paris" }))}
  {this.getButton("New York", () =>
    this.setState({ location: "new york" }))}

Let's try that now! If we click in New York, boom, we are in New York. And if we click in Paris, we go back to Paris. This is pretty cool!

Let's search on Flickr some other free image we can download from another city. Searching...

Ok, let's download this panorama image from São Paulo, specifically from Avenida Paulista. Let's search another place. Searching... Let's use this image from the London Eye.

Now, we just need to add the other buttons in our Menu. We also need to adjust the height in the Menu view.

<View
  style={{
    flex: 1,
    flexDirection: "column"
  }}
>
  {this.getButton("Paris", () => this.setState({ location: "paris" }))}
  {this.getButton("New York", () =>
    this.setState({ location: "new york" }))}
  {this.getButton("São Paulo", () =>
    this.setState({ location: "sao_paulo" }))}
  {this.getButton("London Eye", () =>
    this.setState({ location: "london_eye" }))}
</View>

Now our menu is created, with some cities image and the London Eye. Cool!

We can add these new pictures in our function getPhoto. In our function, we will add ifs for each case.

  getPhoto = () => {
    if (this.state.location == "new york") {
      return "new_york.jpg";
    } else if (this.state.location == "paris") {
      return "eiffel_tower.jpg";
    } else if (this.state.location == "london_eye") {
      return "london_eye.jpg";
    } else if (this.state.location == "sao_paulo") {
      return "sao_paulo.jpg";
    }
  };

Let's test what we just did! Reload the app, and if we click New York, we go to NY. If we click São Paulo, we go to São Paulo, London Eye....we go to the London Eye. And our app tour is done!

Improving the function getPhoto

Just to finish, we can do one more thing. Improve our getPhoto function. We can see we are using the state location. Our state contains the name of the picture. Except for New York, we are passing with a space, and for Paris, that we were passing Paris and our file name is eiffel_tower.jpg. So, what we will do is just make the state the same as the name of our files. And with this, we can use the same to look for the image. Let's do that!

Our function getPhoto will have one line now. We will use string interpolation to interpolate the this.state.location and end the string with .jpg.

  getPhoto = () => {
    return `${this.state.location}.jpg`;
  };

Now, let's test that. It works! We can keep walking through the cities using our menu.

Summary

Today we saw how to create a simple tour app, using React VR. We can choose the cities we want in a menu and then visualize the city using an equirectangular image. To build that, we used VrButton and Pano as React VR components.

Resources

Franzé Jr

Software Engineer with experience working in multi-cultural teams, Franze wants to help people when he can, and he is passionate about programming and Computer Science. Founder of RemoteMeetup.com where he can meet people all over the World. When Franze is not coding, he is studying something about programming.

  1. Comments for Creating a Travel App

You must login to comment

You May Also Like