React Native Expo Weather App UI

WeatherApp.js

import * as React from "react";
import { View, Text, Dimensions, Image, StatusBar } from "react-native";
import { Ionicons } from "@expo/vector-icons";

const screens = [
  {
    text: "Its \nCold \nOutside",
    iconName: "md-snow",
    temp: "11",
    bg: "#16e5ff"
  },
  {
    text: "Its \nRaining \nNow",
    iconName: "md-rainy",
    temp: "18",
    bg: "#ff81e5"
  },
  {
    text: "Sunny \nDay \nWalk",
    iconName: "md-sunny",
    temp: "28",
    bg: "#ff8362"
  }
];

const showScreen = screens[0];

const ScreenHeight = Dimensions.get("window").height;
const ScreenWidth = Dimensions.get("window").width;

StatusBar.setBarStyle("light-content");
StatusBar.setBackgroundColor(showScreen.bg);

export default function App(props) {
  return (
    <View style={{ flex: 1 }}>
      <View
        style={{
          backgroundColor: showScreen.bg,
          paddingTop: ScreenHeight * 0.08,
          borderBottomRightRadius: 20,
          borderBottomLeftRadius: 20
        }}
      >
        <View
          style={{
            flexDirection: "row",
            paddingHorizontal: 36,
            justifyContent: "space-between"
          }}
        >
          <Text style={{ color: "#fff", fontSize: 36 }}>{showScreen.text}</Text>
          <Ionicons
            style={{ color: "#fff" }}
            name={showScreen.iconName}
            size={50}
          />
        </View>
        <View
          style={{
            width: 30,
            height: 3,
            backgroundColor: "#fff",
            marginLeft: 36,
            margin: 8,
            marginBottom: ScreenHeight * 0.05
          }}
        ></View>
        <View
          style={{
            alignItems: "center",
            width: ScreenWidth,
            justifyContent: "center",
            margin: 20
          }}
        >
          <Text style={{ color: "#fff", fontSize: 48 }}>
            {showScreen.temp}&deg;
          </Text>
        </View>
      </View>
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Image
          source={
            (showScreen.temp == "11" && require("./assets/images/cold.png")) ||
            (showScreen.temp == "18" && require("./assets/images/rainy.png")) ||
            (showScreen.temp == "28" && require("./assets/images/sunny.png"))
          }
          style={{
            width: ScreenWidth * 0.8,
            resizeMode: "contain"
          }}
        />
      </View>
    </View>
  );
}