armadiazrino

HookState.js

Nov 28th, 2020
507
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useState } from 'react';
  2. import { StatusBar, StyleSheet, Text, TouchableOpacity, View } from "react-native"
  3.  
  4. const App = () => {
  5.     // TODO (1) Create score object state using useState
  6.     const [score, setScore] = useState(0) // default value is 0
  7.  
  8.     return (
  9.         <View style={styles.mainContainer}>
  10.             <StatusBar backgroundColor={"rgb(220,81,83)"} barStyle={"light-content"} />
  11.             <View style={styles.scoreContainer}>
  12.                 <Text style={styles.scoreTitleText}>{"Score"}</Text>
  13.                 {/* TODO (2) asign score state for our Text */}
  14.                 <Text style={styles.scoreValueText}>{score}</Text>
  15.             </View>
  16.             <View style={styles.buttonContainer}>
  17.                 <TouchableOpacity
  18.                     style={styles.buttonStyle}
  19.                     // TODO (3) call setScore function that we've created from useState
  20.                     // inside onPress to increase the score value
  21.                     onPress={() => setScore(score + 1)}>
  22.                     <Text style={styles.buttonText}>{"+"}</Text>
  23.                 </TouchableOpacity>
  24.                 <View style={styles.horizontalSeparator} />
  25.                 <TouchableOpacity
  26.                     style={styles.buttonStyle}
  27.                     // TODO (4) call setScore function that we've created from useState
  28.                     // inside onPress to decrease the score value
  29.                     onPress={() => setScore(score - 1)}>
  30.                     <Text style={styles.buttonText}>{"-"}</Text>
  31.                 </TouchableOpacity>
  32.             </View>
  33.         </View>
  34.     )
  35. }
  36.  
  37. const styles = StyleSheet.create({
  38.     mainContainer: {
  39.         flex: 1,
  40.         padding: 16,
  41.         backgroundColor: "rgb(240,81,83)"
  42.     },
  43.     scoreContainer: {
  44.         alignItems: "center"
  45.     },
  46.     scoreTitleText: {
  47.         textAlign: "center", fontSize: 64, color: "#FFF8DE"
  48.     },
  49.     scoreValueText: {
  50.         textAlign: "center", fontSize: 128, color: "#FFF8DE"
  51.     },
  52.     buttonContainer: {
  53.         flexDirection: "row", marginTop: 8,
  54.     },
  55.     buttonStyle: {
  56.         flex: 1, backgroundColor: "#FFF8DE", aspectRatio: 1.5, alignItems: "center", justifyContent: "center"
  57.     },
  58.     buttonText: {
  59.         fontSize: 64, color: "rgb(240,81,83)"
  60.     },
  61.     horizontalSeparator: {
  62.         marginHorizontal: 8
  63.     }
  64. })
  65.  
  66. export default App
  67.  
RAW Paste Data