Building Course Assist Part 23: Testing the app UI on different screen sizes
A couple of weeks ago I tested the Course Assist apps (Course Assist User and Course Assist Expert) on an iOS device (iPhone X) that had a screen way smaller than the Android device I have regularly been using to test the apps on. While doing this test I found that some of the UIs were broken, so as part of the testing phase, I decided to see how the Course Assist UI looks on different devices with different screen sizes and fix any broken UIs if found. In this article, I'll tell you about how I tested the Course Assist apps UIs. Let's dive in🏄🏽♂️
How I tested the UI on different screen sizes📱
Course Assist was built using React Native and Expo. There are 3 ways I know of testing a React Native app UI on different screen sizes:
Using a physical device: This involves getting different physical devices of different sizes and running your app on them.
Using a browser: This involves running the web version of your app which a React Native Expo app can do. Once the app is opened in a browser you go to developer tools which will open the developer menu where you can then adjust the screen size according to a list of different devices provided or you could create a custom device size.
Using an emulator: This involves running a device emulator on your computer. You can select a device of your choice with the screen dimensions you are looking for.
When testing the Course Assist apps I tried all methods but I only managed to properly use the 3rd method😅. I couldn't use the 1st because I unfortunately only have one device to test on and I wasn't able to get any other. The 2nd method failed because when I tried running the Course Assist apps in a browser I got a bunch of errors that honestly I did not have to time or patience to debug🙄 and thats why I settled on the 3rd method.
For the 3rd method I used a tablet as an emulator because despite picking a device whose real life physical dimensions were smaller than my regular device, the sizes on the screen sort of still looked the same and the UI didn't change. With the tablet I was able to mimic actual device sizes by changing the height and width of the outermost view tag in each respective page component. I tested the UI on all the pages of the apps and most of them were okay despite a few out of place objects here and there that I instantly fixed👌.
This article marks the end of the crucial testing phase, with it complete the Course Assist apps are now ready to be deployed to production. Thanks for reading and see you in the next one🙏.