Add app icons

Add kastorCodeLogo.png, kastorCodeName.png, and logo.png
Add images.d.ts in types folder

HOOK/ADD:
  useKastorCode

COMPONENT/UPDATE:
  Button (add align items and justify content to center)

PAGE/UPDATE:
  Home (add app logo, GitHub button and KastorCode animations)

src/components/Button/index.tsx

@@ -24,8 +24,9 @@ function Button ({ onPress, text, style, translate = true } : iBUTTON_PROPS) {
     >
       <View
         style={[{
-          width: '100%', backgroundColor: '#ff033e', borderRadius: 3,
-          paddingVertical: 16, marginBottom: 20
+          width: '100%', alignItems: 'center', justifyContent: 'center',
+          backgroundColor: '#ff033e', borderRadius: 3, paddingVertical: 16,
+          marginBottom: 20
         }, style]}
       >
         <Text

src/hooks/index.ts

@@ -0,0 +1,6 @@
+import useKastorCode from './useKastorCode'
+
+
+export {
+  useKastorCode
+}

src/hooks/useKastorCode/index.tsx

@@ -0,0 +1,118 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { Animated, Easing, Modal, View } from 'react-native'
+
+import LOGO from '~/assets/images/kastorCodeLogo.png'
+
+import NAME from '~/assets/images/kastorCodeName.png'
+
+
+function useKastorCode () {
+  const animation = useRef(new Animated.Value(0)).current
+
+  const [show, setShow] = useState(false)
+
+
+  function runAnimations () {
+    setShow(true)
+  }
+
+
+  function runAnimationsNow () {
+    Animated.timing(animation, {
+      toValue: 1,
+      duration: 3000,
+      easing: Easing.linear,
+      useNativeDriver: false
+    })
+    .start(() => {
+      setShow(false)
+      animation.setValue(0)
+    })
+  }
+
+
+  function Component () {
+    return (
+      <Modal transparent={true}>
+        <Animated.View
+          style={{
+            flex: 1, alignItems: 'center', justifyContent: 'center',
+            backgroundColor: 'rgba(0,0,0,0.33)',
+            opacity: animation.interpolate({
+              inputRange: [0, 0.3, 0.7, 1], outputRange: [0, 1, 1, 0]
+            })
+          }}
+        >
+          <View style={{ marginBottom: 20 }}>
+            <Animated.Image
+              source={LOGO}
+              // @ts-ignore
+              tintColor='#301934'
+              style={{
+                resizeMode: 'contain',
+                height: animation.interpolate({
+                  inputRange: [0, 1], outputRange: [216 / 2, 216]
+                })
+              }}
+            />
+
+            <Animated.Image
+              source={LOGO}
+              // @ts-ignore
+              tintColor='#ff033e'
+              style={{
+                position: 'absolute', resizeMode: 'contain',
+                height: animation.interpolate({
+                  inputRange: [0, 1], outputRange: [216 / 2, 216]
+                })
+              }}
+            />
+          </View>
+
+          <View>
+            <Animated.Image
+              source={NAME}
+              // @ts-ignore
+              tintColor='#301934'
+              style={{
+                resizeMode: 'contain',
+                height: animation.interpolate({
+                  inputRange: [0, 1], outputRange: [33 / 2, 33]
+                })
+              }}
+            />
+
+            <Animated.Image
+              source={NAME}
+              // @ts-ignore
+              tintColor='#ff033e'
+              style={{
+                position: 'absolute', resizeMode: 'contain',
+                height: animation.interpolate({
+                  inputRange: [0, 1], outputRange: [33 / 2, 33]
+                })
+              }}
+            />
+          </View>
+        </Animated.View>
+      </Modal>
+    )
+  }
+
+
+  useEffect(() => {
+    if (show) {
+      runAnimationsNow()
+    }
+  }, [show])
+
+
+  return {
+    Component,
+    runAnimations,
+    show
+  }
+}
+
+
+export default useKastorCode

src/pages/Home/index.tsx

@@ -1,11 +1,20 @@
 import React, { useState, useEffect, useRef } from 'react'
-import { Animated, Easing, ScrollView } from 'react-native'
+import {
+  Animated, Easing, Image, Linking,
+  ScrollView, TouchableWithoutFeedback, useWindowDimensions, View
+} from 'react-native'
 import { useBackHandler } from '@react-native-community/hooks'
 
+import { useKastorCode } from '~/hooks'
+
 import PAGES, { iPAGES } from '~/pages'
 
 import { Background, Button, ButtonContainer, Title } from '~/components'
 
+import KASTORCODE_LOGO from '~/assets/images/kastorCodeLogo.png'
+
+import LOGO from '~/assets/images/logo.png'
+
 
 type PAGE = keyof iPAGES | null
 export type NAVIGATE = (to : PAGE) => void
@@ -34,15 +43,62 @@ function Home () {
 
 
   function PickPage () {
+    const { height } = useWindowDimensions()
+    const KastorCode = useKastorCode()
+
+
     return (
       <>
-      <Title text='testTflite' />
-      <Title text='chooseFunction' />
+      { KastorCode.show && <KastorCode.Component /> }
 
-      <ButtonContainer style={{ width: '70%', maxWidth: 400 }}>
-        { Object.keys(PAGES).map(page => (
-          <Button key={page} onPress={() => navigate(page)} text={page} />
-        )) }
+      <View
+        style={{
+          width: '100%', minHeight: height, alignItems: 'center',
+          justifyContent: 'flex-start'
+        }}
+      >
+        <TouchableWithoutFeedback
+          onPress={KastorCode.runAnimations}
+        >
+          <Image
+            source={LOGO}
+            style={{ resizeMode: 'contain', height: 64, marginBottom: 32 }}
+          />
+        </TouchableWithoutFeedback>
+
+        <Title text='testTflite' />
+        <Title text='chooseFunction' />
+
+        <ButtonContainer style={{ width: '70%', maxWidth: 400 }}>
+          { Object.keys(PAGES).map(page => (
+            <Button key={page} onPress={() => navigate(page)} text={page} />
+          )) }
+        </ButtonContainer>
+      </View>
+
+      <ButtonContainer
+        style={{
+          width: '80%', maxWidth: 400, flexDirection: 'row',
+          alignItems: 'center', justifyContent: 'space-between', marginVertical: 20
+        }}
+      >
+        <Button
+          onPress={() => Linking.openURL('https://github.com/kastorcode')}
+          text='GitHub'
+          translate={false}
+          style={{ paddingHorizontal: 32, marginBottom: 0 }}
+        />
+
+        <TouchableWithoutFeedback
+          onPress={KastorCode.runAnimations}
+        >
+          <Image
+            source={KASTORCODE_LOGO}
+            // @ts-ignore
+            tintColor='#ff033e'
+            style={{ resizeMode: 'contain', width: 77, height: 64 }}
+          />
+        </TouchableWithoutFeedback>
       </ButtonContainer>
       </>
     )

src/types/images.d.ts

@@ -0,0 +1 @@
+declare module '*.png'