aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/camera/FlashButton.tsx42
-rw-r--r--src/components/camera/FlipButton.tsx29
-rw-r--r--src/components/camera/GalleryIcon.tsx43
-rw-r--r--src/components/camera/SaveButton.tsx26
-rw-r--r--src/components/camera/index.ts4
-rw-r--r--src/components/camera/styles.tsx53
-rw-r--r--src/components/index.ts9
-rw-r--r--src/components/moments/Moment.tsx13
8 files changed, 210 insertions, 9 deletions
diff --git a/src/components/camera/FlashButton.tsx b/src/components/camera/FlashButton.tsx
new file mode 100644
index 00000000..06a4e44e
--- /dev/null
+++ b/src/components/camera/FlashButton.tsx
@@ -0,0 +1,42 @@
+import React, {Dispatch, SetStateAction} from 'react';
+import {Text, TouchableOpacity} from 'react-native';
+import {FlashMode} from 'react-native-camera';
+import FlashOffIcon from '../../assets/icons/camera/flash-off.svg';
+import FlashOnIcon from '../../assets/icons/camera/flash-on.svg';
+import {styles} from './styles';
+
+interface FlashButtonProps {
+ flashMode: keyof FlashMode;
+ setFlashMode: Dispatch<SetStateAction<keyof FlashMode>>;
+}
+
+/*
+ * Toggles between flash on/off modes
+ */
+export const FlashButton: React.FC<FlashButtonProps> = ({
+ flashMode,
+ setFlashMode,
+}) => (
+ <TouchableOpacity
+ onPress={() => setFlashMode(flashMode === 'on' ? 'off' : 'on')}
+ style={styles.flashButtonContainer}>
+ {flashMode === 'on' ? (
+ <FlashOnIcon
+ height={30}
+ width={20}
+ color={'white'}
+ style={styles.flashIcon}
+ />
+ ) : (
+ <FlashOffIcon
+ height={30}
+ width={20}
+ color={'white'}
+ style={styles.flashIcon}
+ />
+ )}
+ <Text style={styles.saveButtonLabel}>Flash</Text>
+ </TouchableOpacity>
+);
+
+export default FlashButton;
diff --git a/src/components/camera/FlipButton.tsx b/src/components/camera/FlipButton.tsx
new file mode 100644
index 00000000..c6f710a9
--- /dev/null
+++ b/src/components/camera/FlipButton.tsx
@@ -0,0 +1,29 @@
+import React, {Dispatch, SetStateAction} from 'react';
+import {Text, TouchableOpacity} from 'react-native';
+import {CameraType} from 'react-native-camera';
+import FlipIcon from '../../assets/icons/camera/flip.svg';
+import {styles} from './styles';
+
+interface FlipButtonProps {
+ setCameraType: Dispatch<SetStateAction<keyof CameraType>>;
+ cameraType: keyof CameraType;
+}
+
+/*
+ * Toggles between back camera and front camera
+ * Appears only when user has not taken a picture yet
+ * Once user takes a picture, this button disappears to reveal the save button
+ */
+export const FlipButton: React.FC<FlipButtonProps> = ({
+ setCameraType,
+ cameraType,
+}) => (
+ <TouchableOpacity
+ onPress={() => setCameraType(cameraType === 'front' ? 'back' : 'front')}
+ style={styles.saveButton}>
+ <FlipIcon width={40} height={40} />
+ <Text style={styles.saveButtonLabel}>Flip</Text>
+ </TouchableOpacity>
+);
+
+export default FlipButton;
diff --git a/src/components/camera/GalleryIcon.tsx b/src/components/camera/GalleryIcon.tsx
new file mode 100644
index 00000000..c49ace7d
--- /dev/null
+++ b/src/components/camera/GalleryIcon.tsx
@@ -0,0 +1,43 @@
+import {useNavigation} from '@react-navigation/native';
+import React from 'react';
+import {Image, Text, TouchableOpacity, View} from 'react-native';
+import {ScreenType} from '../../types';
+import {navigateToImagePicker} from '../../utils/camera';
+import {styles} from './styles';
+
+interface GalleryIconProps {
+ screenType: ScreenType;
+ title: string;
+ mostRecentPhotoUri: string;
+}
+
+/*
+ * Displays the most recent photo in the user's gallery
+ * On click, navigates to the image picker
+ */
+export const GalleryIcon: React.FC<GalleryIconProps> = ({
+ screenType,
+ title,
+ mostRecentPhotoUri,
+}) => {
+ const navigation = useNavigation();
+ return (
+ <TouchableOpacity
+ onPress={() => navigateToImagePicker(navigation, screenType, title)}
+ style={styles.saveButton}>
+ {mostRecentPhotoUri !== '' ? (
+ <Image
+ source={{uri: mostRecentPhotoUri}}
+ width={40}
+ height={40}
+ style={styles.galleryIcon}
+ />
+ ) : (
+ <View style={styles.galleryIconEmpty} />
+ )}
+ <Text style={styles.saveButtonLabel}>Gallery</Text>
+ </TouchableOpacity>
+ );
+};
+
+export default GalleryIcon;
diff --git a/src/components/camera/SaveButton.tsx b/src/components/camera/SaveButton.tsx
new file mode 100644
index 00000000..840cc804
--- /dev/null
+++ b/src/components/camera/SaveButton.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import {Text, TouchableOpacity} from 'react-native';
+import SaveIcon from '../../assets/icons/camera/save.svg';
+import {downloadImage} from '../../utils/camera';
+import {styles} from './styles';
+
+interface SaveButtonProps {
+ capturedImageURI: string;
+}
+
+/*
+ * Appears when a picture has been taken,
+ * On click, saves the captured image to "Recents" album on device gallery
+ */
+export const SaveButton: React.FC<SaveButtonProps> = ({capturedImageURI}) => (
+ <TouchableOpacity
+ onPress={() => {
+ downloadImage(capturedImageURI);
+ }}
+ style={styles.saveButton}>
+ <SaveIcon width={40} height={40} />
+ <Text style={styles.saveButtonLabel}>Save</Text>
+ </TouchableOpacity>
+);
+
+export default SaveButton;
diff --git a/src/components/camera/index.ts b/src/components/camera/index.ts
new file mode 100644
index 00000000..d33d1e4a
--- /dev/null
+++ b/src/components/camera/index.ts
@@ -0,0 +1,4 @@
+export {default as GalleryIcon} from './GalleryIcon';
+export {default as FlashButton} from './FlashButton';
+export {default as FlipButton} from './FlipButton';
+export {default as SaveButton} from './SaveButton';
diff --git a/src/components/camera/styles.tsx b/src/components/camera/styles.tsx
new file mode 100644
index 00000000..33b47cc4
--- /dev/null
+++ b/src/components/camera/styles.tsx
@@ -0,0 +1,53 @@
+import {StyleSheet} from 'react-native';
+import {normalize, SCREEN_WIDTH} from '../../utils/layouts';
+
+export const styles = StyleSheet.create({
+ saveButton: {
+ zIndex: 1,
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ width: (SCREEN_WIDTH - 100) / 2,
+ },
+ saveButtonLabel: {
+ color: 'white',
+ fontWeight: '700',
+ fontSize: normalize(12),
+ lineHeight: normalize(14.32),
+ marginTop: 5,
+ zIndex: 999,
+ },
+ flashButtonContainer: {
+ position: 'absolute',
+ backgroundColor: '#808080',
+ opacity: 0.25,
+ zIndex: 1,
+ top: normalize(50),
+ right: 0,
+ marginRight: normalize(18),
+ height: 86,
+ width: 49,
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ borderRadius: 30,
+ },
+ galleryIcon: {
+ borderWidth: 2,
+ borderColor: 'white',
+ borderRadius: 5,
+ width: 40,
+ height: 40,
+ },
+ galleryIconEmpty: {
+ borderWidth: 2,
+ borderColor: 'white',
+ borderRadius: 5,
+ width: 40,
+ height: 40,
+ backgroundColor: 'grey',
+ },
+ flashIcon: {
+ zIndex: 2,
+ },
+});
diff --git a/src/components/index.ts b/src/components/index.ts
index 47dc583b..c2f50118 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,9 +1,10 @@
+export * from './camera';
+export * from './comments';
export * from './common';
+export * from './messages';
+export * from './moments';
export * from './onboarding';
export * from './profile';
export * from './search';
-export * from './taggs';
-export * from './comments';
-export * from './moments';
export * from './suggestedPeople';
-export * from './messages';
+export * from './taggs';
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index a43a2830..b080ca4a 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -1,9 +1,8 @@
import {useNavigation} from '@react-navigation/native';
import React from 'react';
-import {Alert, StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
+import {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';
@@ -11,7 +10,6 @@ import BigPlusIcon from '../../assets/icons/plus-icon-white.svg';
import PlusIcon from '../../assets/icons/plus-icon.svg';
import UpIcon from '../../assets/icons/up_icon.svg';
import {TAGG_LIGHT_BLUE} from '../../constants';
-import {ERROR_UPLOAD} from '../../constants/strings';
import {MomentType, ScreenType} from '../../types';
import {normalize, SCREEN_WIDTH} from '../../utils';
import MomentTile from './MomentTile';
@@ -108,6 +106,11 @@ const Moment: React.FC<MomentProps> = ({
Alert.alert(ERROR_UPLOAD);
}
});
+ const navigateToCameraScreen = () => {
+ navigation.navigate('CameraScreen', {
+ title,
+ screenType,
+ });
};
return (
@@ -174,7 +177,7 @@ const Moment: React.FC<MomentProps> = ({
<PlusIcon
width={23}
height={23}
- onPress={() => navigateToImagePicker()}
+ onPress={() => navigateToCameraScreen()}
color={TAGG_LIGHT_BLUE}
style={styles.horizontalMargin}
/>
@@ -204,7 +207,7 @@ const Moment: React.FC<MomentProps> = ({
/>
))}
{(images === undefined || images.length === 0) && !userXId && (
- <TouchableOpacity onPress={() => navigateToImagePicker()}>
+ <TouchableOpacity onPress={() => navigateToCameraScreen()}>
<LinearGradient
colors={['rgba(105, 141, 211, 1)', 'rgba(105, 141, 211, 0.3)']}>
<View style={styles.defaultImage}>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 11:41:03 +0000