Quiz Master App for Wireless Buzzer App

 Quiz Master App

For Wireless Buzzer App

Methods:

• Connect your same database of Wireless Buzzer App with Quiz Master App.

• Import db in App.js

• We created a state in our App class Component which will hold the names of the teams which have pressed the buzzer button in an array.

• The structure of our database. Every team had two keys - ‘isButtonPressed’ and ‘timestamp’. We will use ‘isButtonPressed’ to identify if the team has pressed the button. Lets make an arrow function 'showTeamRanks()' for doing this.  

• Now we will read the value stored inside teams from our database. We need to get a database reference first then we need to create a listener which triggers a callback() function whenever the function is triggered.

• We will create a variable 'teamList' and store the values of database in it. Then we call the ‘showTeamRanks’ function inside the ‘componentDidMount’ so that it is called when the app loads.

• We will console teamList to check that the data is stored in teamList  or not.

• Now, first we will create an array named teams for storing the names of teams who pressed the button. Then we will write 'for loop' and inside it, an 'if condition' to store the names of the teams who pressed the button.

• To sort the team’s array according to their timestamp, there is a function which can help us sort it. ‘array.sort()’ can sort an array according to the rule we define. It takes a comparison function as an argument. It runs the comparison function repeatedly over the elements of the array until the array is completely sorted. Then we will console 'teams' to check that the data is stored in it or not.

• We will store teamName also with teams array.

• We wrote the code to update the state.

• We used the '.map()’ function to iterate through the state array.

• We added some inline style or we can use stylesheets.

• Now we will create an AppHeader.js file in Components folder for heading.

• Import AppHeader in App.js.

• Then we we call AppHeader inside render function and at the same time, we will create a 'Reset' button so that we can reset the database for a new game.

• We will style 'Reset' button.

• Now, we will create a 'resetBt' function to reset the database whenever the user presses the 'Reset' button.

• We will call 'resetBt' function when the user presses 'Reset' button.

• When the user presses the button repeatedly, the team name comes on the quiz master app repeatedly. This bug happens because we keep reading from the database and pushing the teams to the ‘teams’ array without emptying the array ever. The array then gets written to the state of the component. To fix this bug, we simply empty the array every time, our code will always read from the database again and there will be no duplicity entered in the array.  

Video:

Component LifeCycle and State of React Native

 LifeCycle and State of React Native

*Please open this tab in desktop mode to see the codes below*

The two very important concepts in React Native are: 

• LifeCycle of a React Component
• State of a React Component

Every React Component rendered on the screen also has a lifecycle.

A React Component has the following stages in its lifecycle:

• Mounting: This is when the React Components are created and rendered on the screen.
• Updating: This is when the components are updated. For example, their prop values are changed. 
• Unmounting: This is when the components are removed from the screen. 

‘componentDidMount()’ and ‘render()’ are two functions which automatically get called at the Mounting Stage of a component.

We wrote a console log message inside ‘componentDidMount()’ function and ran the code.

Now, we are going to learn how the state of a component is declared and accessed. 

• State of a component is declared inside the constructor. 
• ‘super()’ is used in the constructor to inherit the properties of the Component Class.

We wrote a function which changes the state of the counter by incrementing the current counter state by 1.

We created a Button which calls this function.

We logged a message inside the ‘ComponentDidUpdate()’ to see if the component is updating.

We wrote code to increment the counter on its own every 1s or 1000 ms using the ‘setInterval()’ function to call the ‘incrementCounter’ every second. We used the function inside of ‘componentDidMount()’.

We changed the color of a button with a random color, every time the button is clicked.

Codes:

• App.js

Video:

Wireless Buzzer App (Part 4)

 Wireless Buzzer App

(Part 4)

Codes:

• Firebase setup and config.js
• SoundButton.js

Video:

Wireless Buzzer App (Part 3)

 Wireless Buzzer App

(Part 3)

*Please use desktop mode here in order to find link of codes*

Codes:

• App.js
• HomeScreen.js
• BuzzerScreen.js
• SoundButton.js

Video:

Wireless Buzzer App (Part II)

   Wireless Buzzer App

(Part II)

*Please use desktop mode here in order to find link of codes*

Codes:

App.js

Sound_Button.js

App_Header.js

Video:

Wireless Buzzer App (Part I)

 Wireless Buzzer App

(Part I)

Codes:

 import * as React from 'react';

import {View,Text,TouchableOpacity} from 'react-native';

import {Audio} from "expo-av";

class SoundButton extends React.Component{

  playSound = async () => {

    await Audio.Sound.createAsync(

      { uri: 'http://soundbible.com/mp3/Buzzer-SoundBible.com-188422102.mp3' },

      { shouldPlay: true }

    );

  };

  render(){

    return(

      <TouchableOpacity style={{

        marginLeft:20,

        borderWidth:1,

        borderColor:"black",

        alignItems:"center",

        justifyContent:"center",

        width:200,

        height:200,

        backgroundColor:"red",

        borderRadius:100

      }} onPress={this.playSound} >

      <Text style={{fontSize:20, fontWeight:"bold",fontStyle:"italic"}}>Press Me</Text>

      

      </TouchableOpacity>

    )

  }

}

export default class App extends React.Component{

  render(){

    return(

      <View style={{justifyContent:"center",alignItems:"center", marginTop:100}}>

      <SoundButton/>

      </View>

Video: