Pre-Merge

June 9th, 2020
flexbox

Flexbox Battle

My cohort and I have been working on a React Native application for a little over a month now. Actually, he was assigned the project back in December, before I joined the team, but didn't make much headway until we joined forces. Before I was assigned to the project, he was always getting pulled in different directions, and was never able to make much progress on it. A couple weeks before the project, he basically scrapped his work up until that point and started over from scratch, using a more responsive system. With this new system, we've been able to develop for mobile use, tablet use, and for the web, all at the same time. It takes a little extra work, but a lot less work than building 2 different applications, one for native and one for the web. In the React Native world, you can go 2 different ways: with Expo or without. If you go without, you have a little more flexibility to bring in whatever packages you might want, whereas if you go with Expo, you are limited to the Expo ecosystem. This used to be a big selling point for avoiding Expo, since the ecosystem was fairly limited. Things have changed in the world of Expo, and it has become a lot more inclusive. You aren't really limited to what you can do in Expo, anymore.

flexbox

When we started on the project, my cohort had an idea of Expo as being something that wasn't that useful to use. I had a different opinion, since I had just done a course that specifically used Expo, and I thought it was a pretty great tool to use. However, since he is more experienced than I am and is taking the lead on this project, I was happy to go along with his plan. As we progressed with the project, we ran into quite a few roadblocks trying to get the application to work with web versions. We ended up creating a lot of workarounds that weren't always optimal. At this point, my cohort started looking back into Expo, after hearing that it integrates with the web almost automatically. He started converting his version over to using Expo and is now fully integrated with it. We have been working on very different areas of the application, though, and since he started using Expo, I have been working on some other things. Because of that, my version is not using Expo and needs to be. We made a plan today to merge our 2 different versions of the application into one master version, and to get me using Expo on my side. I'm running into some situations where I need to bring in some 3rd party packages, and I really don't want to do that until I'm using Expo. Otherwise, my work would be in vain, for the most part.

flexbox

Today, I struggled with a flexbox container for far too long. On the settings screen, I have 2 main components. I have a navigation sidebar on the left, and then the content container on the right. When I set up the flex specifications, I couldn't get the overall container to span the entire height of the screen. I've dealt with this before, and typically throwing in "flex: 1" does the trick. However, try as I might, nothing seemed to be working. I would get it to work for the mobile version and think my pain was over, then switch over to the full screen version and realize it was now broken on that side. I struggled with this for about 2 hours, and ended up leaving without solving the problem. I think sometimes all it takes is walking away from a situation and coming back to it later for it to come together. I don't know what the solution for this silly issue is, but I think I'm just going to have to unwind all of the styling I've done on these components and start from scratch. From what I can tell, what's happening should not be happening, but I'm sure there's just a simple solution to the problem. Beyond this, I brought in a pretty large form on this settings screen so the representative can edit their profile information. Because of the system we have in place using React Hook Forms, getting this hooked up was pretty simple. In face, I also hooked up a couple of complex select inputs with React Hook Forms, one that needed to be watched, and this was also extremely easy. I love React Hook Forms, and I think it will only gain more popularity.

Until tomorrow!

Created by Sam Thoyre, © 2019