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
  • A directory for the bundle command. It contains configuration files.
• .eslintrc.js
  • ESLint config for React Native.
• .prettierrc.js
  • Prettier can be used for formatting. Customize it as needed.
• .watchmanconfig
  • A configuration file for Watchman, a monitoring service made by Meta Platforms. I plan to research this someday.
• App.tsx
  • It looks like I can learn from React Fundamentals · React Native.
  • Since SwiftUI can also be written declaratively, I felt that the benefits of writing in JSX may have decreased compared with the past.
  • I plan to read through this again later.
• Gemfile
  • This is where some dependency-related environment setup came up. I think I would have had fewer stumbling blocks if I had known a little more about this area.
• __tests__
  • Tests using Jest can be written here. I may eventually do a post about writing various tests here.
• android and ios
  • Project files for Android and iOS can be defined here. For example, if you run an iOS build with $ yarn ios, the iPhone simulator launches and you can check the UI defined in App.tsx.
• app.json
  • This file is imported by index.js. Looking at various discussions, it seems that it can also be deleted. What is the purpose of app.json file? Is it safe to delete it? · Issue #1113 · react-native-community/cli
• babel.config.js
  • Babel configuration file. At the moment, it contains only the default settings. I will probably use it someday if something becomes necessary.
• index.js
  • The JavaScript entry point. Initially, it only specifies the app name.
• jest.config.js
  • Configuration file for the Jest test framework. In the initial state, only the react-native preset is specified.
• metro.config.js
  • metro.config.js appears to be configuration for Metro, the React Native bundler made by Meta Platforms. I say "appears" because I have never used Metro before. I will cover this bundler another day. Configuring Metro | Metro
• package.json
  • The scripts in package.json are worth checking. In addition to android and ios, there is a visionos command for building for visionOS.
• tsconfig.json
  • The various build configuration files and Pods files mentioned above are excluded.
• vendor
  • In the initial state, this contains Ruby used for iOS builds.
• visionos
  • This contains the project files for visionOS. I will also take a closer look at this later.

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