Basic Navigation

App.js

@@ -3,9 +3,14 @@ import React, { useEffect, useState } from 'react';
 import { StyleSheet, Text, View, TextInput, SafeAreaView } from 'react-native';
 import API from './API.js';
 import LoginForm from './components/Login.js';
-import Feed from './components/Feed.js';
 import { Provider as PaperProvider } from 'react-native-paper';
 import AwesomeIcon from 'react-native-vector-icons/FontAwesome';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import Login from "./Views/Login.js"
+import Feed from "./Views/Feed.js"
+
+const Stack = createNativeStackNavigator();
 
 export default function App() {
     let [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -16,16 +21,12 @@ export default function App() {
     }, []);
 
     return (
-        <PaperProvider settings={{
+        <NavigationContainer>
-            icon: props => <AwesomeIcon {...props} />,
+            <Stack.Navigator>
-          }}>
+                <Stack.Screen name="Feed" component={Feed} />
-        <SafeAreaView style={styles.container}>
+                <Stack.Screen name="Login" component={Login} />
-            <Text>EMI Social LOGO</Text>
+            </Stack.Navigator>
-            {!isLoggedIn && <LoginForm />}
+        </NavigationContainer>
-            {isLoggedIn && <Feed />}
-            <StatusBar style="auto" />
-        </SafeAreaView>
-        </PaperProvider>
     );
 }
 

Views/Feed.js

@@ -0,0 +1,66 @@
+import { StatusBar } from 'expo-status-bar';
+import React, { useState, useEffect } from 'react';
+import { View, ScrollView, StyleSheet, SafeAreaView } from 'react-native';
+import API from './../API.js';
+import Post from './../components/Post.js';
+import { Provider as PaperProvider } from 'react-native-paper';
+import AwesomeIcon from 'react-native-vector-icons/FontAwesome';
+
+
+
+let Feed = ({ navigation, route }) => {
+    let [Me, setMeProfile] = useState({});
+    let [Posts, setPosts] = useState([]);
+    useEffect(async () => {
+        navigation.setOptions({ title: "Loading..." });
+        let r = await API.getMe();
+        setMeProfile(r);
+        if (route.params && route.params.profileid) {
+            setPosts([]);
+            API.getPosts(route.params.profileid).then((data) => {
+                API.getUserProfile(route.params.profileid).then((profile)=>{
+                    navigation.setOptions({ title: profile.profile.firstName + " " + profile.profile.lastName });
+                });
+                setPosts(data);
+            });
+        } else {
+            let posts = await API.getPosts();
+            setPosts(posts);
+            navigation.setOptions({ title: "Feed" });
+        }
+        //console.log(posts)
+    }, [route.params]);
+
+    return (
+        <PaperProvider settings={{
+            icon: props => <AwesomeIcon {...props} />,
+        }}>
+            <SafeAreaView style={styles.container}>
+                <View>
+                    <ScrollView>
+                        {
+                            Posts.map((post, i) => {
+                                return (
+                                    //<Text key={i}>{post.content}</Text>
+                                    <Post post={post} viewer={Me} key={i} />
+                                )
+                            })
+                        }
+                    </ScrollView>
+                </View>
+                <StatusBar style="auto" />
+            </SafeAreaView>
+        </PaperProvider>
+    );
+}
+
+export default Feed;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: "#edf2f7"
+    },
+});

Views/Login.js

@@ -0,0 +1,35 @@
+import { StatusBar } from 'expo-status-bar';
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, Text, View, TextInput, SafeAreaView } from 'react-native';
+import API from './../API.js';
+import LoginForm from './../components/Login.js';
+
+export default function App({navigation, route}) {
+    useEffect(async () => {
+        let r = await API.isLoggedIn();
+        if(r) navigation.navigate('Feed')
+    }, []);
+
+    return (
+        <PaperProvider settings={{
+            icon: props => <AwesomeIcon {...props} />,
+        }}>
+            <SafeAreaView style={styles.container}>
+                <Text>EMI Social LOGO</Text>
+                <LoginForm />
+                <StatusBar style="auto" />
+            </SafeAreaView>
+        </PaperProvider>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginTop: 25,
+        paddingTop: 10,
+        backgroundColor: "#edf2f7"
+    },
+});

components/Feed.js

@@ -1,35 +0,0 @@
-import { StatusBar } from 'expo-status-bar';
-import React, { useState, useEffect } from 'react';
-import { Text, View, ScrollView, Button, StyleSheet } from 'react-native';
-import API from './../API.js';
-import Post from './Post.js'
-
-
-let Feed = () => {
-    let [Me, setMeProfile] = useState({});
-    let [Posts, setPosts] = useState([]);
-    useEffect(async () => {
-        let r = await API.getMe();
-        setMeProfile(r);
-        let posts = await API.getPosts();
-        setPosts(posts);
-        //console.log(posts)
-    }, []);
-
-    return (
-        <View>
-            <ScrollView>
-                {
-                    Posts.map((post, i) => {
-                        return (
-                            //<Text key={i}>{post.content}</Text>
-                            <Post post={post} viewer={Me} key={i}/>
-                        )
-                    })
-                }
-            </ScrollView>
-        </View>
-    );
-}
-
-export default Feed;

