Skip to main content
Version: 0.2.3

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:

React Native

note

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:

Expected output
❯ 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.

note

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.

Give us feedback