This week I learned a lot about react native components, and how to properly lay things out on the the screen. Getting components laid out on the screen just right ended up being more trouble than I anticipated. I experimented with flex box styled views, and scroll view to figure out how I should go about styling the project overview screen. Ultimately, I decided not to use flex box because I found that it was not very flex-able (Ayyyy).

I initially implemented the project overview screen with a react native view with the “style” flex. Basically this automatically spaces components out on the phone screen. The problem with this is that I don’t know how much project information or directions I will need to display for different project screens. If the data was too large the screen would become overcrowded and the text would become messed up. I ended up forgoing flex in favor of wrapping a normal view in a scroll view. This lets me statically space components, such that a user could endless scroll down with their phone. I think this is the ideal set up for the project overview page.

Next week I will need to work with a statically sized table with pagination, I think for that screen, flex does make sense. Learning how and when to use the the different layout styles in react native definitely seems like an important skill, and I am glad this project is giving me an opportunity to do so. I definitely feel like I am learning the mobile developer ropes.

See you next time!