I Built an AR App That Puts a Car in Your Living Room

Build a real Augmented Reality app with React Native and Expo step by step 🚀
In this tutorial, we uses image tracking to detect a surface and render an interactive 3D car on top of it. Once the marker is recognized, users can interact with the car and control its movement directly in the AR scene.
This video is part of the React Native AR Series 🦁

📺 Previous Video – Expo Setup (Required)
How to Install Expo SDK 54 (2026) ✅ React Native Setup + Router + NativeWind
👉 https://www.youtube.com/watch?v=LWVm4r9XYwg

📦 Install ViroReact
Official documentation:
👉 https://viro-community.readme.io/docs/installation-instructions
Install dependency:
npm install --save @reactvision/react-viro

📦 Assets Used in This Project
Download the assets here:
👉 https://drive.google.com/drive/folders/1N1aD8qLWfKFn8NuG_rVJlHlwQLoExg9U

⚙️ Expo Configuration (app.json)
After build project, update your app.json with the required permissions for AR (camera, microphone, storage).
"ios": {
"supportsTablet": true,
"bundleIdentifier": "com.leonative.arcardriving",
"infoPlist": {
"NSCameraUsageDescription": "This app requires access to the camera for augmented reality experiences",
"NSMicrophoneUsageDescription": "This app requires access to the microphone for AR experiences",
"NSPhotoLibraryUsageDescription": "This app requires access to your photos to save AR captures",
"NSPhotoLibraryAddUsageDescription": "This app requires permission to save photos of your AR experiences"
}
},

"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "ffffff"
},
"edgeToEdgeEnabled": true,
"package": "com.leonative.arcardriving",
"permissions": [
"android.permission.CAMERA",
"android.permission.RECORD_AUDIO",
"android.permission.WRITE_EXTERNAL_STORAGE",
"android.permission.READ_EXTERNAL_STORAGE"
]
},

"plugins": [
"expo-router",
[
"@reactvision/react-viro",
{
"android": {
"xRMode": "AR"
},
"ios": {
"cameraUsagePermission": "$(PRODUCT_NAME) uses your camera for augmented reality experiences.",
"microphoneUsagePermission": "$(PRODUCT_NAME) uses your microphone for AR experiences.",
"photosPermission": "$(PRODUCT_NAME) needs access to your photos to save AR captures.",
"savephotosPermission": "$(PRODUCT_NAME) needs permission to save photos from your AR experiences."
}
}
]
]

⚙️ Generate native folders:
npx expo prebuild

Run on Android:
npx expo run:android --device

Run on iOS:
npx expo run:ios --device
📥 Complete Project Code
Download the full project here:
👉 https://leonative.gumroad.com/l/ar-car-driving

If this helped you:
👍 Like the video
💬 Comment your questions
🔔 Subscribe for more React Native & Mobile tutorials

#ReactNative #AugmentedReality #Expo #ViroReact #ARKit #ARCore #MobileDevelopment #JavaScript #iOS #Android #AppDevelopment

Song: Disfigure - Blank [NCS Release]
Music provided by NoCopyrightSounds
Free Download/Stream: http://ncs.io/blank
Watch: http://youtu.be/p7ZsBPK656s

Видео I Built an AR App That Puts a Car in Your Living Room канала LeoNative