Landing Page UI Design

StressPrediction/App.js

-import { StyleSheet, View } from 'react-native';
-import AddData from './src';
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import LandingPage from './src/landingPage';
+import AddData from './src/index';
 
 export default function App() {
+  const [showAddData, setShowAddData] = useState(false);
+
+  const handleGoToAddData = () => {
+    setShowAddData(true);
+  };
+
+  const handleGoBack = () => {
+    setShowAddData(false);
+  };
+
   return (
-    <View style={styles.container}>
-      <AddData />
+    <View style={{ flex: 1 }}>
+      {!showAddData ? (
+        <LandingPage onGoToAddData={handleGoToAddData} />
+      ) : (
+        <AddData onGoBack={handleGoBack} />
+      )}
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});

StressPrediction/package.json

@@ -9,11 +9,18 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@react-native-community/masked-view": "^0.1.11",
+    "@react-navigation/native": "^6.1.16",
+    "@react-navigation/native-stack": "^6.9.25",
     "expo": "~50.0.13",
     "expo-status-bar": "~1.11.1",
     "firebase": "^9.6.11",
     "react": "18.2.0",
-    "react-native": "0.73.5"
+    "react-native": "0.73.5",
+    "react-native-gesture-handler": "^2.15.0",
+    "react-native-reanimated": "^3.8.0",
+    "react-native-safe-area-context": "^4.9.0",
+    "react-native-screens": "^3.29.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

StressPrediction/src/index.js

-import { View, Text, StyleSheet, TextInput, Button } from 'react-native'
-import React, { useState } from 'react'
-import { db } from '../config'
-import { ref, set } from 'firebase/database'
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, TextInput, Button, Image } from 'react-native';
+import { db } from '../config';
+import { ref, set } from 'firebase/database';
 
-const AddData = () => {
-    const [title, setTitle] = useState('');
-    const [body, setBody] = useState('');
+const AddData = ({ onGoBack }) => {
+  const [title, setTitle] = useState('');
+  const [body, setBody] = useState('');
 
-    //function to add data to forebase realtime db
-    const dataAddOn = () => {
-        set(ref(db, 'posts/' + title),{
-            title: title,
-            body: body,
-        });
-        setTitle('')
-        setBody('')
-    }
+  const dataAddOn = () => {
+    set(ref(db, 'posts/' + title), {
+      title: title,
+      body: body,
+    });
+    setTitle('');
+    setBody('');
+  };
 
-    return (
-        <View style={styles.container}>
-            <Text style={styles.header}>Stress Tracker & Wellness Companion</Text>
-            <TextInput
-              placeholder='Job Satisfication'
-              value={title}
-              onChangeText={(text) => setTitle(text)}
-              style={styles.input}
-            />
-            <TextInput
-              placeholder='Body'
-              value={body}
-              onChangeText={(text) => setBody(text)}
-              style={styles.input}
-            />
-            <Button 
-              title='Add Data'
-              onPress={dataAddOn}
-            />
-        </View>
-    )
-}
+  return (
+    <View style={styles.container}>
+      <Text style={styles.header}>STRESS TRACKER </Text>
+      <Image
+        source={require('../images/Home.jpg')}
+        style={styles.image}
+      />
+      <TextInput
+        placeholder='Job Satisfaction'
+        value={title}
+        onChangeText={(text) => setTitle(text)}
+        style={styles.input}
+      />
+      <TextInput
+        placeholder='Body'
+        value={body}
+        onChangeText={(text) => setBody(text)}
+        style={styles.input}
+      />
+      <Button 
+        title='Add Data'
+        onPress={dataAddOn}
+      />
+      <Button 
+        title='Back to Landing Page'
+        onPress={onGoBack}
+      />
+    </View>
+  );
+};
 
-export default AddData
+export default AddData;
 
 const styles = StyleSheet.create({
-    container: {
-      flex: 1,
-      backgroundColor: '#fff',
-    },
-    header:{
-        fontSize:20,
-        textAlign:'center',
-        marginTop:50,
-        color:'red',
-        fontWeight: 'bold'
-    },
-    input:{
-        borderWidth:1,
-        borderColor:'black',
-        margin:10,
-        padding:10,
-        fontSize:18,
-        borderRadius:6,
-    }
-  });
\ No newline at end of file
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  header:{
+    fontSize: 40,
+    textAlign: 'center',
+    marginTop: 50,
+    color: 'black',
+    fontWeight: 'bold'
+  },
+  input:{
+    borderWidth: 1,
+    borderColor: 'black',
+    margin: 10,
+    padding: 10,
+    fontSize: 18,
+    borderRadius: 6,
+  },
+  image: {
+    width: '100%',
+    height: 200,
+  }
+});

StressPrediction/src/landingPage.js

+import React, { useRef, useEffect } from 'react';
+import { View, Text, TouchableOpacity, ImageBackground, StyleSheet, Animated } from 'react-native';
+
+const LandingPage = ({ onGoToAddData }) => {
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+        Animated.timing(fadeAnim, {
+          toValue: 0,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+      ])
+    ).start();
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <Text>S T R E S S      T R A C K E R</Text>
+      <ImageBackground
+        source={require('../images/img.jpg')}
+        style={styles.backgroundImage}
+      >
+        <Animated.View
+          style={{
+            opacity: fadeAnim,
+          }}
+        >
+        </Animated.View>
+      </ImageBackground>
+      <View style={styles.rectangle}>
+        <Animated.View
+          style={{
+            opacity: fadeAnim,
+          }}
+        >
+          <TouchableOpacity style={styles.button} onPress={onGoToAddData}>
+            <Text style={styles.buttonText}>GET STARTED</Text>
+          </TouchableOpacity>
+        </Animated.View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  backgroundImage: {
+    width: 400,
+    height: 400,
+    resizeMode: 'cover',
+    overflow: 'hidden',
+    borderRadius: 300,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  rectangle: {
+    width: '100%',
+    height: 50,
+    backgroundColor: '#F0B27A',
+    position: 'absolute',
+    bottom: 0,
+    borderTopLeftRadius: 40,
+    borderTopRightRadius: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  button: {
+    backgroundColor: '#F0B27A', 
+    padding: 10,
+    borderRadius: 5,
+  },
+  buttonText: {
+    color: '#273746',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+});
+
+export default LandingPage;