diff --git a/package-lock.json b/package-lock.json
index df5c627..3739d97 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6129,6 +6129,11 @@
"resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.1.tgz",
"integrity": "sha512-/VbpIEp8tSNNHIvstuA3Swx610whci1Zpc9mqNkqn14DkMbw+ORviln2u0XyHG1kPvvwTNGZY6QpeFwxYaSdbQ=="
},
+ "react-native-popup-menu": {
+ "version": "0.15.10",
+ "resolved": "https://registry.npmjs.org/react-native-popup-menu/-/react-native-popup-menu-0.15.10.tgz",
+ "integrity": "sha512-w7MaicsfpclK7g/omjMchNaXwhMi0apt/DC734AbHuJTWCfv5mF3JgL1UzRW19ncFMBRfQeYapPy/zUyJCGgEQ=="
+ },
"react-native-reanimated": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-1.9.0.tgz",
diff --git a/package.json b/package.json
index b48ad8a..bb34cfb 100644
--- a/package.json
+++ b/package.json
@@ -9,21 +9,22 @@
},
"dependencies": {
"@react-native-community/masked-view": "0.1.10",
+ "@react-navigation/core": "5.2.3",
"@react-navigation/native": "5.1.1",
+ "@react-navigation/stack": "5.2.3",
"expo": "^38.0.9",
"expo-status-bar": "^1.0.2",
"react": "~16.11.0",
"react-dom": "~16.11.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
"react-native-gesture-handler": "~1.6.0",
+ "react-native-popup-menu": "^0.15.10",
"react-native-reanimated": "~1.9.0",
"react-native-safe-area-context": "~3.0.7",
"react-native-screens": "~2.9.0",
"react-native-web": "~0.11.7",
"react-navigation": "^4.4.0",
- "react-navigation-stack": "^2.8.2",
- "@react-navigation/stack": "5.2.3",
- "@react-navigation/core": "5.2.3"
+ "react-navigation-stack": "^2.8.2"
},
"devDependencies": {
"@babel/core": "^7.8.6",
diff --git a/src/components/navigation/navigators.js b/src/components/navigation/navigators.js
index b7ba237..f1629d2 100644
--- a/src/components/navigation/navigators.js
+++ b/src/components/navigation/navigators.js
@@ -1,43 +1,69 @@
import React from "react";
import { View } from "react-native";
import { ScrollView } from "react-native-gesture-handler";
+
+import { MenuProvider } from "react-native-popup-menu";
+
import BackBarJsx from "./back-bar";
import TrayJsx from "src/components/navigation/tray";
+// Provider for context menus
+// Allows for establishing global styling of context menus
+const ContextJsx = (props) => {
+ return (
+
+ { props.children }
+
+ );
+};
+
export const ScreenWithTrayJsx = (props) => {
return (
-
-
- { props.children }
+
+
+
+ { props.children }
-
- )
+ active = { props.active }
+ navigation = { props.navigation } />
+
+
+ );
};
export const ScreenWithBackBarJsx = (props) => {
return (
-
-
-
- { props.children }
-
-
+
+
+
+
+ { props.children }
+
+
+
);
};
export const ScreenWithFullNavigationJsx = (props) => {
return (
-
-
-
- { props.children }
-
-
-
+
+
+
+
+ { props.children }
+
+
+
+
);
-}
\ No newline at end of file
+};
+
+const providerStyles = {
+ backdrop: {
+ backgroundColor: "black",
+ opacity: 0.5
+ }
+}
diff --git a/src/components/posts/post.js b/src/components/posts/post.js
index 1b27f64..c08cd65 100644
--- a/src/components/posts/post.js
+++ b/src/components/posts/post.js
@@ -1,11 +1,23 @@
import React, { useEffect, useState } from "react";
-import { Image, View, Text, Dimensions } from "react-native";
+import { Image, View, Text, Dimensions, TouchableWithoutFeedback } from "react-native";
+
+import {
+ Menu,
+ MenuOptions,
+ MenuOption,
+ MenuTrigger,
+ renderers
+} from "react-native-popup-menu";
import PostActionBarJsx from "src/components/posts/post-action-bar";
const SCREEN_WIDTH = Dimensions.get("window").width;
const TEST_IMAGE = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg";
+// Extract the SlideInMenu function from `renderers`
+// This will be used in RawPostJsx
+const { SlideInMenu } = renderers;
+
function getAutoHeight(w1, h1, w2) {
/*
Given the original dimensions and the new width, calculate what would
@@ -60,21 +72,35 @@ export const RawPostJsx = (props) => {
return (
-
- { props.data.username }
+
+
+
{ /* TODO: support for more than one image per post */ }
-
@@ -108,7 +134,7 @@ export const PostByDataJsx = (props) => {
setState({
width: SCREEN_WIDTH,
height: newHeight,
- loaded: true
+ loaded: true
});
});
});
@@ -145,7 +171,7 @@ export const PostByIdJsx = (props) => {
((/* This would be the data retrieved */) => {
Image.getSize(TEST_IMAGE, (width, height) => {
const newHeight = getAutoHeight(width, height, SCREEN_WIDTH)
-
+
setState({
avatar: TEST_IMAGE,
username: "njms",
@@ -156,7 +182,7 @@ export const PostByIdJsx = (props) => {
timestamp: 1596745156000,
width: SCREEN_WIDTH,
height: newHeight,
- loaded: true
+ loaded: true
});
});
})();
@@ -164,8 +190,8 @@ export const PostByIdJsx = (props) => {
return (
- { state.loaded ?
-
@@ -190,12 +216,20 @@ const styles = {
fontWeight: "bold",
marginTop: -2
},
+ menu: {
+ marginLeft: "auto",
+ marginRight: SCREEN_WIDTH / 30
+ },
pfp: {
width: SCREEN_WIDTH / 10,
height: SCREEN_WIDTH / 10,
marginRight: SCREEN_WIDTH / 28,
borderRadius: "100%"
},
+ ellipsis: {
+ width: SCREEN_WIDTH / 15,
+ height: SCREEN_WIDTH / 15
+ },
photo: {
flex: 1,
},
@@ -208,4 +242,27 @@ const styles = {
color: "#666",
paddingTop: 10
}
-};
\ No newline at end of file
+};
+
+// customStyles for react-native-popup-menu should be defined in particular
+// objects to be interpreted correctly.
+
+//const menuStyles = {
+// menuProviderWrapper
+//}
+
+const optionsStyles = {
+ optionWrapper: { // The wrapper around a single option
+ paddingLeft: SCREEN_WIDTH / 15,
+ paddingTop: SCREEN_WIDTH / 30,
+ paddingBottom: SCREEN_WIDTH / 30
+ },
+ optionsWrapper: { // The wrapper around all options
+ marginTop: SCREEN_WIDTH / 20,
+ marginBottom: SCREEN_WIDTH / 20,
+ },
+ optionsContainer: { // The Animated.View
+ borderTopLeftRadius: 10,
+ borderTopRightRadius: 10
+ }
+}