feat: implemented github workflow and eas dev build

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true

.eslintrc.js

@@ -0,0 +1,5 @@
+// https://docs.expo.dev/guides/using-eslint/
+module.exports = {
+  extends: 'expo',
+  ignorePatterns: ['/dist/*'],
+};

.gitattributes

@@ -0,0 +1,4 @@
+/.yarn/**            linguist-vendored
+/.yarn/releases/*    binary
+/.yarn/plugins/**/*  binary
+/.pnp.*              binary linguist-generated

.github/workflows/ci-cd.yml

@@ -0,0 +1,73 @@
+name: Expo CI/CD
+
+on:
+  push:
+    branches: [main, develop]
+  pull_request:
+    branches: [main, develop]
+
+env:
+  NODE_VERSION: 20
+  YARN_VERSION: 4.7.0
+  EAS_BUILD_PROFILE: preview
+  EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}
+
+jobs:
+  lint-and-test:
+    name: Lint & Test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: "yarn"
+
+      - name: Enable and activate Corepack
+        run: |
+          corepack enable
+          corepack prepare yarn@${{ env.YARN_VERSION }} --activate
+
+      - name: Check Yarn version
+        run: yarn --version
+
+      - name: Install Dependencies
+        run: yarn install --immutable
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Type Check
+        run: yarn tsc --noEmit
+
+      - name: Run Tests
+        run: yarn test
+
+  build:
+    name: EAS Build
+    needs: lint-and-test
+    if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/develop'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Install EAS CLI
+        run: npm install -g eas-cli
+
+      - name: Build (Preview)
+        if: github.ref == 'refs/heads/develop'
+        run: eas build --platform all --profile preview
+        env:
+          EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}
+
+      - name: Build (Production)
+        if: github.ref == 'refs/heads/main'
+        run: eas build --platform all --profile production
+        env:
+          EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}

.gitignore

@@ -1,8 +1,3 @@
-# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
-# The following patterns were generated by expo-cli
-
-expo-env.d.ts
-# @end expo-cli
 
 # OSX
 .DS_Store
@@ -36,6 +31,8 @@ local.properties
 .cxx/
 *.keystore
 !debug.keystore
+*.apk
+*.aab
 
 # node.js
 node_modules/
@@ -71,4 +68,49 @@ web-build/
 *.sln
 *.sw?
 
-.yarn
+.yarn/
+# @generated expo-cli sync-8d4afeec25ea8a192358fae2f8e2fc766bdce4ec
+# The following patterns were generated by expo-cli
+
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+# @end expo-cli
+
+.yarn/
+android
+ios

README.md

@@ -1,13 +1,13 @@
 # Welcome to your Expo app 👋
 
-This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.yarnjs.com/package/create-expo-app).
 
 ## Get started
 
 1. Install dependencies
 
    ```bash
-   npm install
+   yarn install
    ```
 
 2. Start the app
@@ -30,7 +30,7 @@ You can start developing by editing the files inside the **app** directory. This
 When you're ready, run:
 
 ```bash
-npm run reset-project
+yarn run reset-project
 ```
 
 This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.

app.json

@@ -1,7 +1,7 @@
 {
   "expo": {
     "name": "SYNC",
-    "slug": "sync-mobile",
+    "slug": "sync",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/images/sync.png",
@@ -14,13 +14,15 @@
       "resizeMode": "contain"
     },
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "bundleIdentifier": "com.strangee.sync"
     },
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/sync.png",
         "backgroundColor": "#0E1032"
-      }
+      },
+      "package": "com.strangee.sync"
     },
     "web": {
       "bundler": "metro",
@@ -32,6 +34,15 @@
     ],
     "experiments": {
       "typedRoutes": true
-    }
+    },
+    "extra": {
+      "router": {
+        "origin": false
+      },
+      "eas": {
+        "projectId": "aa416c9c-f072-4dd7-864f-bd2362e3ec2c"
+      }
+    },
+    "owner": "strangee"
   }
 }

app/+not-found.tsx

@@ -1,4 +1,4 @@
-import { Link, Stack } from 'expo-router';
+import { Link, RelativePathString, Stack } from 'expo-router';
 import { StyleSheet } from 'react-native';
 
 import { ThemedText } from '@/components/ThemedText';
