Installation & First run

Clone the V-App template, install dependencies, and open the app in Expo Go.

The goal of this page is that you can run/see the V-App template on a mobile device with Expo Go and see the initial Home / Settings tabs.

1. Get the code

   Clone the V-App repository into a folder:

   # git will automatically make a new folder called V-App
   git clone https://github.com/IMS-coding-projects/V-App.git
   cd V-App
   

   Switch to the template branch, which contains the React Native + Expo project we prepared for you:

   git checkout template
   

   This branch is based on the React Native Reusables CLI minimal-uniwind template and has all React Native Reusables components pre-installed. More Information

2. Install dependencies

   Inside the repo, move into the Expo app folder:

   cd react-native-tutorial
   

   Then install the npm dependencies:

   npm install
   

   This will install Expo, React Native, Uniwind, React Native Reusables and all other libraries you need to run the app.

3. Start the development server

   Start the Expo development server:

   npm run dev
   

   This runs expo start under the hood and should show a QR code in your terminal. Make sure that your terminal window is big enough to see it’s output.

4. Open the app in Expo Go

   Install Expo Go from the iOS App Store or Google Play if you do not have it yet.

   Scan the QR Code below to download Expo Go

   

   Install Expo Go on Your Device

   • On iOS, open the Camera app and scan the QR code. Confirm the prompt to open in Expo Go.
   • On Android, open the Expo Go app and use the built-in QR scanner.

   After the Metro bundler finishes, you should see the V-App tutorial running on your phone with a bottom tab bar containing Home and Settings.

If the bundle does not load or Expo cannot establish a connection, check your device or app settings to ensure that they are not preventing you from accessing devices on your local area network (LAN). VPNs are a common cause of this issue.

You can format the codebase at any time by running:

npm run format

This uses Prettier to keep the code style consistent.

Task 1: Play Around

Once your app runs, make a small change in app/(tabs)/home.tsx (for example, change the text), save the file, and check on your device if it updated. Play with it a little to notice how the App works/behaves. Recall from the last React Native group that <View> is basically a <div> and <Text> basically a <p>. You might notice now that you are importing things now from @/components/ui/text and also have Tailwind styling(!?). Keep any questions and we will get back to those after the navigation!