Fully functional SVG screenshots, most changes found in AddLandmarkPanel, such as in the submit method, and ViewShot

android/app/src/main/java/com/clicknpush/mobile/MainApplication.java

@@ -7,6 +7,7 @@ import androidx.annotation.NonNull;
 
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import fr.greweb.reactnativeviewshot.RNViewShotPackage;
 import com.lugg.ReactNativeConfig.ReactNativeConfigPackage;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;

android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'cnp-mobile'
+include ':react-native-view-shot'
+project(':react-native-view-shot').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-view-shot/android')
 include ':react-native-config'
 project(':react-native-config').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-config/android')
 

ios/Podfile

@@ -15,6 +15,8 @@ target 'cnpmobile' do
   # Convert all permission pods into static libraries
 pod 'react-native-config', :path => '../node_modules/react-native-config'
 
+pod 'react-native-view-shot', :path => '../node_modules/react-native-view-shot'
+
 pre_install do |installer|
   Pod::Installer::Xcode::TargetValidator.send(:define_method, :verify_no_static_framework_transitive_dependencies) {}
 

src/components/Map/IndoorFloor.tsx

@@ -18,7 +18,7 @@ function IndoorFloor(props) {
       <FifthFloorC viewBox='257 153 270 290' style={{ opacity: 0.7 }} height={"100%"} width={"100%"} />,
   ]
 
-  return compArray[props.floorNum]
+  return compArray[props.floorNum] 
 }
 
 export default IndoorFloor

src/components/Map/MainMapComponent/IndoorMap.tsx

