Merge pull request #5 from HASH-SQUAD/develop

Develop

.gitignore

@@ -30,6 +30,7 @@ yarn-error.*
 
 # local env files
 .env*.local
+.env
 
 # typescript
 *.tsbuildinfo

App.tsx

@@ -1,3 +1,4 @@
+
 import React, { useEffect, useRef } from 'react';
 import { WebView, WebViewMessageEvent } from 'react-native-webview';
 import { StyleSheet, View, StatusBar } from 'react-native';
@@ -43,4 +44,4 @@ const styles = StyleSheet.create({
 	statusbar: {
 		backgroundColor: 'transparent',
 	},
-});
+});

babel.config.js

@@ -1,6 +1,14 @@
 module.exports = function(api) {
-  api.cache(true);
-  return {
-    presets: ['babel-preset-expo'],
-  };
+	api.cache(true);
+	return {
+		presets: ['babel-preset-expo'],
+		plugins: [
+			[
+				'module:react-native-dotenv',
+				{
+					moduleName: 'react-native-dotenv',
+				},
+			],
+		],
+	};
 };

package.json

@@ -9,16 +9,25 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@react-native-community/masked-view": "^0.1.11",
+    "@react-navigation/native": "^6.1.17",
+    "@react-navigation/stack": "^6.4.0",
+    "babel-preset-expo": "^11.0.12",
     "expo": "~51.0.14",
     "expo-status-bar": "~1.12.1",
     "react": "18.2.0",
     "react-native": "0.74.2",
-    "react-native-safe-area-context": "^4.10.5",
+    "react-native-dotenv": "^3.4.11",
+    "react-native-gesture-handler": "^2.17.1",
+    "react-native-reanimated": "^3.13.0",
+    "react-native-safe-area-context": "^4.10.8",
+    "react-native-screens": "^3.32.0",
     "react-native-webview": "^13.10.4"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@types/react": "~18.2.45",
+    "@types/react-native-dotenv": "^0.2.2",
     "typescript": "^5.1.3"
   },
   "private": true,

src/App.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import StackNavigation from './navigations/index';
+
+const App = () => {
+	return (
+		<NavigationContainer>
+			<StackNavigation />
+		</NavigationContainer>
+	);
+};
+
+export default App;

src/navigations/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { createStackNavigator } from '@react-navigation/stack';
+import Auth from '../screens/auth/index';
+
+const Stack = createStackNavigator();
+
+const StackNavigation = () => {
+	return (
+		<Stack.Navigator>
+			<Stack.Screen
+				name="auth"
+				component={Auth}
+				options={{ headerShown: false }}
+			/>
+		</Stack.Navigator>
+	);
+};
+
+export default StackNavigation;

src/screens/auth/index.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { WebView } from 'react-native-webview';
+import { StyleSheet, StatusBar, View } from 'react-native';
+import Constants from 'expo-constants';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export default function App(): React.ReactElement {
+	const statusBarHeight: number = Constants.statusBarHeight;
+	const webViewRef = useRef<WebView>(null);
+	const [isAuthPage, setIsAuthPage] = useState(false);
+
+	const handleWebViewLoad = () => {
+		webViewRef.current?.postMessage(statusBarHeight.toString());
+	};
+
+	const handleNavigationStateChange = (navState: any) => {
+		const currentUrl = navState.url;
+		setIsAuthPage(currentUrl.includes('/auth'));
+	};
+
+	useEffect(() => {
+		if (webViewRef.current) {
+			webViewRef.current.postMessage(statusBarHeight.toString());
+		}
+	}, [statusBarHeight]);
+
+	return (
+		<>
+			<StatusBar
+				backgroundColor={isAuthPage ? 'transparent' : 'white'}
+				barStyle='dark-content'
+				translucent={isAuthPage}
+			/>
+			<SafeAreaView style={styles.safeArea}>
+				<View
+					style={[
+						styles.container,
+						{ marginTop: isAuthPage ? 0 : Constants.statusBarHeight },
+					]}
+				>
+					<WebView
+						style={styles.webView}
+						source={{ uri: 'https://harp-frontend.netlify.app/splash' }}
+						ref={webViewRef}
+						onLoad={handleWebViewLoad}
+						onNavigationStateChange={handleNavigationStateChange}
+					/>
+				</View>
+			</SafeAreaView>
+		</>
+	);
+}
+
+const styles = StyleSheet.create({
+	safeArea: {
+		flex: 1,
+		backgroundColor: 'white',
+	},
+	container: {
+		flex: 1,
+	},
+	webView: {
+		flex: 1,
+	},
+});

