new assignment state of the game 1
Create a React Native app that keeps track of 2 teams scores.
The page should have the following
- Score for team A
- Score for team B
- Button for Team A
- Button for Team B
When the button for Team A is clicked, the score should go up for Team A
When the button for Team B is clicked, the score should go up for Team B
- The App is required to use the state variable (look at React States for examples of the state variable)
Bonus +5
When a team gets to 10 points:
– Pop up the team name
– Tell how much they won by
– Clear the scores, start again
React States
You can follow along for the larger file here https://snack.expo.io/@ngreen/bmi (Links to an external site.)
So far our mobile apps have had fairly static (non changing data). It is possible to take input through various methods whether direct from a user via TextInput or through data changes on a server/cloud. Today we will look at the first options, having a user enter in information.
Textinput works much the way <input> did in HTML. You can see an example below
<TextInput
value={this.state.inputValueFT}
keyboardType = 'numeric'
onChangeText={this._handleTextChangeFT}
style={styles.myTextInput}
/>
style and value are clear based on what we learned in HTML and previous React Native components. We do have two new props here however.
keyboardType will change the soft virtual keyboard that appears when the user hits the box. If you only intend the user to inpit numbers then there is no reason to have a full keyboard displayed. You’ll notice often in apps you use, the best keyboard is not displayed for you. You can see a visual example of all the options for android and ios here
Some differences are small such as the default and email. email just makes sure the @ sign is on the keyboard and you do not need to go through the symbols button. For our example we use numeric since for BMI we only need numbers.
onChangeText is a new prop but mimics onChange from html <input> . When Text Changes it can call whatever function or code in in the value spot. In our Code we call a function that changes the State Variable that we will talk about below.
State:
There are two types of data that control a component: props and state. props are set by the parent and they are fixed throughout the lifetime of a component (immutable). For data that is going to change (mutable), we have to use state.
The State variable can be setup in the constructor of a component to have initial values. In our code to calculate BMI we set up three variables, height in feet, height in inches, and weight in lbs.
state = {
inputValueFT: 0,
inputValueIN: 0,
inputValueWT: 0
};
To access these pieces of data through the program we can call this.state.variablename. For instace when we have to do our final BMI calculation:
var bmi=0;
var ft2in=this.state.inputValueFT*12;
var totalHeight=Number(ft2in)+Number(this.state.inputValueFT);
bmi=703 * (this.state.inputValueWT/(totalHeight*totalHeight));
If we are outside of Javascript code we can access a state variable in {} such as {this.state/inputValueFT}
State variables are mutable and are meant to change. In order to change a value, you must call setState. You can see in the code we do this anytime a user changes the text within a TextInput
this.setState({ inputValueWT:inputValue });
setState can take a whole JSON formatted list of variables so it could be this.setState({var1:value1,var2:value2,etc})
If you change a variable that does not initially exist in the state, it will add it to the state variable so there is no need to initialize all variables.
You can see Docs related to TextInput here https://reactnative.dev/docs/textinput.html (Links to an external site.)
