Manual Environment Setup
In this tutorial, you will manually set up the build environment, create your first PlayTorch project, and run it in an emulator or on your phone.
Installation
PlayTorch is powered by PyTorch Mobile and React Native. Both are active and flourishing open source projects. The following dependencies are required:
- Java Development Kit (any of the following)
- Yarn
- Watchman
- Android Command Line Tools
- Android SDK
- Android SDK Manager
- Android Virtual Device Manager
- Android Emulator
- CocoaPods
The PlayTorch CLI currently does not support the Apple M1 chipset. However, there are instructions by the community for how to install React Native on an Apple M1 without Rosetta.
As a first step, let's follow their installation instructions to set up the development environment for Android and iOS.
Set up the React Native development environment
The React Native website has a very detailed step by step guide to install React Native on macOS, Windows, and Linux and for each of the two target OS Android and iOS.
Follow their installation instructions on: https://reactnative.dev/docs/environment-setup
Create a New Project
Now that we have set up the build environment, let's create a new PlayTorch project and run it in an emulator or on your device.
Initialize Your Project
For PlayTorch beta, we provide a React Native app template, packed with AI demos and practical examples. Use the npx react-native init
command to initialize your first PlayTorch project.
npx react-native init MyFirstProject --template react-native-template-pytorch-live
Behind the scenes, the tool created a new React Native project and configured the build tools for mobile development. The project contains on-device AI models and interactive examples that use them.
This is what you should see after the project is initialized:
❯ npx react-native init MyFirstProject --template react-native-template-pytorch-live
npx: installed 637 in 16.171s
###### ######
### #### #### ###
## ### ### ##
## #### ##
## #### ##
## ## ## ##
## ### ### ##
## ######################## ##
###### ### ### ######
### ## ## ## ## ###
### ## ### #### ### ## ###
## #### ######## #### ##
## ### ########## ### ##
## #### ######## #### ##
### ## ### #### ### ## ###
### ## ## ## ## ###
###### ### ### ######
## ######################## ##
## ### ### ##
## ## ## ##
## #### ##
## #### ##
## ### ### ##
### #### #### ###
###### ######
Welcome to React Native!
Learn once, write anywhere
✔ Downloading template
✔ Copying template
✔ Processing template
✔ Executing post init script
✔ Installing CocoaPods dependencies (this may take a few minutes)
Run instructions for Android:
• Have an Android emulator running (quickest way to get started), or a device connected.
• cd "/Users/raedle/Projects/MyFirstProject" && npx react-native run-android
Run instructions for iOS:
• cd "/Users/raedle/Projects/MyFirstProject" && npx react-native run-ios
- or -
• Open MyFirstProject/ios/MyFirstProject.xcworkspace in Xcode or run "xed -b ios"
• Hit the Run button
Run instructions for macOS:
• See https://aka.ms/ReactNativeGuideMacOS for the latest up-to-date instructions.
Run Your Project
We are almost there. Now let's navigate to the newly created PlayTorch project folder:
cd MyFirstProject
And run the PlayTorch project on Android:
npx react-native run-android
By default, the PlayTorch app will run in an emulator. You can also run it on your own phone which may improve performance. To run it on your phone, connect your phone to your computer and enable Android's developer mode.
On Android 4.1 and lower, the Developer options screen is available by default. On Android 4.2 and higher, you must enable this screen. To enable developer options, go to Settings > Developer options and tap the Build Number option 7 times.
More details are on the Android configure on-device developer options.
Welcome to PlayTorch
Start by trying out the various Examples in the app. When you are ready to experiment, take a look at the Toolbox demos.
PlayTorch is in beta. Your feedback will help us improve tremendously. Please file issues and share ideas on GitHub.
Show us what you've made with PlayTorch by tagging #playtorch in your social media posts.