Week 10

This week mainly consisted of finalizing step 10 and 11, and working on my final report.

Step 10 Continued

Why is the gridOutput not printing in the grid?

Notes:

  • All previous errors have been fixed.
  • No errors are shown, console.log(gridOutput) gives the correct output, but no update occurs.

Fix:

  • <Text style = {styles.state_text}> {gridArray[j][i] || ' '}</Text>
    • Added null check.

Step 11: Loading Screen

Using Lesson Seven of Project #1 of the Creating VR Experiences with React, I can create a home page that will load into the react 360 scene. I decided to use Bootstrap to help make the loading screen to look a bit more completed. I installed Bootstrap and tried to start up the application and got the following errors.

Errors:

● Validation Warning:

Unknown option “getProjectRoots” with value getProjectRoots() { return getRoots(); } was found. This is probably a typing mistake. Fixing it will remove this message.

● Validation Warning:

Unknown option “getBlacklistRE” with value getBlacklistRE() { return blacklist([ ]); } was found. This is probably a typing mistake. Fixing it will remove this message.

● Validation Warning:

Unknown option “getAssetExts” with value getAssetExts() { return [‘obj’, ‘mtl’]; } was found. This is probably a typing mistake. Fixing it will remove this message.

● Validation Warning:

Unknown option “getPlatforms” with value getPlatforms() { return [‘vr’]; } was found. This is probably a typing mistake. Fixing it will remove this message.

● Validation Warning:

Unknown option “getProvidesModuleNodeModules” with value getProvidesModuleNodeModules() { return [‘react-native’, ‘react-360’]; } was found. This is probably a typing mistake. Fixing it will remove this message.

  • client.js: Plugin/Preset files are not allowed to export objects, only functions. In C:\Users\Ny\Summer2020\node_modules\babel-preset-react-native\index.js

Attempts

  • Changed the var blacklist (as done before to fix an issue in downloading react 360) and added modules
    • Solution from https://github.com/facebook/react-360/issues/778 and https://github.com/facebook/react-native/issues/21093
  • Changed rn-cli.config file to metro.config
  • Re/installed some packages ranging from react@^16
  • Uninstalled Bootstrap

Unfortunately, I was unable to figure out why the errors were happening and I couldn’t get client.js to load afterward because of the following error. I decided to import bootstrap via style link references, and continue the website that way. Luckily, the errors occurred on a copy of the project, so the uploaded project of Simr remains bug free and runnable.

Using the course and bootstrap, I created a simple loading screen. I ran out of time to complete the loading screen from the mock-up.

My last week ended with a meeting with Professor Anderson and fellow student researcher Keanna Wright, we discussed future plans for the project and planned to meet again in the future.

Completed Tasks

  • Steps 10 & 11

Unfinished Tasks

  • Step 7
Written on August 3, 2020