Capture demo - videos or screenshot of your app in iOS Simulator— also in a NPM script in React Native

Ever need to send a client a video of their app in progress? Need to take a few screenshots for marketing? Here’s how.

Environment: Mac OS / Big Sur v11.2 / React Native v0.63

Run or launch your app in Simulator (for React Native = react-native run-ios )

For Screenshot

From Simulator:

1. While IOS simulator is selected, just press on your keyboard command + s this will take a screenshot of your simulator.

or go to File / Save Screen

More actions when you do command + s

You could right-click on the small screenshot and select your preferred option

From command line (aka Terminal)

1. Launch Terminal (or within your IDE Terminal window) or simply press command + spacebar then type terminal (Note: Location does not matter)

2. Run this xcrun simctl io booted screenshot <NAME YOUR FILE>.png you could also use .jpg(Note: Xcrun is a tool within Xcode part of the developer tools) more info here)

For Video

1. Launch Terminal (or within your IDE Terminal window) or simply press command + spacebar then type terminal (Note: Location (pwd) does not matter)
2. Run this
   xcrun simctl io booted recordVideo ~/Desktop/<NAME YOUR FILE>.mp4
   this will start recording your Simulator

Pedals is just what I decided to call the mp4

To stop it just press command + c

NPM script for Video

Within your package.json

1. Add this within the scripts block
   "video": "xcrun simctl io booted recordVideo ~/Desktop/<NAME YOUR FILE>--$(date + ‘Y_%M_%D_%I_%M_%p').mp4",

this will give you a unique name every time you save a video. the after the $ sign is just to add the date and time to your file name.

More info here:

https://help.apple.com/simulator/mac/current/#/devdefc2debe