Focusing on the project, I decided to put the courses on the back-burner. With my previously gained information and google searches, I was able to complete steps 4 & 5.

Step Four: Create Variable Panel, Center-Top

By using the same steps and knowledge to create the code panel, I created a variable panel with the variables given in mainExample.

Step Five: Add Grid Panel On Right

How do I create a grid?

Fix:

• I created ten view boxes within a view box (and this was repeated 10 times). After 100 lines of code to create the grid, I realized that I had to optimize my code. Following the statement made in one of the Udemy course, “Do not repeat any code,” I created an array grid_cols to create a map loop that would print the correct number of columns.

<View style={styles.grid_panel}>
      {grid_rows.map(row => (
        <View style>
          <View style = {styles.grid_fixed_ratio}/>
          <View style = {styles.grid_fixed_ratio}/>
          <View style = {styles.grid_fixed_ratio}/>
          <View style = {styles.grid_fixed_ratio}/>
          <View style = {styles.grid_fixed_ratio}/>
          <View style = {styles.grid_fixed_ratio}/>
          <View style = {styles.grid_fixed_ratio}/>
          <View style = {styles.grid_fixed_ratio}/>
          <View style = {styles.grid_fixed_ratio}/>
          <View style = {styles.grid_fixed_ratio}/>
  </View>
))}
</View>

This helped a lot, but I could optimize it more.

How do I optimize my code better?

Attempts:

• Created two constant integers to determine the grid’s column and row amount. How do I use the const to loop correctly?
• Turns out render() does not like loops inside of it, so I decided to create a separate class that handles the creation of the grid, and then called it during render() of GridPanel class. My attempt failed as the for loop needs to iterate and provide <View/>

Acquired Knowledge:

• render() + for loops

Completed Tasks:

• Steps 4 & 5
• Finished DREU Blog Post #3
• Final Report Started
• Tested App in Oculus

  Unfinished Tasks:

• Steps 6 - 11
• Advanced Javascript Concepts and VR Udemy courses
• Read assigned research papers