It Begins

May 5th, 2020
react native

Orientation

After much anticipation, I'm finally getting to start working on the React Native project. This is going to be an integral part of our work for the time to come, much as the payments application has been up until this point. Of course, the payments application isn't going anywhere; I've done the majority of the work for the next version of the payments application with only some final tidbits to clean up to get that next version rocking and rolling, but it will be on the back burner for some time to come. As I said yesterday, I'm still waiting on a couple things to be changed on the backend before I can proceed any further with that version, so it was a good time to move on. I would have never even started this version if it weren't for the slow-up on the React Native project, but it was totally necessary. I'm glad I was able to give time to this next version, though, because when we get to a good stopping point on the React Native project, it won't take much work to get that fully deployed and we can have a pretty quick turnaround.

react native

As far as the React Native project goes, there were really good reasons for it to be delayed. Up until now, my cohort was the only one to work on this project at all, so it was really only meant for him to read. I know I have plenty of projects that, if I brought anyone else on board, they would be completely lost. If that was all, though, I would have been working on it last week or even the week before. My cohort decided rightfully to turn this into a fully responsive project, which can be pretty difficult with React Native. Since it's built for the mobile version, trying to create a version that works for the web is not easy and takes a lot of configuration. We could have built a completely separate project built just for the web, but he took the time to create a workflow that will help us greatly down the road. Now, everything works on every responsive level. If you need a component specifically for the web, we can create one with .web as a suffix and it will only be read by the web version. The most clever thing he did was to create a series of hooks to help us with building the different responsive versions, as far as design goes. Since React Native works with stylesheets, it's not as easy as just doing a media query in CSS. There is no CSS, so you have to find another way. The good thing, though, is it's just JavaScript and React, so there are definitely ways to working with it. He created a really nice system, and then I actually built a custom hook to manage all of that style in a separate file and import it with a single file, really simplifying the code.

react native

It took a little work to get up and running today, but after some configuration, I was off to the races. I even got an iPad to use for development purposes so my computer doesn't overheat from running a simulator. I now have 4 screens going at once, and it is awesome. We're using Framer, which is a great tool we are just barely tapping into, but it allows us to build wireframes and share them across the team. I've been asking for wireframes since I got here, and it really does help me. Right now, we have 4 main screens, and we're starting out by just creating all of the styling and different responsive versions for each screen. I finished one of the four screens today, and will be moving on to the second tomorrow. I love how everything in React Native is flex-based; I think I like flexbox a lot more than grid right now, but that's only because I'm not as comfortable with grid. I'm becoming pretty good with CSS, and I was able to mock up this screen with ease where I would have really struggled when I first got to this job. Taking those CSS courses has really helped me out. I can't wait to get all of the styling done for this project so we can start working on the functionality. I'm starting to get a pretty good idea about what exactly we're going to be handling in this project, and I think it's going to be a great opportunity to hone some skills with both React and React Native. I think tomorrow, I'll be able to finish this second screen and I'm hoping my cohort has at least one of the other screens done.

Until tomorrow!

Created by Sam Thoyre, © 2019