aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/camera/GalleryIcon.tsx14
-rw-r--r--src/components/comments/ZoomInCropper.tsx17
-rw-r--r--src/components/moments/Moment.tsx62
-rw-r--r--src/routes/main/MainStackScreen.tsx14
-rw-r--r--src/screens/moments/CameraScreen.tsx37
-rw-r--r--src/utils/camera.ts54
6 files changed, 66 insertions, 132 deletions
diff --git a/src/components/camera/GalleryIcon.tsx b/src/components/camera/GalleryIcon.tsx
index c49ace7d..bc8b1d41 100644
--- a/src/components/camera/GalleryIcon.tsx
+++ b/src/components/camera/GalleryIcon.tsx
@@ -23,7 +23,19 @@ export const GalleryIcon: React.FC<GalleryIconProps> = ({
const navigation = useNavigation();
return (
<TouchableOpacity
- onPress={() => navigateToImagePicker(navigation, screenType, title)}
+ onPress={() =>
+ navigateToImagePicker((pic) =>
+ navigation.navigate('ZoomInCropper', {
+ screenType,
+ title,
+ media: {
+ filename: pic.filename,
+ uri: pic.path,
+ isVideo: false,
+ },
+ }),
+ )
+ }
style={styles.saveButton}>
{mostRecentPhotoUri !== '' ? (
<Image
diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx
index bca4e599..2fc0fd44 100644
--- a/src/components/comments/ZoomInCropper.tsx
+++ b/src/components/comments/ZoomInCropper.tsx
@@ -1,7 +1,6 @@
import {RouteProp} from '@react-navigation/core';
-import {useFocusEffect} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
-import {default as React, useCallback, useEffect, useState} from 'react';
+import {default as React, useEffect, useState} from 'react';
import {Image, StyleSheet, TouchableOpacity} from 'react-native';
import {normalize} from 'react-native-elements';
import ImageZoom, {IOnMove} from 'react-native-image-pan-zoom';
@@ -34,20 +33,6 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
const [y0, setY0] = useState<number>();
const [y1, setY1] = useState<number>();
- // Removes bottom navigation bar on current screen and add it back when navigating away
- useFocusEffect(
- useCallback(() => {
- navigation.dangerouslyGetParent()?.setOptions({
- tabBarVisible: false,
- });
- return () => {
- navigation.dangerouslyGetParent()?.setOptions({
- tabBarVisible: true,
- });
- };
- }, [navigation]),
- );
-
// Setting original aspect ratio of image
useEffect(() => {
if (media.uri) {
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index b080ca4a..25d69fba 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -1,8 +1,9 @@
import {useNavigation} from '@react-navigation/native';
import React from 'react';
-import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
+import {Alert, StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
import {Text} from 'react-native-animatable';
import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
+import ImagePicker from 'react-native-image-crop-picker';
import LinearGradient from 'react-native-linear-gradient';
import DeleteIcon from '../../assets/icons/delete-logo.svg';
import DownIcon from '../../assets/icons/down_icon.svg';
@@ -12,6 +13,7 @@ import UpIcon from '../../assets/icons/up_icon.svg';
import {TAGG_LIGHT_BLUE} from '../../constants';
import {MomentType, ScreenType} from '../../types';
import {normalize, SCREEN_WIDTH} from '../../utils';
+import {navigateToVideoPicker} from '../../utils/camera';
import MomentTile from './MomentTile';
interface MomentProps {
@@ -53,59 +55,6 @@ const Moment: React.FC<MomentProps> = ({
},
});
};
- /**
- * This function opens the ImagePicker, only lets you select video files,
- * formats the file extension, then makes a call to the server to get the presigned URL,
- * after which it makes a POST request to the returned URL to upload the file directly to S3.
- * params: none
- * @returns: none
- */
- const navigateToVideoPicker = () => {
- ImagePicker.openPicker({
- mediaType: 'video',
- })
- .then(async (vid) => {
- console.log(vid);
- if (vid.path) {
- navigateToCaptionScreenForVideo(vid.path);
- }
- })
- .catch((err) => {
- if (err.code && err.code !== 'E_PICKER_CANCELLED') {
- Alert.alert(ERROR_UPLOAD);
- }
- });
- };
-
- const navigateToImagePicker = () => {
- ImagePicker.openPicker({
- smartAlbums: [
- 'Favorites',
- 'RecentlyAdded',
- 'SelfPortraits',
- 'Screenshots',
- 'UserLibrary',
- ],
- mediaType: 'any',
- })
- .then((picture) => {
- if (picture.path && picture.filename) {
- navigation.navigate('ZoomInCropper', {
- screenType,
- title,
- media: {
- filename: picture.filename,
- uri: picture.path,
- isVideo: false,
- },
- });
- }
- })
- .catch((err) => {
- if (err.code && err.code !== 'E_PICKER_CANCELLED') {
- Alert.alert(ERROR_UPLOAD);
- }
- });
const navigateToCameraScreen = () => {
navigation.navigate('CameraScreen', {
title,
@@ -153,7 +102,10 @@ const Moment: React.FC<MomentProps> = ({
Alert.alert('Video Upload', 'pick one', [
{
text: 'gallery',
- onPress: navigateToVideoPicker,
+ onPress: () =>
+ navigateToVideoPicker((vid) =>
+ navigateToCaptionScreenForVideo(vid.path),
+ ),
},
{
text: 'camera (simulator will not work)',
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index f6adeab1..65a695f5 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -332,6 +332,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
name="ZoomInCropper"
component={ZoomInCropper}
options={{
+ ...modalStyle,
gestureEnabled: false,
}}
/>
@@ -339,6 +340,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
name="CameraScreen"
component={CameraScreen}
options={{
+ ...modalStyle,
gestureEnabled: false,
}}
/>
@@ -407,18 +409,6 @@ const styles = StyleSheet.create({
letterSpacing: normalize(1.3),
fontWeight: '700',
},
- whiteHeaderTitle: {
- fontSize: normalize(16),
- letterSpacing: normalize(1.3),
- fontWeight: '700',
- color: 'white',
- },
- blackHeaderTitle: {
- fontSize: normalize(16),
- letterSpacing: normalize(1.3),
- fontWeight: '700',
- color: 'black',
- },
});
export default MainStackScreen;
diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index c6ed1116..1826f9d7 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -1,8 +1,8 @@
import CameraRoll from '@react-native-community/cameraroll';
import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
-import {RouteProp, useFocusEffect} from '@react-navigation/core';
+import {RouteProp} from '@react-navigation/core';
import {StackNavigationProp} from '@react-navigation/stack';
-import React, {createRef, useCallback, useEffect, useState} from 'react';
+import React, {createRef, useEffect, useState} from 'react';
import {StyleSheet, TouchableOpacity, View} from 'react-native';
import {CameraType, FlashMode, RNCamera} from 'react-native-camera';
import CloseIcon from '../../assets/ionicons/close-outline.svg';
@@ -37,22 +37,6 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
const [showSaveButton, setShowSaveButton] = useState<boolean>(false);
/*
- * Removes bottom navigation bar on current screen and add it back when navigating away
- */
- useFocusEffect(
- useCallback(() => {
- navigation.dangerouslyGetParent()?.setOptions({
- tabBarVisible: false,
- });
- return () => {
- navigation.dangerouslyGetParent()?.setOptions({
- tabBarVisible: true,
- });
- };
- }, [navigation]),
- );
-
- /*
* Chooses the last picture from gallery to display as the gallery button icon
*/
useEffect(() => {
@@ -75,9 +59,10 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
navigation.navigate('CaptionScreen', {
screenType,
title,
- image: {
- filename: capturedImage,
- path: capturedImage,
+ media: {
+ filename: 'dont have that info',
+ uri: capturedImage,
+ isVideo: false, // TODO: false for now
},
});
};
@@ -116,7 +101,10 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
)}
<TouchableOpacity
onPress={() =>
- takePicture(cameraRef, setShowSaveButton, setCapturedImage)
+ takePicture(cameraRef, (pic) => {
+ setShowSaveButton(true);
+ setCapturedImage(pic.uri);
+ })
}
style={styles.captureButtonContainer}>
<View style={styles.captureButton} />
@@ -155,11 +143,6 @@ const styles = StyleSheet.create({
flexDirection: 'column',
backgroundColor: 'black',
},
- preview: {
- flex: 1,
- justifyContent: 'flex-end',
- alignItems: 'center',
- },
captureButtonContainer: {
alignSelf: 'center',
backgroundColor: 'transparent',
diff --git a/src/utils/camera.ts b/src/utils/camera.ts
index 73461ad7..1ee5dbf4 100644
--- a/src/utils/camera.ts
+++ b/src/utils/camera.ts
@@ -1,9 +1,8 @@
import CameraRoll from '@react-native-community/cameraroll';
-import {Dispatch, RefObject, SetStateAction} from 'react';
+import {RefObject} from 'react';
import {Alert} from 'react-native';
-import {RNCamera} from 'react-native-camera';
-import ImagePicker from 'react-native-image-crop-picker';
-import {ScreenType} from 'src/types';
+import {RNCamera, TakePictureResponse} from 'react-native-camera';
+import ImagePicker, {Image, Video} from 'react-native-image-crop-picker';
import {ERROR_UPLOAD} from '../constants/strings';
/*
@@ -11,8 +10,7 @@ import {ERROR_UPLOAD} from '../constants/strings';
*/
export const takePicture = (
cameraRef: RefObject<RNCamera>,
- setShowSaveButton: Dispatch<SetStateAction<boolean>>,
- setCapturedImage: Dispatch<SetStateAction<string>>,
+ callback: (pic: TakePictureResponse) => void,
) => {
if (cameraRef !== null) {
cameraRef.current?.pausePreview();
@@ -20,9 +18,8 @@ export const takePicture = (
forceUpOrientation: true,
writeExif: false,
};
- cameraRef.current?.takePictureAsync(options).then((response) => {
- setShowSaveButton(true);
- setCapturedImage(response.uri);
+ cameraRef.current?.takePictureAsync(options).then((pic) => {
+ callback(pic);
});
}
};
@@ -33,11 +30,7 @@ export const downloadImage = (capturedImageURI: string) => {
.catch((_err) => Alert.alert('Failed to save to device!'));
};
-export const navigateToImagePicker = (
- navigation: any,
- screenType: ScreenType,
- title: string,
-) => {
+export const navigateToImagePicker = (callback: (pic: Image) => void) => {
ImagePicker.openPicker({
smartAlbums: [
'Favorites',
@@ -48,13 +41,32 @@ export const navigateToImagePicker = (
],
mediaType: 'photo',
})
- .then((picture) => {
- if ('path' in picture) {
- navigation.navigate('ZoomInCropper', {
- screenType,
- title,
- image: picture,
- });
+ .then((pic) => {
+ if (pic.path && pic.filename) {
+ callback(pic);
+ }
+ })
+ .catch((err) => {
+ if (err.code && err.code !== 'E_PICKER_CANCELLED') {
+ Alert.alert(ERROR_UPLOAD);
+ }
+ });
+};
+
+/**
+ * This function opens the ImagePicker, only lets you select video files,
+ * formats the file extension, then makes a call to the server to get the presigned URL,
+ * after which it makes a POST request to the returned URL to upload the file directly to S3.
+ * params: none
+ * @returns: none
+ */
+export const navigateToVideoPicker = (callback: (vid: Video) => void) => {
+ ImagePicker.openPicker({
+ mediaType: 'video',
+ })
+ .then(async (vid) => {
+ if (vid.path) {
+ callback(vid);
}
})
.catch((err) => {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 10:57:43 +0000