React Native Expo Covid19 UI

Covid19.js

import * as React from "react";
import { View, Text, StatusBar, Dimensions } from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { FlatList } from "react-native-gesture-handler";

const screenWidth = Dimensions.get("window").width;
const colors = {
  themeColor: "#ffc66a",
  white: "#fff",
  background: "#f4f6fc",
  greyish: "a5a5a5"
};
const symptoms = [
  {
    symptom: "Cold",
    icon: "snowflake",
    selected: true
  },
  {
    symptom: "Dry Cough",
    icon: "flash",
    selected: false
  },
  {
    symptom: "Fever",
    icon: "thermometer",
    selected: false
  },
  {
    symptom: "Breathing Difficulty",
    icon: "air-filter",
    selected: false
  }
];

const Symptom = ({ symptom, icon, selected }) => {
  return (
    <View
      style={{
        backgroundColor: selected ? colors.themeColor : colors.white,
        margin: 8,
        borderRadius: 20,
        paddingVertical: 20,
        paddingHorizontal: 24,
        width: (screenWidth - 64) / 2
      }}
    >
      <Text
        style={{
          fontSize: 20,
          fontWeight: "700",
          color: selected ? colors.white : colors.greyish
        }}
      >
        {symptom}
      </Text>
      <Text
        style={{
          fontSize: 16,
          marginVertical: 7,
          color: selected ? colors.white : colors.greyish
        }}
      >
        lorem ipsum dolor sit amet constrecteur bluh bluh
      </Text>
      <MaterialCommunityIcons
        name={icon}
        size={45}
        style={{
          alignSelf: "flex-end",
          color: selected ? colors.white : colors.themeColor
        }}
      />
    </View>
  );
};

export default function App(props) {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: colors.background,
        paddingHorizontal: 8
      }}
    >
      <StatusBar backgroundColor={colors.background} barStyle="dark-content" />
      <View
        style={{
          padding: 16,
          flexDirection: "row",
          justifyContent: "space-between"
        }}
      >
        <MaterialCommunityIcons name="text" size={30} />
        <MaterialCommunityIcons name="magnify" size={30} />
      </View>
      <View
        style={{
          padding: 16,
          flexDirection: "row",
          justifyContent: "space-between"
        }}
      >
        <View>
          <Text style={{ fontSize: 16 }}>COVID-19</Text>
          <Text style={{ fontSize: 20 }}>Symptoms</Text>
        </View>
        <MaterialCommunityIcons
          name="thermometer"
          size={45}
          style={{ color: colors.white, backgroundColor: colors.themeColor }}
        />
      </View>
      <View
        style={{
          borderTopWidth: 6,
          borderTopColor: colors.themeColor,
          borderRadius: 3,
          marginHorizontal: 16,
          width: 40,
          marginTop: -5
        }}
      />
      <View
        style={{
          paddingHorizontal: 8,
          paddingVertical: 30,
          backgroundColor: "fed132"
        }}
      >
        <FlatList
          style
          numColumns={2}
          data={symptoms}
          keyExtractor={item => item.symptom}
          renderItem={({ item }) => (
            <Symptom
              symptom={item.symptom}
              icon={item.icon}
              selected={item.selected}
            />
          )}
        />
      </View>
    </View>
  );
}

//That was all
//Please subscribe and like the video
//See you next week