components/Media.js

@@ -38,7 +38,6 @@ let Media = (props) => {
     const imagesTag = imagesTagF(props.content);
     const imageStyle = imagesTag.length == 1 ? styles.image : styles.multipleImage;
     const videosId = videoIdF(props.content);
-    console.log(videosId);
     const vimeo = videosId.length ? <VimeoPlayer videoId={videosId[1]}  /> : undefined;
     return (
         <View>

components/UserName.js

@@ -1,10 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { Text, View, ScrollView, Button, StyleSheet } from 'react-native';
 import API from './../API.js';
+import { useNavigation } from '@react-navigation/native';
 
 
 let UserName = (props) => {
     let [profile, setProfile] = useState({});
+    const navigation = useNavigation();
 
     useEffect(async () => {
         let p = await API.getUserProfile(props.profileid).catch(()=>{return {}});
@@ -12,7 +14,7 @@ let UserName = (props) => {
     }, [props.profileid]);
 
     return (
-        <Text>{profile.profile && profile.profile.firstName} {profile.profile && profile.profile.lastName}</Text>
+        <Text onPress={()=>{navigation.navigate('Feed', {profileid: props.profileid})}} >{profile.profile && profile.profile.firstName} {profile.profile && profile.profile.lastName}</Text>
     );
 }
 

package-lock.json

@@ -2022,6 +2022,70 @@
       "resolved": "https://registry.npmjs.org/@react-native/polyfills/-/polyfills-1.0.0.tgz",
       "integrity": "sha512-0jbp4RxjYopTsIdLl+/Fy2TiwVYHy4mgeu07DG4b/LyM0OS/+lPP5c9sbnt/AMlnF6qz2JRZpPpGw1eMNS6A4w=="
     },
+    "@react-navigation/core": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.1.1.tgz",
+      "integrity": "sha512-njysuiqztgvR1Z9Noxk2OGJfYtFGFDRyji5Vmm1jHzlql0m+q0wh1dUiyaIEtTyrhFXr/YNgdrKuiPaU9Jp8OA==",
+      "requires": {
+        "@react-navigation/routers": "^6.1.0",
+        "escape-string-regexp": "^4.0.0",
+        "nanoid": "^3.1.23",
+        "query-string": "^7.0.0",
+        "react-is": "^16.13.0"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        },
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
+    "@react-navigation/elements": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.1.tgz",
+      "integrity": "sha512-jIDRJaG8YPIinl4hZXJu/W3TnhDe8hLYmGSEdL1mxZ1aoNMiApCBYkgTy11oq0EfK/koZd3DPSkJNbzBAQmPJw=="
+    },
+    "@react-navigation/native": {
+      "version": "6.0.8",
+      "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.0.8.tgz",
+      "integrity": "sha512-6022M3+Btok3xJC/49B88er3SRrlDAZ4FdmGndhEVvBcGSHWmscU2qKCwFd0RY6A0AGCVmdIlXudrfdcdRAkpQ==",
+      "requires": {
+        "@react-navigation/core": "^6.1.1",
+        "escape-string-regexp": "^4.0.0",
+        "fast-deep-equal": "^3.1.3",
+        "nanoid": "^3.1.23"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        }
+      }
+    },
+    "@react-navigation/native-stack": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@react-navigation/native-stack/-/native-stack-6.5.0.tgz",
+      "integrity": "sha512-X2sV+AKkqEl7k0ltjN4lMBfx+FsynrnUWkCTGiROyMRo4yWElK1jY3XSTsj5Cpso2/MUHdf9v/AOw0EgU58FsA==",
+      "requires": {
+        "@react-navigation/elements": "^1.3.1",
+        "warn-once": "^0.1.0"
+      }
+    },
+    "@react-navigation/routers": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.0.tgz",
+      "integrity": "sha512-8xJL+djIzpFdRW/sGlKojQ06fWgFk1c5jER9501HYJ12LF5DIJFr/tqBI2TJ6bk+y+QFu0nbNyeRC80OjRlmkA==",
+      "requires": {
+        "nanoid": "^3.1.23"
+      }
+    },
     "@sideway/address": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.2.tgz",
@@ -3564,6 +3628,11 @@
         }
       }
     },
+    "fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+    },
     "fast-glob": {
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz",
@@ -3627,6 +3696,11 @@
         "to-regex-range": "^5.0.1"
       }
     },
+    "filter-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
+      "integrity": "sha1-mzERErxsYSehbgFsbF1/GeCAXFs="
+    },
     "finalhandler": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
