Students can develop mobile apps using the CodeHS Sandbox IDE or Mobile Apps courses. Students can run their apps on their own mobile device, share their apps and even publish them to the app store!
What are React Native and Expo?
Students create mobile apps in CodeHS using React Native, a framework for creating mobile apps for iOS and Android by writing JavaScript code. React Native is the technology used to create apps including Facebook and Instagram, so there are near-limitless possibilities for the types of apps you can create. To learn more , check out the React Native Documentation.
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.
Download Expo
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
Both JavaScript graphics programs and React Native programs can be published for sharing as mobile apps using Expo.
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
It is possible to take either a Javascript graphics program or a React Native program and download the necessary files to turn it into an app either for iOS or Android. The process requires having a Mac and having an Apple Developer account to submit to the App Store or a Google Play Developer account to submit to the 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 hello@codehs.com to learn more!