React native quiz app

The quiz source is a JSON object. You can use react-quiz-form to generate it. If you want to use your customized text, you can add appLocale into your quiz source. Below is the default one. Git github. Need private packages and team management tools? Features JSON-based input Quiz landing page showing title, synopsis and number of questions Quiz Input Validator Multiple answers with single correct answer Multiple answers with multiple correct answers Support text and photo answers Continue till answered correctly Show explainations when answered correctly or not Quiz result page at the end with the dropdown filtering all questions or only those you answered correctly or incorrectly Support custom result page Return quiz summary at the page Allow Instant feedback Allow retry until the answer is selected correctly Allow markdown in Question Allow Picture in Question Scoring System Installing npm i react-quiz-component Importing react-quiz-component import Quiz from 'react-quiz-component'; Defining Your Quiz Source The quiz source is a JSON object.

Keywords react reactjs react-quiz-component react-quiz quiz. Install npm i react-quiz-component Downloads Weekly Downloads Version 0. License MIT. Unpacked Size kB. Total Files Homepage github. Repository Git github. Last publish a month ago. Try on RunKit. Report a vulnerability. A quiz summary object will be returned to the function and users can use it to render its custom result page.Knowledge of Node. This also means your machine needs to have the React Native development environment.

Enable client events on your Pusher app so we can trigger events from the app itself. We will create a multi-player quiz app. Users will be given 10 multiple choice questions and they have to select the correct answer to each one as they are displayed on the screen.

When the user opens the app, they have to log in. This serves as their identification in the game:. The game starts when the first question is displayed on the screen. As soon as the user picks an option, either correct or wrong mark will be displayed next to the option they selected.

Once the user selects an option, they can no longer select another one. Users have 10 seconds to answer each question. Clone the repo and switch to the starter branch to save time in setting up the app and adding boilerplate code:. The starter branch already has the two pages set up. All the styles that the app will use are also included. So all we have to do is add the structure and logic. This is required by Pusher:.

Next, create a. Before we add the code for the actual app, we have to create the server first. This is where we add the code for creating the database and displaying the UI for creating quiz items. Inside, create an index.

react native quiz app

Next, add the code for creating the database. Note that this step is optional as I have already added the db. If you want to start anew, simply create an empty db. Next, add the route for displaying the UI for adding quiz items. Next, add the route where the form data will be submitted.

This has a simple validation where the length of each text field should not be less than one. Once the data is validated, we insert a new quiz item to the table:. Next, add the code for sending the questions.

This selects ten random rows from the table and sends them at an interval every 13 seconds. The users will only have ten seconds to answer each question, but we included an additional three seconds to cater for the latency delay in the network and in the app:. After all the questions have been sent, we send the top three users to all users who are currently subscribed to the quiz channel:. All it does is send each individual row from the table:. Next, add the route for incrementing user scores.

This finds the user with the specified username in the array of users and then increments their score:. This is especially true if there are thousands of users using the app at the same time. From there, you can increment their scores as usual. As mentioned earlier, the boilerplate code has already been set up so all we have to do is add the UI structure and the logic. When the user clicks on the login button, we authenticate them via Pusher and log them into the server.

We pass the Pusher reference, username and quiz channel as navigation params so we can also use it in the Quiz screen:. The Quiz screen is the main meat of the app.GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. If nothing happens, download GitHub Desktop and try again. If nothing happens, download Xcode and try again. If nothing happens, download the GitHub extension for Visual Studio and try again.

This app is a simple example about how to create a React Native app for a simple quiz game. You can find a post describing this app in detail here at my site. Skip to content. Dismiss Join GitHub today GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

react native quiz app

Sign up. Quiz App using React Native. JavaScript Branch: master. Find file. Sign in Sign up. Go back. Launching Xcode If nothing happens, download Xcode and try again. Latest commit Fetching latest commit…. You can find a post describing this app in detail here at my site Dependencies This app requires the next dependencies: react-native-sound for playing sound react-navigation to navigate between screens react-timer-mixin for timed operations License GNU General Public License v3.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Clean RN Project. Mar 24, First Release.

Mar 26, Initial commit.React Native is a JavaScript framework, designed for building genuinely native apps for platforms like iOS and Android. The concept of creating apps using only one paradigm for all platforms sounds a bit unbelievable. However, React Native, despite its immaturity, allows to accelerate the process of building apps across different platformsthanks to the likelihood of reusing most of the code between them.

