Notification.jsx

import React, { useEffect } from "react";
import {
  Text,
  View,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
  Image,
  Platform
} from "react-native";
import { AppLoading } from "expo";
import * as Font from "expo-font";
import Tabbar from "../../components/Tabbar";

const Notification = props => {
  useEffect(async () => {
    // await Font.loadAsync({
    //   CSChatThai: require("../../fonts/CSChatThai.ttf"),
    //   CSChatThaiUI: require("../../fonts/CSChatThaiUI.ttf")
    // });
  }, []);
  return (
    <View style={{ flex: 1 }}>
      {/* Logo */}
      <View
        style={{
          flex: 0.075,
          backgroundColor: "#0000A0",
          justifyContent: "center",
          alignItems: "center"
        }}
      >
        <Image
          source={require("../../images/wakey-way2.png")}
          style={{
            width: Platform.OS === "ios" ? 170 : 150,
            height: Platform.OS === "ios" ? 50 : 45
          }}
        />
      </View>
      {/* Logo */}
      {/* bar */}
      <View
        style={{
          flex: 0.09,
          backgroundColor: "#E30025",
          // borderWidth: 1,
          flexDirection: "row"
        }}
      >
        {/* With Default font */}
        <View style={{ flex: 1, alignItems: "center" }}>
          <Text
            style={{
              fontSize: 20,
              marginTop: Platform.OS === "ios" ? 12 : 10,
              // fontFamily: "CSChatThai",
              justifyContent: "center",
              alignItems: "center",
              color: "#FFFFFF"
            }}
          >
            Default Font
          </Text>
        </View>
        {/* With Custom font */}

        <View style={{ flex: 1, alignItems: "center" }}>
          <Text
            style={{
              fontSize: 20,
              marginTop: Platform.OS === "ios" ? 12 : 10,
              fontFamily: "CSChatThai",
              justifyContent: "center",
              alignItems: "center",
              color: "#FFFFFF"
            }}
          >
            CSChatThai (Custom Font)
          </Text>
        </View>
      </View>
      {/* bar */}

      <SafeAreaView
        style={{
          flexGrow: 1
          // backgroundColor: "yellow"
        }}
      >
        <View
          style={{
            flex: 1,
            justifyContent: "center",
            alignItems: "center"
          }}
        >
          <Text style={{ paddingVertical: 10 }}>Notification</Text>
          <ScrollView style={{ flex: 1 }}>
            <View
              style={{
                width: 300,
                height: Platform.OS === "ios" ? 300 : 284,
                borderWidth: 1,
                alignItems: "center"
              }}
            >
              <View style={{ flex: 10, borderWidth: 1, width: "100%" }}></View>
              <View style={{ flex: 1, borderWidth: 1, width: "100%" }}></View>
            </View>
          </ScrollView>

          <View
            style={{
              flex: 0.18,
              width: "100%",
              flexDirection: "row"
              // backgroundColor: "red"
            }}
          >
            <View
              style={{
                flex: 1
              }}
            >
              {/* box btn */}
              <View style={{ flex: 1 }}>
                <View
                  style={{
                    marginTop: Platform.OS === "ios" ? 5 : 5,
                    flexDirection: "row",
                    justifyContent: "space-around"
                  }}
                >
                  <View
                    style={{
                      // backgroundColor: "red",
                      marginTop: Platform.OS === "ios" ? 5 : 2
                    }}
                  >
                    <TouchableOpacity
                      activeOpacity={0.5}
                      onPress={() => {
                        props.navigation.navigate("Map");
                      }}
                    >
                      <Image
                        source={require("../../images/plus.png")}
                        style={{
                          height: 50,
                          width: 50,
                          marginLeft: Platform.OS === "ios" ? 10 : 10
                        }}
                      />
                      <View style={{}}>
                        <Text style={{ justifyContent: "center" }}>
                          เพิ่มจุดหมาย
                        </Text>
                      </View>
                    </TouchableOpacity>
                  </View>
                  <View
                    style={{
                      // backgroundColor: "red",
                      marginTop: Platform.OS === "ios" ? 5 : 2
                    }}
                  >
                    <TouchableOpacity
                      activeOpacity={0.5}
                      onPress={() => {
                        props.navigation.navigate("");
                      }}
                    >
                      <Image
                        source={require("../../images/add-friend.png")}
                        style={{
                          height: 50,
                          width: 50,
                          marginLeft: Platform.OS === "ios" ? 7 : 7
                        }}
                      />
                      <View style={{ marginTop: 4, justifyContent: "center" }}>
                        <Text style={{ marginLeft: 5 }}>เพิ่มเพื่อน</Text>
                      </View>
                    </TouchableOpacity>
                  </View>
                </View>
              </View>
            </View>
          </View>
        </View>
      </SafeAreaView>
      <View style={{ flex: 0.09 }}>
        <Tabbar navigation={props.navigation} col={"Notification"} />
      </View>
    </View>
  );
};

export default Notification;