@@ -9,10 +9,10 @@ const BACKGROUND_COLOR = '#0E1032';
 export default function NotFoundScreen() {
   return (
     <>
-      <Stack.Screen options={{ title: 'Oops!' }} />
+      <Stack.Screen options={{ title: "Oops!" }} />
       <ThemedView style={styles.container}>
         <ThemedText type="title">This screen doesn't exist.</ThemedText>
-        <Link href="/" style={styles.link}>
+        <Link href={"/" as RelativePathString} style={styles.link}>
           <ThemedText type="link">Go to home screen!</ThemedText>
         </Link>
       </ThemedView>

app/_layout.tsx

@@ -1,26 +1,26 @@
-import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
+// import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
 import { useFonts } from 'expo-font';
-import { Stack } from 'expo-router';
+// import { Stack } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
 import { useEffect, useState } from 'react';
 import 'react-native-reanimated';
-import { View, AppState, AppStateStatus, Text } from 'react-native';
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import { AppState, AppStateStatus } from 'react-native';
+// import AsyncStorage from '@react-native-async-storage/async-storage';
 import * as SplashScreen from 'expo-splash-screen';
 
 import { Onboarding } from '@/components/Onboarding';
 import { SignUp } from '@/components/SignUp';
 import { SignIn } from '@/components/SignIn';
 import { HomeScreen } from '@/components/HomeScreen';
-import { useColorScheme } from '@/hooks/useColorScheme';
+// import { useColorScheme } from '@/hooks/useColorScheme';
 
-const ONBOARDING_COMPLETE_KEY = 'onboarding_complete';
+// const ONBOARDING_COMPLETE_KEY = 'onboarding_complete';
 
 // Keep the splash screen visible while we fetch resources
 SplashScreen.preventAutoHideAsync();
 
 export default function RootLayout() {
-  const colorScheme = useColorScheme();
+  // const colorScheme = useColorScheme();
   const [loaded] = useFonts({
     SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
     'Inter': require('../assets/fonts/Inter-Regular.ttf'),
@@ -55,6 +55,7 @@ export default function RootLayout() {
         setShowOnboarding(true);
       } catch (e) {
         // If there's an error reading from storage, show onboarding by default
+        console.error('Error reading onboarding status', e);
         setShowOnboarding(true);
       } finally {
         setAppIsReady(true);

components/Onboarding.tsx

@@ -9,7 +9,7 @@ import {
   FlatList 
 } from 'react-native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import { useFonts } from 'expo-font';
+// import { useFonts } from 'expo-font';
 
 const { width } = Dimensions.get('window');
 const ONBOARDING_COMPLETE_KEY = 'onboarding_complete';

components/SplashScreen.tsx

@@ -1,27 +1,24 @@
-import React, { useEffect } from 'react';
-import { StyleSheet, View, Text, Animated } from 'react-native';
+import React, { useEffect } from "react";
+import { StyleSheet, View, Animated } from "react-native";
 
 interface SplashScreenProps {
   onLayoutComplete?: () => void;
 }
 
 export function SplashScreen({ onLayoutComplete }: SplashScreenProps) {
   const fadeAnim = React.useRef(new Animated.Value(0)).current;
-  
+
   useEffect(() => {
     Animated.timing(fadeAnim, {
       toValue: 1,
       duration: 1000,
       useNativeDriver: true,
     }).start();
-  }, []);
+  }, [fadeAnim]);
 
   return (
-    <View 
-      style={styles.container} 
-      onLayout={onLayoutComplete}
-    >
-      <Animated.Text 
+    <View style={styles.container} onLayout={onLayoutComplete}>
+      <Animated.Text
         style={[
           styles.title,
           {
@@ -46,15 +43,15 @@ export function SplashScreen({ onLayoutComplete }: SplashScreenProps) {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#0E1032',
-    alignItems: 'center',
-    justifyContent: 'center',
+    backgroundColor: "#0E1032",
+    alignItems: "center",
+    justifyContent: "center",
   },
   title: {
     fontSize: 42,
-    fontWeight: 'bold',
-    color: '#FFFFFF',
+    fontWeight: "bold",
+    color: "#FFFFFF",
     letterSpacing: 4,
-    textAlign: 'center',
+    textAlign: "center",
   },
 });

components/ui/IconSymbol.tsx

@@ -3,7 +3,7 @@
 import MaterialIcons from '@expo/vector-icons/MaterialIcons';
 import { SymbolWeight } from 'expo-symbols';
 import React from 'react';
-import { OpaqueColorValue, StyleProp, ViewStyle } from 'react-native';
+import { OpaqueColorValue, StyleProp, TextStyle } from 'react-native';
 
 // Add your SFSymbol to MaterialIcons mappings here.
 const MAPPING = {
@@ -36,7 +36,7 @@ export function IconSymbol({
   name: IconSymbolName;
   size?: number;
   color: string | OpaqueColorValue;
-  style?: StyleProp<ViewStyle>;
+  style?: StyleProp<TextStyle>;
   weight?: SymbolWeight;
 }) {
   return <MaterialIcons color={color} size={size} name={MAPPING[name]} style={style} />;