What are React Native and Expo?
Expo is a mobile app for Android or iPhone that adds even more functionality and components to React Native projects. Expo is a collection of tools that lets you do even more with React Native apps, including run them on your own device. To learn more, check out the Expo Documentation.
Creating a Mobile App with the CodeHS IDE
You can create your first mobile app in the CodeHS Sandbox IDE by choosing React Native as your program type. There is starter code for a simple app with text, and you can find more examples in the Docs tab.
Running your Mobile App on your Phone
You can run your program on your phone using the Expo app and a QR code generated in the CodeHS code editor.
Generate a QR Code
To view a graphic program as a mobile app, scroll down in the right-hand pane of your code editor to find a QR code:
Use the QR Code to Run your Program
On Android, open the Expo app on your phone, click Scan QR Code and scan the QR code.
On iPhone, scan the QR code from your camera app.
After scanning the QR code, your graphics program will open as its own app within Expo, and you can now view and interact with it just like any other phone app!
If any mouse methods were specified in the graphics program, the program will respond to touches to the screen as it would respond to clicks in the browser.
If you make changes to your code, clicking Run Code in the editor will transfer changes to the mobile app version.
Sharing Your Mobile App
If you are finished working on a program and want to save or share it with others, click Share in the upper-right corner of the code editor to get a shareable link:
Publish creates a CodeHS URL and a QR code that can be shared with others. The link created by clicking Publish works even after you exit the program on CodeHS. You, and anyone you share the link with, can either go directly to the link in a mobile browser or scan the QR code below, and a page for the project will open. As long as you have the Expo app, you just need to click "Open with Expo" to view and interact with the program on your phone.
If you change your program in the editor and want to update this mobile app version, run your code again and re-scan the QR code.
Publishing Your App in the Apple App or Google Play Store
We have a guide here with full instructions for downloading the files and building, testing, and submitting your app. The process is challenging, as it requires using Terminal to run commands, but it's definitely rewarding if your app makes it to the App Store or Play Store!
Still have questions? Contact our team at firstname.lastname@example.org to learn more!