armadiazrino

PlainUIRefractored.js

Nov 28th, 2020
494
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react';
  2. import { StatusBar, Text, View, TouchableOpacity, StyleSheet } from "react-native"
  3.  
  4. class App extends React.Component {
  5.     render() {
  6.         return (
  7.             <View style={styles.mainContainer}>
  8.                 <StatusBar backgroundColor={"rgb(220,81,83)"} barStyle={"light-content"} />
  9.                 <View style={styles.scoreContainer}>
  10.                     <Text style={styles.scoreTitleText}>{"Score"}</Text>
  11.                     <Text style={styles.scoreValueText}>{"0"}</Text>
  12.                 </View>
  13.                 <View style={styles.buttonContainer}>
  14.                     <TouchableOpacity
  15.                         style={styles.buttonStyle}>
  16.                         <Text style={styles.buttonText}>{"+"}</Text>
  17.                     </TouchableOpacity>
  18.                     <View style={styles.horizontalSeparator} />
  19.                     <TouchableOpacity
  20.                         style={styles.buttonStyle}>
  21.                         <Text style={styles.buttonText}>{"-"}</Text>
  22.                     </TouchableOpacity>
  23.                 </View>
  24.             </View>
  25.         )
  26.     }
  27. }
  28.  
  29. const styles = StyleSheet.create({
  30.     mainContainer: {
  31.         flex: 1,
  32.         padding: 16,
  33.         backgroundColor: "rgb(240,81,83)"
  34.     },
  35.     scoreContainer: {
  36.         alignItems: "center"
  37.     },
  38.     scoreTitleText: {
  39.         textAlign: "center", fontSize: 64, color: "#FFF8DE"
  40.     },
  41.     scoreValueText: {
  42.         textAlign: "center", fontSize: 128, color: "#FFF8DE"
  43.     },
  44.     buttonContainer: {
  45.         flexDirection: "row", marginTop: 8,
  46.     },
  47.     buttonStyle: {
  48.         flex: 1, backgroundColor: "#FFF8DE", aspectRatio: 1.5, alignItems: "center", justifyContent: "center"
  49.     },
  50.     buttonText: {
  51.         fontSize: 64, color: "rgb(240,81,83)"
  52.     },
  53.     horizontalSeparator: {
  54.         marginHorizontal: 8
  55.     }
  56. })
  57.  
  58. export default App
  59.  
RAW Paste Data