install expo , we will use this to get started with the project the command is as follows
sudo npm i -g expo-cli
install expo client on your phone
install vs code , react native tools extension , react snippet and prettier extensions
update node
- npm cache clean -f
- npm install -g npm
- sudo npm install -g n
- the above command installs n. – which is the node version manager , use this to update node
- sudo n stable
- verify the version of node
expo-cli has a prerequisite on the node version , make sure the version you have is supported by expo-cli
expo init prjrntestapp
this will give you an option to select workflow , in this case select the blank workflow to start off with the most basic configuration
this will come up with a message stating your project is ready , you can cd into the folder and start vs code by typing code . in that directory
go to the terminal from vscode and type in
npm start
this should start the expo bundler and it will give options to run the app in ios , android or web .
start up xcode on your mac and open up simulator for iphone and run the same
from the terminal you can type expo start if you are disconnected , this should give you a screen like the one below
select i for open ios simulator , a one line display in the simulator with the same text as in app.js will be displayed here.
You can now modify the app.js and this should give you the initial screen
control-d and command -D in case you want to see the menu , in any case here is the first screen
next step is to run it in android simulator. , you do need android studio for the same , so install the same with the default standard options and that should include the simulator
make sure you can run adb android debugger from command line , modern mac os has the zsh shell so modifying the bash_profile file is not enough , you need to modify the zsh as well. Make sure you restart the terminal for the new profile settings to take effect before running adb
use avd manager. – android virtual device manager to create a new device to test the app on , select latest pixel with the play store installed to get one created
select the image and then it should build the device , select the play button under actions and it should bring up the emulated device
in the terminal in vs code where you have the expo running , select a for android and it should install and open up the expo client in the virtual device ..you should see something like this in the terminal
Logs for your project will appear below. Press Ctrl+C to exit.
› Opening on iOS…
› Opening exp://127.0.0.1:19000 on iPhone 12 Pro Max
iOS Bundling complete 16923ms
iOS Running app on iPhone 12 Pro Max
› Press ? │ show all commands
› Opening on iOS…
› Opening exp://127.0.0.1:19000 on iPhone 12 Pro Max
› Press ? │ show all commands
› Opening on Android…
› Opening exp://192.168.1.230:19000 on
› Press ? │ show all commands
Android Bundling complete 19493ms
Android Running app on Android SDK built for x86
you can press command + M to bring up the developer menu on the mac ( ctrl + m on windows )
to bring the app on your phone , click on the expo client ( make sure you have this downloaded from the app store ) , scan the QR code and it should bring up your app on the phone , it does require you to be on the same wireless network as your expo server.
you can shake the phone and it can bring up the developer menu