@@ -5329,6 +5403,11 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "nanoid": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
+      "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw=="
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -5872,6 +5951,17 @@
         "once": "^1.3.1"
       }
     },
+    "query-string": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.1.1.tgz",
+      "integrity": "sha512-MplouLRDHBZSG9z7fpuAAcI7aAYjDLhtsiVZsevsfaHWDS2IDdORKbSd1kWUA+V4zyva/HZoSfpwnYMMQDhb0w==",
+      "requires": {
+        "decode-uri-component": "^0.2.0",
+        "filter-obj": "^1.1.0",
+        "split-on-first": "^1.0.0",
+        "strict-uri-encode": "^2.0.0"
+      }
+    },
     "querystringify": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
@@ -5922,6 +6012,11 @@
         "scheduler": "^0.20.1"
       }
     },
+    "react-freeze": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.0.tgz",
+      "integrity": "sha512-yQaiOqDmoKqks56LN9MTgY06O0qQHgV4FUrikH357DydArSZHQhl0BJFqGKIZoTqi8JizF9Dxhuk1FIZD6qCaw=="
+    },
     "react-google-material-icons": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/react-google-material-icons/-/react-google-material-icons-1.0.4.tgz",
@@ -6070,6 +6165,104 @@
         "react-native-iphone-x-helper": "^1.3.1"
       }
     },
+    "react-native-safe-area-context": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.1.2.tgz",
+      "integrity": "sha512-35hLhtJRCZW0L2zTz0Wz3d0Oh6uYUiRWa/HvoITq7IvD8GkjjM97MKHSfVhC4N9ZNMzqXDuVfYBpHHisc9Z8+Q=="
+    },
+    "react-native-screens": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.13.1.tgz",
+      "integrity": "sha512-xcrnuUs0qUrGpc2gOTDY4VgHHADQwp80mwR1prU/Q0JqbZN5W3koLhuOsT6FkSRKjR5t40l+4LcjhHdpqRB2HA==",
+      "requires": {
+        "react-freeze": "^1.0.0",
+        "warn-once": "^0.1.0"
+      }
+    },
+    "react-native-vector-icons": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-9.1.0.tgz",
+      "integrity": "sha512-2AHZ/h9d/+rC0odz+OwbGNlc1Lik/pHhSixn4HfC8RtQ8CxfSBZ6gg7bTLcZhdSvZN+ZEGi30Fj+ZnOSQy+smg==",
+      "requires": {
+        "prop-types": "^15.7.2",
+        "yargs": "^16.1.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "cliui": {
+          "version": "7.0.4",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+          "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.0",
+            "wrap-ansi": "^7.0.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
+        },
+        "wrap-ansi": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+          "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "y18n": {
+          "version": "5.0.8",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+          "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="
+        },
+        "yargs": {
+          "version": "16.2.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+          "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+          "requires": {
+            "cliui": "^7.0.2",
+            "escalade": "^3.1.1",
+            "get-caller-file": "^2.0.5",
+            "require-directory": "^2.1.1",
+            "string-width": "^4.2.0",
+            "y18n": "^5.0.5",
+            "yargs-parser": "^20.2.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "20.2.9",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+          "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w=="
+        }
+      }
+    },
     "react-native-web": {
       "version": "0.17.1",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.17.1.tgz",
@@ -6879,6 +7072,11 @@
       "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz",
       "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw=="
     },
+    "split-on-first": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
+      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="
+    },
     "split-string": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@@ -6985,6 +7183,11 @@
       "resolved": "https://registry.npmjs.org/stream-buffers/-/stream-buffers-2.2.0.tgz",
       "integrity": "sha1-kdX1Ew0c75bc+n9yaUUYh0HQnuQ="
     },
+    "strict-uri-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+      "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY="
+    },
     "string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -7368,6 +7571,11 @@
         "makeerror": "1.0.12"
       }
     },
+    "warn-once": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/warn-once/-/warn-once-0.1.0.tgz",
+      "integrity": "sha512-recZTSvuaH/On5ZU5ywq66y99lImWqzP93+AiUo9LUwG8gXHW+LJjhOd6REJHm7qb0niYqrEQJvbHSQfuJtTqA=="
+    },
     "wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",

package.json

@@ -10,6 +10,8 @@
     "eject": "expo eject"
   },
   "dependencies": {
+    "@react-navigation/native": "^6.0.8",
+    "@react-navigation/native-stack": "^6.5.0",
     "expo": "~43.0.2",
     "expo-status-bar": "~1.1.0",
     "react": "17.0.1",
@@ -18,6 +20,9 @@
     "react-native": "0.64.3",
     "react-native-autoheight-webview": "^1.6.1",
     "react-native-paper": "^4.11.2",
+    "react-native-safe-area-context": "^4.1.2",
+    "react-native-screens": "^3.13.1",
+    "react-native-vector-icons": "^9.1.0",
     "react-native-web": "0.17.1",
     "react-native-webview": "^11.17.2"
   },