@@ -42,10 +42,6 @@ const IndoorMap: React.FC<IndoorMapProps> = ({ navigation, landmarks, promptAddL
 
   const [localLandmarks, setLocalLandmarks] = useState<Landmark[]>([])
 
-
-  const [sport, setSport] = useState("football");
-
-
   const imageDim = 0.05 * Dimensions.get("window").width;
 
   const loadCircles = applyFilter(landmarks)?.map((item) => {
@@ -77,7 +73,7 @@ const IndoorMap: React.FC<IndoorMapProps> = ({ navigation, landmarks, promptAddL
             }
             catch (err) {
               console.log("error has been caught!")
-              Toast.show("An error has occured. Please ensure thumb is not moving when holding down on screen.", { duration: Toast.durations.LONG, })
+              Toast.show("An error has occured. Please ensure finger is not moving when holding down on screen.", { duration: Toast.durations.LONG, })
 
               // Alert.alert("An error has occured." , "Please ensure thumb is not moving when holding down on screen.")
               // consider toast

src/components/Map/Panels/AddLandmarkPanel.tsx

@@ -9,7 +9,7 @@ import { FontAwesome } from "@expo/vector-icons";
 import * as ImagePicker from 'expo-image-picker';
 import { ImageInfo } from "expo-image-picker/build/ImagePicker.types";
 import React, { memo, useEffect, useState, useRef } from "react";
-import { ActivityIndicator, Dimensions, Image, Platform, SafeAreaView, Text, TextInput, TouchableOpacity, View, ImageSourcePropType, Share, } from 'react-native';
+import { ActivityIndicator, Dimensions, Image, Platform, SafeAreaView, Text, TextInput, TouchableOpacity, View, ImageSourcePropType, Share, StyleSheet } from 'react-native';
 import { ScrollView } from "react-native-gesture-handler";
 import Modal from 'react-native-modal';
 import { checkMultiple, PERMISSIONS, RESULTS } from "react-native-permissions";
@@ -23,7 +23,7 @@ import { Svg, Rect, Image as ImageSVG, Circle } from 'react-native-svg'
 import ReactDOMServer from 'react-dom/server'; //npm i --save-dev @types/react-dom
 
 import IndoorFloor from "../IndoorFloor";
-import ViewShot from "react-native-view-shot";
+import ViewShot, { captureRef, captureScreen } from "react-native-view-shot";
 
 /**
  * Props for the {@link AddLandmarkPanel} component.
@@ -60,8 +60,8 @@ const AddLandmarkPanel: React.FC<AddLandmarkProps> = ({ newLandmark, setNewLandm
     const capture: any = useRef();
 
     const imgWidth = 346
-    const imgHeight = 443
-    const imageDim = 27
+    const imgHeight = 448
+    const imageDim = 25
 
     const {
         addLandmarkAsync,
@@ -155,9 +155,21 @@ const AddLandmarkPanel: React.FC<AddLandmarkProps> = ({ newLandmark, setNewLandm
 
         if (typeof newLandmark.floor === 'number') {
             // let imageURI = await capture.current.capture()
-            let imageURI = "string"
-            console.log("*AddLandmarkPanel* imageURI is " + imageURI)
-            await addLandmarkAsync({ landmarkValue: newLandmark, photos: photos, indoorLmLocImg: imageURI }); // pass it in here
+
+            captureRef(capture, {
+                format: "jpg",
+                quality: 1,
+                result: 'base64'
+            }).then(
+                (uri) => {
+                    console.log("Image is", uri.substring(0, 100))
+                    addLandmarkAsync({ landmarkValue: newLandmark, photos: photos, indoorLmLocImg: uri }); // pass it in here
+                },
+                (error) => {
+                    console.error("Oops, snapshot failed", error)
+                }
+            );
+
         }
         else {
             await addLandmarkAsync({ landmarkValue: newLandmark, photos: photos });
@@ -202,7 +214,6 @@ const AddLandmarkPanel: React.FC<AddLandmarkProps> = ({ newLandmark, setNewLandm
         <Modal
             useNativeDriver={true}
             useNativeDriverForBackdrop={true}
-
             testID="addLMModal"
             avoidKeyboard={photos.length == 0}
             onBackdropPress={close}
@@ -309,22 +320,35 @@ const AddLandmarkPanel: React.FC<AddLandmarkProps> = ({ newLandmark, setNewLandm
             </SafeAreaView>
             <PhotoPicker multiple={true} menuType='alert' photoSourceMenuOpened={photoSourceMenuOpened} onReceivedPhotoResult={result => addPhoto(result)} cancel={() => togglePhotoSourceMenu(false)} />
 
-            {/* <View style={{position:'absolute', zIndex:-1}}>
-            <ViewShot ref={capture} options={{format:'jpg'}}>
-                <Svg>
-                    {renderIndoorLandmarkPin(newLandmark)}
-                    <IndoorFloor floorNum={newLandmark.floor} />
-                    Issue rn is that upon initial rendering, RN doesnt know what "newLandmark" is
 
-                    <ImageSVG x={100} y={100} width={imageDim} height={imageDim} href={lmTypes[2]['image'] as ImageSourcePropType} />
-                    <IndoorFloor floorNum={2} />
-                </Svg> 
+            <ViewShot style={{ width: imgWidth+20, height: imgHeight+20, position: 'absolute', right: -2000 }} ref={capture} >
+                {/* {console.log("newLandmark is " + newLandmark)} */}
+                {newLandmark == null || newLandmark.floor == null || newLandmark.landmark_type == null ? <></> :
+                    <View style={styles.container}>
+                        <Svg>
+                            {console.log("x coord is " + newLandmark.longitude + " and y coord is " + newLandmark.latitude)}
+                            <ImageSVG x={newLandmark.longitude*imgWidth-3} y={newLandmark.latitude*imgHeight-3} width={imageDim} height={imageDim} href={lmTypes[newLandmark.landmark_type]['image'] as ImageSourcePropType} />
+                            <IndoorFloor floorNum={newLandmark.floor} />
+                        </Svg>
+                    </View>
+                }
             </ViewShot>
-            </View> */}
-
-
         </Modal>
     )
 }
 
-export default memo(AddLandmarkPanel);
+const styles = StyleSheet.create({
+    container: {
+        aspectRatio: 8 / 10,  // (caters to portrait mode) (width is 80% the value of height dimension)
+        width: '100%',
+        height: '100%',
+        maxWidth: "100%",
+        maxHeight: "100%",
+        backgroundColor: "white",
+        padding:10
+    }
+})
+
+
+
+export default memo(AddLandmarkPanel);