When I start this app that was right after Christmas. I didn’t start before so I got a 2 days timeframe for finish it. The first thing I wasn’t sure about what to make too. I just think about putting my streamingAppRedux to mobile.
I already know the Twitch api so that make my life easier working with this API.
Exponent is an XDE who help you to wrote React-Native code faster. How? They put some of the more use third libraries already in the app. Like they said in their video this is like Rails for React-Native.
Make life easier cause no need to open Xcode and Android Studio and let you focus on building your app. Another plus is the fact then you can send Exponent link to your friend and they can play with your app without passing by a store. Just need to download the Exponent app in Android or IOS and open your link with.
I really encourage you to try it.
So this app wasn’t really complicated. I just need to fetch some API endpoint and show them to the user. But because I never really touch something without try new stuff I build an infinite scroll “I never did it before in React-Native”.
The first thing I create the fetch action with the offset link for the Twitch API.
Here you can see nothing really complicated. Just pass the offset number from the front-end that’s it.
The reducer who handle this.
Here I just contact the old game’s array with the new array coming from the API.
My TopGames component
Here I found the method onEndReached in the React-Native API. With that I just make the function call my
paginateGames function and that’s it. My action calls the API and fetch the data. FulFilled my reducer with new games and my
ListView receive new props coming from my store. As you can see I have put a loading indicator for the footer so make a bit more UX for the user.
What is this other function in this component? This is a function who check if the user scrolls down or up. That let me show the
gamesFollow button or the scroll top button. I just check for the
contentOffset and let make that change on an event.
I make use of Redux-Persist for the first time. I really like this library and gonna use it in the future for everything related to LocalStorage or AsyncStorage.
I’m planning to maybe add features in the future like Auth with Twitch and make the user life chat directly from this little app. But because of this challenge, I cannot really lose time on all the features I want.
Hope you enjoy this little post.