React Native is great when things come together, but it a slog trying to get reacquainted with things when things don’t come together. During this sprint, my deliverables were implementing a screen which dynamically populated with a users saved wish lists. On selecting a saved wish list, it would then lead to a screen which was a shopping list for said wish list, populating dynamically the screen with the items from that wish list. On the outset, it was clear I was going to have to utilize two different Firestore collections, given how our database was structured. This was easy enough conceptually, but implementing it proved to deliver a variety of challenges.
To preface this, it’s been a while since I had to deal with React, and React Native being a new framework experience for me, these challenges I chalk up to being par for the course for someone getting re-familiarized with React.
First Challenge:
Getting used to how React Native renders it’s components was simple enough initially, and truth be told, I was impressed with how easy they make it to render a FlatList component, which was what I used. The first challenge arose when trying to make that dynamically generated component navigate to a new screen when pressed. Normally (what I eventually learned in trying to get this to work), what happens is that you could use useNavigate() as a hook to navigate to a new screen, but only if in a functional component. My problem was that I wanted to do this in a Class component, which is a no go in React Native. After reading through a bunch of documentation, I discovered that natively, Navigation exists on any screen component, which I was on. After some trial and error passing props.navigation, I eventually got it to redirect to the desired screen after selecting the rendered component.
Second Challenge:
Having a redirect wasn’t sufficient, the component (wish list) selected had to store the list of products, and save it to Async Storage which would be picked up by the other page which we were redirected to. Initially, I tried using useEffect and doing a Firestore collection call within my onPress handler, of course forgetting the lesson I had just learned prior, that you can’t call hooks in a Class component, also forgetting that useEffect was also a hook.
After sitting with it for a while, I just realized I could do a Firestore collection call when I also do the the initial call for the list of wish lists. I could save that result in a variable and just pass it down as a prop into my class component. Which is what I did. There were also a few minor challenges during these two main challenges that were overcome, but in the end it all worked out. The main underlying theme with these challenges was trying to figure out if my logic was wrong, or if it was syntactical errors. Needless to say, I’m happy with the results, and learned(and relearned) a bunch about React & React Native.
Until next time,
Andrew Vo
