A live quiz app where you compete in real time with an online opponent by answering questions.
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.
Thanks for reading! 😍
Leave any feedback or questions in the comments below.