React native quiz review

Question: 10 When the following program is run, the text is written with one word on each line vertically.

Use alignItems: 'center' inside the redBox style

Question: 13 What additional attribute(s) could be used inside the label style to alter the text?

fontFamily: "Times New Roman"

Question: 1 A TouchableHighlight component's primary purpose is

to be a wrapper for any other component to make that component react to presses or clicks

Question: 8 Which of the following should be written in the following program in place of //WHAT GOES HERE? to show an alert that tells the user what their food and drink order was?

'You have ordered a ' + this.state.foodOrder + ' and a ' + this.state.drinkOrder

Question: 11 If the user does not change any text inside the text boxes in the following program and hits the submit button, what will the alert say?

'Your order of 1T-shirt has been submitted.'

Question 2

Hello Mom Hello Dad Hello Grandma

Question: 2 What does a TouchableHighlight do? I. Makes a text component clickable II. Makes a view component clickable III. Highlights a button

I & II

Question: 12 On what line in the following code is the parent View container opened?

Line 8

Question: 6 What will happen when the button in the following code snippet is pressed?

Nothing.

A component is

The basic building blocks of a react native app

Question: 5 What will happen when the program below is run?

The program will not run because there is an error.

Question: 3 The following program is run:

The style attributes of justifyContent and alignItems must be assigned in the view container that holds all the individual view containers in order to affect their placement.

Question: 12 What alert will fire when the user enters '2 pm' into the box titled 'Time' and hits submit in the following program?

You have added 2 pm to your calendar at 1:00 pm

Question: 14 If we wanted the boxes in the layout below to line up horizontally instead of vertically and wanted them to be centered on the screen, which attributes would need to be included inside the parent view container style?

alignItems: 'center', justifyContent: 'center', flexDirection: 'row'

Question: 8 What attribute changes the font color of text?

color

Question: 14 Which of the following state variable names would be the best choice for a variable that holds the birthday of the user?

dateOfBirth

Question: 7 What attribute(s) are missing from the container stylesheet below in order to produce the following output?

flexDirection: 'row'

Question: 9 What is the difference between fontWeight and fontSize?

fontWeight controls the boldness of the text while fontSize controls how large or small each character is.

Question: 13 After the following program is run, the user types 'orange juice' into the text box titled 'Drink Order'. What does the screen look like after this is typed?

food order and drink order both orange juice

Question: 15 In order for the following program to be run with no errors, what components should be imported at the top of the program?

import React, { Component } from 'react'; import { AppRegistry, Text, View, TextInput, TouchableHighlight, StyleSheet } from 'react-native'; import { Constants } from 'expo';

What attribute do we need to set to 'center' in the styleSheet if we want the items inside to be centered vertically? (Assume flexDirection is set to column)

justifyContent

Question: 5 What line of code would need to be included on line 32 in order to create the following phone output?

justifyContent: 'center'

Question: 9 What will the screen initially look like when this program is run?

name box blank age box shows 12

Question: 10 What will be shown when the following program is run?

product is t shirt and the amount is 't-shirt'

Question: 6 What would be the output when the following code is run?

red box top right corner text middle centered

Question: 15 Which of the following text styles for redText is written correctly if we want the color of the text to be red with a size of 25?

redText: { color: 'red', fontFamily: 'Times New Roman', fontSize: 25, }

Question: 7 How should the following code snippet be altered to allow the View component with style 'touchableButton' to be clickable?

render() { return ( <View style={styles.container}> <TouchableHighlight> <View style={styles.touchableButton}> <Text style={styles.buttonText}> I AM A BUTTON! </Text> </View> </TouchableHighlight> </View> ); } } option 4

Question: 3 Which of the following will correctly set the initial state of the variables greeting and timeofDay?

state = { greeting: 'hello', timeOfDay: 'morning', }

Question: 11 What would be the output of the code below:

text below red box one line

Question: 4 The following app screen is created using the code snippet below:

top outlines box bottom outlines text