Initial Structure of a visionOS App Built with react-native-visionos

Since the previous post, I have started researching apps for callstack/react-native-visionos. This is the continuation. Here are my notes on the initial directory structure.

callstack/react-native-visionos is built by forking React Native, so the initial directory structure is similar. Some files needed for visionOS builds have been added or changed.

For reference, the previous post is below.

• Making and Playing with a Vision Pro App Using react-native-visionos (0) - Yori Hiroi Frontend

First, I reached the point where a Hello World style screen appears. I used the following command to create the project.

$ npx @callstack/react-native-visionos@latest init MyHello

At the moment, the following files and directories are generated.

.
├── .bundle
├── .eslintrc.js
├── .prettierrc.js
├── .watchmanconfig
├── App.tsx
├── Gemfile
├── README.md
├── __tests__/
├── android/
├── app.json
├── babel.config.js
├── index.js
├── ios/
├── jest.config.js
├── metro.config.js
├── package-lock.json
├── package.json
├── tsconfig.json
├── vendor/
└── visionos/

About Each File and Directory

I will write down the roles of the directories and files above. While doing this, I encountered a few libraries that I want to dig into later, so I added some to the Links of Interest in the right column of the top page.

• .bundle
• .eslintrc.js
• .prettierrc.js
• .watchmanconfig
• App.tsx
• Gemfile
• __tests__
• android and ios
• app.json
• babel.config.js
• index.js
• jest.config.js
• metro.config.js
• package.json
• tsconfig.json
• vendor
• visionos

That is all for this time. Starting next time, I will finally begin touching the UI components.