EXPO 37. expo-Fonts. React-navigation for header and drawer

Author: GuyAvraham

.gitignore

@@ -1,9 +1,16 @@
 node_modules/**/*
 .expo/*
-.idea
 npm-debug.*
 *.jks
+*.p8
 *.p12
 *.key
 *.mobileprovision
-env.js
+*.orig.*
+web-build/
+web-report/
+env.*
+app.json
+
+# macOS
+.DS_Store

App.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import { Video } from "expo-av";
+
+export default function Background(props) {
+  let source = require("../assets/back-blur-3.mp4");
+  return (
+    <View style={styles.container}>
+      <Video
+        source={source}
+        rate={1.0}
+        volume={1.0}
+        isMuted={false}
+        resizeMode="cover"
+        shouldPlay
+        isLooping
+        style={styles.backgroundVideo}
+      />
+      {props.children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    // marginTop: 50,
+    backgroundColor: "transparent"
+    // alignItems: "stretch",
+    // justifyContent: "space-between"
+  },
+  baseText: {},
+  backgroundVideo: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    backgroundColor: "transparent"
+  }
+});

Components/Background.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { StyleSheet, Dimensions, Image } from "react-native";
+import MapView, { Marker, PROVIDER_GOOGLE } from "react-native-maps";
+
+const BlueFlagImg = require("../assets/navPage/flag-pink.png");
+const { width, height } = Dimensions.get("window");
+const ASPECT_RATIO = width / height;
+
+const region = {
+  latitude: 31.99246,
+  longitude: 34.76881,
+  latitudeDelta: 0.01,
+  longitudeDelta: 0.01 * ASPECT_RATIO
+};
+
+function CustomMap() {
+  return (
+    <MapView
+      provider={PROVIDER_GOOGLE}
+      region={region}
+      style={{
+        ...StyleSheet.absoluteFillObject
+      }}
+    >
+      <Marker
+        coordinate={region}
+        title="KB-PURE"
+        description="KB-PURE"
+      >
+        <Image
+          source={BlueFlagImg}
+          resizeMode="contain"
+          style={{width: 100, height: 100}}
+        />
+      </Marker>
+    </MapView>
+  );
+}
+
+export default CustomMap;

Components/CustomMap.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Text, StyleSheet } from "react-native";
+import { RFPercentage } from "react-native-responsive-fontsize";
+
+const KBText = props => (
+  <Text adjustsFontSizeToFit {...props} style={[styles.baseText, props.style]}>
+    {props.children}
+  </Text>
+);
+
+const styles = StyleSheet.create({
+  baseText: {
+    fontFamily: "heb-open-sans-regular",
+    fontSize: RFPercentage(2.7),
+    textAlign: "center"
+  }
+});
+
+export default KBText;

Components/KBText.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+import { RFPercentage } from "react-native-responsive-fontsize";
+import KBText from "./KBText";
+
+const KBTitle = props => (
+  <KBText {...props} style={[styles.baseTitle, props.style]}>
+    {props.children}
+  </KBText>
+);
+
+const styles = StyleSheet.create({
+  baseTitle: {
+    fontFamily: "heb-open-sans-bold",
+    fontSize: RFPercentage(3),
+    textAlign: "center"
+  }
+});
+
+export default KBTitle;

Components/KBTitle.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from "react";
+import { Image } from "react-native";
+import { AppLoading } from "expo";
+import { Asset } from "expo-asset";
+import * as Font from "expo-font";
+import { FontAwesome, Ionicons } from "@expo/vector-icons";
+
+function cacheAssetsAsync({ images = [], fonts = [] }) {
+  return Promise.all([...cacheImages(images), ...cacheFonts(fonts)]);
+}
+
+function cacheImages(images) {
+  return images.map(image => {
+    if (typeof image === "string") {
+      return Image.prefetch(image);
+    } else {
+      return Asset.fromModule(image).downloadAsync();
+    }
+  });
+}
+
+function cacheFonts(fonts) {
+  return fonts.map(font => Font.loadAsync(font));
+}
+
+function LoadAssets(props) {
+  const [isReady, setReady] = useState(false);
+
+  useEffect(() => {
+    async function _cache() {
+      try {
+        await cacheAssetsAsync({
+          images: [
+            require("../assets/images/logo-large.png"),
+            require("../assets/images/user.png"),
+            require("../assets/back-blur-3.mp4"),
+            require("../assets/kb-icon.png"),
+            require("../assets/hamburger.png"),
+            require("../assets/navPage/flag-blue.png"),
+            require("../assets/navPage/flag-pink.png"),
+            require("../assets/navPage/waze.png"),
+          ],
+          fonts: [
+            FontAwesome.font,
+            Ionicons.font,
+            {
+              "open-sans-bold": require("../assets/Fonts/OpenSans/English/OpenSans-Bold.ttf"),
+              "open-sans-regular": require("../assets/Fonts/OpenSans/English/OpenSans-Regular.ttf"),
+              "open-sans-light": require("../assets/Fonts/OpenSans/English/OpenSans-Light.ttf"),
+
+              "heb-open-sans-bold": require("../assets/Fonts/OpenSans/Hebrew/OpenSansHebrew-Bold.ttf"),
+              "heb-open-sans-regular": require("../assets/Fonts/OpenSans/Hebrew/OpenSansHebrew-Regular.ttf"),
+              "heb-open-sans-light": require("../assets/Fonts/OpenSans/Hebrew/OpenSansHebrew-Light.ttf"),
+
+              "heb-condense-open-sans-bold": require("../assets/Fonts/OpenSans/HebrewCondensed/OpenSansHebrewCondensed-Bold.ttf"),
+              "heb-condense-open-sans-regular": require("../assets/Fonts/OpenSans/HebrewCondensed/OpenSansHebrewCondensed-Regular.ttf"),
+              "heb-condense-open-sans-light": require("../assets/Fonts/OpenSans/HebrewCondensed/OpenSansHebrewCondensed-Light.ttf"),
+            }
+          ]
+        });
+      } catch (e) {
+        console.warn(
+          "There was an error caching assets (see: main.js), perhaps due to a " +
+            "network timeout, so we skipped caching. Reload the app to try again."
+        );
+        console.log(e.message);
+      } finally {
+        setReady(true);
+      }
+    }
+
+    _cache()
+    return () => {};
+  }, []);
+
+  return isReady ? props.children : <AppLoading/>;
+}
+
+export default LoadAssets;

Components/LoadAssets.tsx

@@ -0,0 +1,24 @@
+import { Image, StyleSheet, TouchableOpacity, Dimensions } from "react-native";
+import React from "react";
+
+const Logo = props => (
+  <TouchableOpacity style={props.style} onPress={props.onPress}>
+    <Image
+      source={require("../assets/images/logo-large.png")}
+      resizeMode="contain"
+      style={styles.logo}
+    />
+  </TouchableOpacity>
+);
+
+const deviceWidth = Dimensions.get("window").width;
+
+const styles = StyleSheet.create({
+  logo: {
+    height: undefined,
+    width: deviceWidth / 2.8,
+    aspectRatio: 1,
+  }
+});
+
+export default Logo;

Components/Logo.tsx

@@ -0,0 +1,14 @@
+import React, { useEffect } from "react";
+
+import { useStateValue } from "../Utils/State";
+
+function Logout() {
+  const [state, dispatch] = useStateValue();
+  console.log("*** state", state);
+  console.log("*** dispatch", dispatch);
+
+  useEffect(() => {
+  }, []);
+  return null;
+}
+export default Logout;

Components/Logout.tsx

@@ -1,36 +1,38 @@
-import React, { Component } from "react";
-import { StyleSheet, TouchableOpacity, Text } from "react-native";
+import React from "react";
+import { StyleSheet} from "react-native";
+import ButtonSpinner from 'react-native-button-spinner';
+import KBTitle from "./KBTitle";
 
 function MaterialButtonDark(props) {
   return (
-    <TouchableOpacity style={[styles.container, props.style]} onPress={props.onPress}>
-      <Text style={styles.caption}>{props.text1 || "BUTTON"}</Text>
-    </TouchableOpacity>
+    <ButtonSpinner disabled={false} style={{...styles.container, ...props.style}} onPress={props.onPress}>
+      <KBTitle style={styles.caption}>{props.text1}</KBTitle>
+    </ButtonSpinner>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     backgroundColor: "#212121",
+    maxHeight: 100,
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
     paddingRight: 16,
     paddingLeft: 16,
     elevation: 2,
     minWidth: 88,
-    borderRadius: 2,
+    borderRadius: 20,
     shadowOffset: {
       height: 1,
       width: 0
     },
     shadowColor: "#000",
     shadowOpacity: 0.35,
-    shadowRadius: 5
+    shadowRadius: 50,
   },
   caption: {
     color: "#fff",
-    fontSize: 30,
   }
 });
 

components/MaterialButtonDark.js renamed to Components/MaterialButtonDark.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import KBTitle from "./KBTitle";
+import {translated} from "../Utils/Localization";
+
+function Top10(props) {
+  return (
+    <KBTitle style={{}}>
+      {translated("PersonalPage.Top10")}
+    </KBTitle>
+  )
+}
+
+export default Top10;