React Native is a native version of the popular web library of the same name and its main purpose is to bring the power of React to native mobile apps development.

React Native components are pure, side-effect-free functions that return what the views look like at any point in time. The UI is rendered using actual native views, so the final user experience is not as bad as other solutions that simply render a web component inside a WebView. Facebook wanted to bring all the advantages of web development — such as quick iterations and having a single team develop the whole product — to mobile.

Quiz App React Native

That is how React Native was brought to life and leveraged in mobile app development for both iOS and Android apps. Both versions were created by the same team of developers. Facebook also made React Native open-source, with the idea that compatibility with other platforms like Windows or tvOS could be operated on by the development community, so stay tuned. Performance improvements: Events Dashboard startup is now twice as fast.

Most of the advances made were done at the framework level, which determines your React Native app will automatically benefit when transferring to the latest version of React Native app. Facebook Ads was the first React Native app for Android and, the first completely React Native based, a cross-platform app built in the company.

The framework seemed absolutely suitable for a lot of complex business logic required to accurately handle differences in ad formats, time zones, currencies, date formats, currency conventions, and so on, particularly that a big chunk of it was already drafted in JavaScript. From a design viewpoint, the interface is clean with intuitive UX and simple navigation. The animations and transitions are perfect; they do not feel unnatural or buggy at any point. The first thing you will notice is that the app is lightning fastregardless of the operations you want to perform; from checking the status of a current campaign to building a new one, all it needs is a second or two at most to navigate to the next level or access the data with ease.

Walmart has already proved its innovative attitude introducing Node. A few years later they also revised their mobile app into React Native.

Walmart managed to improve the performance of the app on both iOS and Android by using less resources and within shorter time span. With such big goals, the company needs to take bold moves that involve a higher risk in order to gain a competitive advantage.

That is why they always seek ways to improve customer experience by trying new technologies.

React Native

React Native allows for great performance, nearly identical to native apps, and extremely smooth animations. To develop the application, the company employed a unique mobile app development framework. Another advantage of React Native is that it automates code refreshes, accelerating the release of new product features.

Instead of recompiling, your app reloads instantly. Instagram accepted the challenge to integrate React Native into their existing native app beginning from the simplest view you can imagine the Push Notification view which was basically implemented as the WebView.

It did not require building navigation infrastructure, as UI was quite simple. The dev team at Instagram faced a few problems on the way, but they substantially improved developer velocity.

SoundCloud Pulse is an application for creators that helps them manage their accounts and keep their community humming. When the company started designing the second set of native apps, they faced a few obstacles. Therefore, an independent research team started to run user-testing sessions with React Native apps prototypes learn more: IT Team Augmentation.

Their experience with the framework was generally positive. Developers found it easier to work on a React Native-based application than on a native application. Moreover, they were capable of building the application by themselves without frequent input from specialized mobile developers.

Townske aims to be your travel inspiration city guide on your next trip. The app connects you with locals to get a list of their favorite places and creates a curated list of places to explore and experience as locals do. See more: Famous apps using electron. React Native is focused solely on building a mobile UI. The resulting UI is highly responsive and feels fluid thanks to asynchronous JavaScript interactions with the native environment.SudoBlock is a cross between Sudoku, jigsaw puzzles, and Tetris.

React Native only supports iOS and Android, but I used react-native-web for the browser, and react-native-windows for Windows desktop and phone. Unity supports many other platforms. However, people have started working on some game libraries for React Native, such as react-game-kit and react-native-game-engine. The built-in Animated library is great, and I also used react-native-animatable. I used a library to play sounds. I also wrote native code for ads and in-app purchases on Windows.

This is a no-brainer.

react native quiz app

No one uses Windows Phone and Microsoft have abandoned it. I wanted to explore and learn new things, so I decided to do it anyway. I enjoyed the process of installing Windows, working with Visual Studio, and writing some C. I also figured out how to write cross-platform npm scripts using scripty. Electron apps are notorious for being huge and using a lot of memory e. Slack and Spotify. They have to package and load an entire WebKit browser. React Native apps are much smaller and use far less memory, because they only need a JavaScript engine.

You can also use responsive design, so that a single codebase works on desktop, mobile, and the web. The only problem is that react-native-macos is unmaintained and out of date, so it would be great if a company sponsored development.

