Create a Quiz App using React Native

Quiz is a good way to allow users to interact with your app and make your app interesting. In this article we will add quiz feature to a boiler plate membership app. This boiler plate app is built with React Native and Firebase and has the following features :

  1. Login
  2. Registration
  3. Email verification
  4. User Listing
  5. User’s Profile
  6. In App Messaging
  7. Skill based filter
  8. Distance based filter ( similar to tinder)

You can check the demo of this app here. You can check the features of this app here and if you want, you can get it from here.

To start with the quiz app, first we will add a navigation link to Playquiz screen. Below is the code of Playquiz screen :

In the above code, we are checking status of ‘quizFinish’ state. If status is false we render Quiz component. If status is true, we get scores and render score with a congrats message.

Now lets check the real meat of this app ie Quiz component. Below is the code of quiz.js

In the above code, first we are importing animated toggle button (that we create in our previous tutorial). Next, we are initializing constant ‘jsonData’ with questions, options and correct options of quiz. You will notice that we have maintained No-sql format for quiz data. So, if we want we can save it in firebase like database as well. We are using ‘qno’ and ‘score’ fields to keep track of question no. and scores respectively.  We convert the json data to array so that we can easily traverse thorough questions with every ‘next’ button touch. Current question, its options and correct option are initialized to state for rendering. State ‘countCheck’ is used to validate toggle button, so that user is not able to mark two options correct at the same time. Methods ‘prev’ and ‘next’ are used to navigate to previews and next question respectively. Even though we are not using previous question navigation, if you want you can use it. Method ‘answer’ is used to calculate the scores of the player. And finally, we are rendering questions with there options sequentially.

Things to do :

  1. You can modify the above code to add different types of quizzes and allow the users to choose a quiz before they play it.
  2. If you have the membership app you can sort users list according to the scores made by them. User with highest score will be listed first.
  3. Save the quiz data in firebase and render it by fetching it from firebase db.
  4. Add more animation effects and sound effects to make quiz interesting.

Video tutorial and Demo :

Leave a Reply

Your email address will not be published. Required fields are marked *