src/screens/home/index.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { WebView } from 'react-native-webview';
+import { StyleSheet, StatusBar, View } from 'react-native';
+import Constants from 'expo-constants';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export default function App(): React.ReactElement {
+	const statusBarHeight: number = Constants.statusBarHeight;
+	const webViewRef = useRef<WebView>(null);
+	const [isAuthPage, setIsAuthPage] = useState(false);
+
+	const handleWebViewLoad = () => {
+		webViewRef.current?.postMessage(statusBarHeight.toString());
+	};
+
+	const handleNavigationStateChange = (navState: any) => {
+		const currentUrl = navState.url;
+		setIsAuthPage(currentUrl.includes('/auth'));
+	};
+
+	useEffect(() => {
+		if (webViewRef.current) {
+			webViewRef.current.postMessage(statusBarHeight.toString());
+		}
+	}, [statusBarHeight]);
+
+	return (
+		<>
+			<StatusBar
+				backgroundColor={isAuthPage ? 'transparent' : 'white'}
+				barStyle='dark-content'
+				translucent={isAuthPage}
+			/>
+			<SafeAreaView style={styles.safeArea}>
+				<View
+					style={[
+						styles.container,
+						{ marginTop: isAuthPage ? 0 : Constants.statusBarHeight },
+					]}
+				>
+					<WebView
+						style={styles.webView}
+						source={{ uri: 'https://harp-frontend.netlify.app/' }}
+						ref={webViewRef}
+						onLoad={handleWebViewLoad}
+						onNavigationStateChange={handleNavigationStateChange}
+					/>
+				</View>
+			</SafeAreaView>
+		</>
+	);
+}
+
+const styles = StyleSheet.create({
+	safeArea: {
+		flex: 1,
+		backgroundColor: 'white',
+	},
+	container: {
+		flex: 1,
+	},
+	webView: {
+		flex: 1,
+	},
+});

src/screens/notFound/index.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { WebView } from 'react-native-webview';
+import { StyleSheet, StatusBar, View } from 'react-native';
+import Constants from 'expo-constants';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export default function App(): React.ReactElement {
+	const statusBarHeight: number = Constants.statusBarHeight;
+	const webViewRef = useRef<WebView>(null);
+	const [isAuthPage, setIsAuthPage] = useState(false);
+
+	const handleWebViewLoad = () => {
+		webViewRef.current?.postMessage(statusBarHeight.toString());
+	};
+
+	const handleNavigationStateChange = (navState: any) => {
+		const currentUrl = navState.url;
+		setIsAuthPage(currentUrl.includes('/auth'));
+	};
+
+	useEffect(() => {
+		if (webViewRef.current) {
+			webViewRef.current.postMessage(statusBarHeight.toString());
+		}
+	}, [statusBarHeight]);
+
+	return (
+		<>
+			<StatusBar
+				backgroundColor={isAuthPage ? 'transparent' : 'white'}
+				barStyle='dark-content'
+				translucent={isAuthPage}
+			/>
+			<SafeAreaView style={styles.safeArea}>
+				<View
+					style={[
+						styles.container,
+						{ marginTop: isAuthPage ? 0 : Constants.statusBarHeight },
+					]}
+				>
+					<WebView
+						style={styles.webView}
+						source={{ uri: 'https://harp-frontend.netlify.app/asldfjasjdf' }}
+						ref={webViewRef}
+						onLoad={handleWebViewLoad}
+						onNavigationStateChange={handleNavigationStateChange}
+					/>
+				</View>
+			</SafeAreaView>
+		</>
+	);
+}
+
+const styles = StyleSheet.create({
+	safeArea: {
+		flex: 1,
+		backgroundColor: 'white',
+	},
+	container: {
+		flex: 1,
+	},
+	webView: {
+		flex: 1,
+	},
+});

src/screens/profile/crop/index.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { WebView } from 'react-native-webview';
+import { StyleSheet, StatusBar, View } from 'react-native';
+import Constants from 'expo-constants';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export default function App(): React.ReactElement {
+	const statusBarHeight: number = Constants.statusBarHeight;
+	const webViewRef = useRef<WebView>(null);
+	const [isAuthPage, setIsAuthPage] = useState(false);
+
+	const handleWebViewLoad = () => {
+		webViewRef.current?.postMessage(statusBarHeight.toString());
+	};
+
+	const handleNavigationStateChange = (navState: any) => {
+		const currentUrl = navState.url;
+		setIsAuthPage(currentUrl.includes('/auth'));
+	};
+
+	useEffect(() => {
+		if (webViewRef.current) {
+			webViewRef.current.postMessage(statusBarHeight.toString());
+		}
+	}, [statusBarHeight]);
+
+	return (
+		<>
+			<StatusBar
+				backgroundColor={isAuthPage ? 'transparent' : 'white'}
+				barStyle='dark-content'
+				translucent={isAuthPage}
+			/>
+			<SafeAreaView style={styles.safeArea}>
+				<View
+					style={[
+						styles.container,
+						{ marginTop: isAuthPage ? 0 : Constants.statusBarHeight },
+					]}
+				>
+					<WebView
+						style={styles.webView}
+						source={{
+							uri: 'https://harp-frontend.netlify.app/profile/edit/crop',
+						}}
+						ref={webViewRef}
+						onLoad={handleWebViewLoad}
+						onNavigationStateChange={handleNavigationStateChange}
+					/>
+				</View>
+			</SafeAreaView>
+		</>
+	);
+}
+
+const styles = StyleSheet.create({
+	safeArea: {
+		flex: 1,
+		backgroundColor: 'white',
+	},
+	container: {
+		flex: 1,
+	},
+	webView: {
+		flex: 1,
+	},
+});