In practice, this is only true for extremely simple applications. At the very least, you must be prepared to fix some bugs in third-party libraries. I started contributing to react-native-admoband sent a pull request to allow multiple test devices. I also did a lot of work on react-native-blur.

When I first tried to use it, it was completely broken on Android, and there were lots of problems on iOS. It took a lot of work to get everything running. I could have just skipped the blur and used a darkened overlay, but I enjoyed the work and learned a lot.

React Native is a bit like jQuery, in that it smooths over a lot of quirks and inconsistencies and provides a consistent API. Android was particularly unstable. Not just React Native, but Android itself. When I was working with UIKit, I remember constantly fighting with things like layout, contraints, and font rendering.

I uncovered some actual bugs, and found long threads on the Apple forums that were being ignored. It was really nice to let React Native handle all of the rendering. Swift was also very unstable at the time, and Xcode upgrades took a lot of effort. My Obj-C code still compiles a year later on the latest version of Xcode.This is now possible thanks to the Create React App project, which was created by the team at Facebook.

Check out the demo here to see the quiz in action. Starting a new React project usually involves a lot of overhead that can be time consuming for anyone and straight up daunting to beginners. This allows you to jump into writing your code straight away. To get started make sure you have Node 4 or later installed on your machine.

Then to create your app, from the command line, run the following command in your preferred directory:. This will create a new directory named react-quiz inside the current directory, generate the initial project structure and install the dependencies.

Your app directory will now look something like this:. Feel free to take a moment to familiarise yourself with the current code. The page will reload automatically if you make any changes. You will also see any build errors and lint warnings in the console. And just like that we have a nice modern development environment setup! Now we can start creating the quiz. We all know how a quiz works, there are a list of questions, and each question has a few different options that map to the possible outcomes.

Our quiz has five questions, with three options to choose from per question. Then create a new directory named componentsand inside that create a new file named Question. Add the following code:. The most basic description of this pattern is that container components should be concerned with how things work, and presentational components should define how things look. Check out this article for a more detailed explanation. This very simple component is just displaying the question. The propTypes short for property types in React are used to assist developers, they define the type of prop and what props are required.

React will warn you when there is an invalid propType. First we need to import the component, open App. Here is what the JSX should now look like:. If you view the app in the browser the question should now be displayed. In the components folder, create a new file named QuestionCount. This is very similar to the previous component we created.The format of this file is simple.

A list of games representing each game theme and for each game a list of quizzes, every quiz including the possible options. The app requires two extra sound files to work. The way to link them to the final native apps is adding their references to the package. For this app, you will need to include the game data and the sounds so, add the next lines to the file:.

And every time you add remove or change assets like this sounds that require to be linked to the project nor images or fonts you need to execute:. The Data is stored on a json file. This component is the GameHelper. The helper keeps tracking of the selected theme, the actual quiz shown and the status for the answered quizzes.

Based on the result, will proceed informing the result Correct or Wrong and playing a sound. Once the sound ends, the modal pop up will hide and proceed to check if there are any pending quiz. You will find the complete source code at the Github repository here. Thank you for this tutorial.

React Native Checkbox Component Example

I am having some trouble have the questions advance to the next question. It seems to to stay on the same questions and answer after each click. Hi kiran you can check the code at GitHub. You can find the link is at the end of the post. Great article! Your email address will not be published. Save my name, email, and site URL in my browser for next time I post a comment.

Create a Quiz Application using React Native The objective for this post is to create a cross platform mobile quiz app using React Native. The Quiz App This app will: Allows you to choose a theme for the questions from a list Displays a brief screen related to the theme.

From the terminal execute: react-native init reactnativequizapp And wait until the process completed. Adding the Project Dependencies For this app will need: Sound Navigation First you need to install the npm package from your app directory: npm install --save react-native-sound npm install --save react-navigation And after this completed you need to link it to the iOS and Android projects using: react-native link This will configure to each project the required dependencies.

Linking Sounds The app requires two extra sound files to work. So execute: npm install -g react-native-asset And every time you add remove or change assets like this sounds that require to be linked to the project nor images or fonts you need to execute: react-native-asset Which will link the sounds to the iOS and Android project. The navigation The navigation flow will be: The actions starts at the GameListScreen displaying a list of game themes availables.

react native quiz app

Once s theme is selected, the app navigates to the GameBriefScreen displaying general information about the theme.


Comments

Add a Comment

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