Responsive UI across a range of smartphone sizes on both platforms (Android & IOS): Everyday more and more mobile devices are pushed into the market varying in sizes, screen resolution especially on the android platform. The need to build apps that would be suitable for each of those smartphones and by an extension their users is very important and is done by developers paying close attention to details, there are several ways to do this which include:

1. Using Percentage: Using percentage instead of absolute values gives the developers and advantage of having each of our elements take up minimal space. For example, if a view is to take only 10 % percent of the screen, then using percentage instead of absolute values will make sure that it will only cover up that much space on any platform that that piece of code is run.
2. Minimizing the use of height and width properties: When building mobile apps, properties like height and width are very crucial to reproducing pixel perfect designs, however there is a downside to this as whatever height and/or width is given to an element will remain absolute across all platforms i.e if I give an element an height and width of 100, even if my code was run on 50% bigger screen, the height and width of that element will always be 100. The use of padding and/or margin would be more effective to control height and width of an element since whatever platform or screen size the code is run, it would always use padding maintain the size of the element.
3. Platform Detection: We can use platform detection to render elements based on what platform the code is being run. This is very useful to accommodate options and adjust the code for better responsiveness on all platforms.
4. Using Flexbox: Using flexbox for layout provides a method for layering out items for horizontally or vertically, the size and position of items are adjusted based on how they fit on the axis.
5. Screen Dimensions: The Dimensions API allows us to get the width and height of the screen easily and this can in turn be used to build responsive UI by writing code based on the conditions of the height and width of the device. With the introduction of React Hooks, the “useWindowDimensions” is the recommended way to go in order to get screen dimensions because it automatically updates the width and height of the screen when the screen changes without the need for even listeners.
6. Uniform set of values for margin and padding: Having a distinct set of values for spacing elements gives you an advantage of being able to make changes to the entire application through one point and give all elements symmetry. 7. Device Screen Orientation: To implement responsive UI, we have to take into account what happens in every scenario in which our application is being used, one scenario can be what happens to our application when the orientation of the device is being changed. To make sure our code doesn’t break, or the UI is misrepresented when the device is rotated from portrait to landscape mode, we can use “Hooks” to create effective and efficient logic that would modify styles based on the device orientation.
7. Image Scaling: The image component in react native provides us with an option of passing an array of “sourceImage” objects that includes source, width, and height of the objects. This will give the component the flexibility of deciding which image to use depending on its container size.
8. Font Scaling: Although font sizes are scaled automatically based on device’s pixel density to maintain maximum responsiveness, we can optimize this further for all platforms on which the code can be run. A section of text will look more crowded in a component if it is covering 50% of a small screen whereas the same text will look more spaced out in the same component on a larger screen. “PixelRatio” will give us access to a device’s pixel density for scaling. The “getFontScale” method gives some insights to the user’s preference by returning the scaling factor for font sizes which is the ration that is used to calculate the absolute font size, so any element that heavily depend on this method should undergo some calculations.

State Management (Client Side): There are several ways and various libraries to approach client-side state management which includes but is not limited to useState hook, useContext, Redux, react-native-async storage, HookState, Easy Peasy, Mobx, Recoil, e.t.c. I have been using the backdrop IOS mobile application for about a week and will be referring to it as a case study, I think the most preferable state management tool for client-side persistence, data and UI syncing is Redux. The major reason I would use redux in developing the backdrop application is because redux would allow for state management of the application to be done in a single place and keep changes on the app more predictable and traceable thus making debugging easier for anyone who looks at the code. Another reason to use redux is that redux is strict about how code should be organized, this makes it easier for anyone with knowledge of how redux works to understand the structure of how and redux application works thereby making it easier to maintain. It is also easier to test redux apps as functions are used to change the state of pure functions. Redux also offers state persistence which can be used to persist some of the application’s state to local storage and restore even after a refresh. In the code challenge given for this application, I used react-native-async-storage since it was a smaller project and the data being cached locally was not cumbersome at all.

State Management (Server Side): Redux can also be used for server-side rendering. With it we can handle the initial rendering of the app by sending the state of an app to the server along with its response to the server request. The required components are then rendered and sent to the clients.

Important Optimizations and Architecture Relevant to the Backdrop App: Having used the backdrop IOS app for a few days now, the core tech of the application is very well built and implemented. If asked to make suggestions/optimizations I would work on the “add backdrop” screen. Right now, users can add new backdrops into the app by clicking on the “+” button which bring up a screen to select pictures already saved in the user’s gallery. This would mean that a user would have to open the native camera application on their devices, take a picture, save said picture and then open the backdrop app so they can select the picture and upload it as a backdrop. I think this can be optimized by making the “+” button open the device’s camera within the backdrop app which can then be used to take an instant backrop to be uploaded immediately, the option to choose an image from the user’s gallery will remain and will give the user more flexibility for posting a backdrop as well as keep the user on the backdrop app for as long as possible.