Challenges faced while developing a trivia game in react native.

Abdul Haseeb
Oct 26, 2018 · Unlisted
Image for post
Image for post

A live quiz app where you compete in real time with an online opponent by answering questions.

Bot

For a newly launched application, it’s really hard to get multiple online users all the time. To overcome the boredom of waiting for an opponent when no one else is online, we introduced bots — which simulates human-like gameplay. Each question retrieved from the server has a ‘difficulty’ parameter to understand the easiness of the question and the bot uses this parameter to decide whether it’s an easy question or not, and answers based on it.
Just like a human, the bot will take far less time to answer an easy question, may take a little longer time to answer difficult questions and may never choose the correct answer for the hard question.

We faced a lot of issues while developing this application using react native, some of them explained below. We thought we might share them with you, in case you run into the same issue as we did.

1. Double Tapp!

We spent a couple of hours to figure out this issue when we released the beta version. People tend to double click on ‘Play Now’ button which eventually calls an API twice. This API will connect with two online users at the same time and app crashes.
We fixed this issue by adding a debounce method from loadash. Debounce function prevents calling the same function in a limited time.

2. Sound Issues

The sound package we used in the game wouldn’t stop music when the application goes to background. Music playing on the background when the user using other apps like Gmail isn’t a good user experience, it’s really annoying for the user. This issue was mainly a bug/feature of that package.
So I used Appstate API to reduce the volume of music when the user moves into another application, and turn up the volume when the user is back in the app.

3. Handling Back Button

Handling back button with react native was a headache when I started building sample applications to learn React Native. Articles were less in number and existing solutions were very complicated by using redux.
In this application, I didn’t use redux to handle back button. React-navigation will give us the details of the current and previous screen, we manually managed backhandler API and managed hardware back button using custom eventListeners for hardware back button press.
Some of the cases where hardware back button is manually handled are :
1. Preventing the user from going back to the Login page from the Home Screen on pressing the hardware back button.
2. Exiting the application on a second back button press from Home Screen or Login Screen based on user’s authentication state

4. Network & Data Persistence

User’s data and score are stored in the server and every time user is on the home screen, the application must show the users latest score and progress. To reduce the number of API calls, the user data and game statistics are persisted in the device along with storing them in the backend, using redux-persist package.
And since the app needed a constant communication with the server, we also added the network info listener data to redux and supplied it all over the app. Whenever the network state goes to ‘disabled’ status, user is shown a toast warning them about the network.

5. Timer Pauses When The Game Run In Background

This was a serious issue. Look at this scenario, when a question appears on the screen and the user minimizes the application (note: timer pauses here), he googles it and finds out the correct answer. As the score is being counted by the seconds he used to answer a question, a user probably minimises the app at the very first moment of question appears. And the opponent had to wait for this user to submit it.

The issue was Javascript timer pauses when application minimise, We fixed this issue by background timer module.

This module won’t allow javascript timer to pause and allow the timer to run when even when applications are in the background state. This keeps the time between two users in sync and makes sure no one of the users has an advantage over the other one.


Thanks for reading! 😍
Leave any feedback or questions in the comments below.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store