diff --git a/app/mobile/ios/Databag.xcodeproj/project.pbxproj b/app/mobile/ios/Databag.xcodeproj/project.pbxproj index 281a515c..546293b5 100644 --- a/app/mobile/ios/Databag.xcodeproj/project.pbxproj +++ b/app/mobile/ios/Databag.xcodeproj/project.pbxproj @@ -246,12 +246,16 @@ inputPaths = ( "${PODS_ROOT}/Target Support Files/Pods-Databag/Pods-Databag-resources.sh", "${PODS_CONFIGURATION_BUILD_DIR}/EXConstants/EXConstants.bundle", + "${PODS_CONFIGURATION_BUILD_DIR}/RNImageCropPicker/QBImagePicker.bundle", "${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle", + "${PODS_CONFIGURATION_BUILD_DIR}/TOCropViewController/TOCropViewControllerBundle.bundle", ); name = "[CP] Copy Pods Resources"; outputPaths = ( "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EXConstants.bundle", + "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/QBImagePicker.bundle", "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle", + "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle", ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; diff --git a/app/mobile/ios/Databag/Info.plist b/app/mobile/ios/Databag/Info.plist index 9f116db7..bc4176fb 100644 --- a/app/mobile/ios/Databag/Info.plist +++ b/app/mobile/ios/Databag/Info.plist @@ -22,6 +22,8 @@ 1 LSRequiresIPhoneOS + NSPhotoLibraryUsageDescription + Used to set profile image and post photos NSAppTransportSecurity NSAllowsArbitraryLoads diff --git a/app/mobile/ios/Podfile.lock b/app/mobile/ios/Podfile.lock index 9e53251d..e4f6a2d6 100644 --- a/app/mobile/ios/Podfile.lock +++ b/app/mobile/ios/Podfile.lock @@ -314,6 +314,15 @@ PODS: - React-perflogger (= 0.69.5) - RNGestureHandler (2.6.1): - React-Core + - RNImageCropPicker (0.38.0): + - React-Core + - React-RCTImage + - RNImageCropPicker/QBImagePickerController (= 0.38.0) + - TOCropViewController + - RNImageCropPicker/QBImagePickerController (0.38.0): + - React-Core + - React-RCTImage + - TOCropViewController - RNReanimated (2.10.0): - DoubleConversion - FBLazyVector @@ -341,6 +350,7 @@ PODS: - React-RCTText - ReactCommon/turbomodule/core - Yoga + - TOCropViewController (2.6.0) - Yoga (1.14.0) DEPENDENCIES: @@ -387,12 +397,14 @@ DEPENDENCIES: - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`) - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) - RNGestureHandler (from `../node_modules/react-native-gesture-handler`) + - RNImageCropPicker (from `../node_modules/react-native-image-crop-picker`) - RNReanimated (from `../node_modules/react-native-reanimated`) - Yoga (from `../node_modules/react-native/ReactCommon/yoga`) SPEC REPOS: trunk: - fmt + - TOCropViewController EXTERNAL SOURCES: boost: @@ -479,6 +491,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/ReactCommon" RNGestureHandler: :path: "../node_modules/react-native-gesture-handler" + RNImageCropPicker: + :path: "../node_modules/react-native-image-crop-picker" RNReanimated: :path: "../node_modules/react-native-reanimated" Yoga: @@ -528,7 +542,9 @@ SPEC CHECKSUMS: React-runtimeexecutor: c778439c3c430a5719d027d3c67423b390a221fe ReactCommon: ab1003b81be740fecd82509c370a45b1a7dda0c1 RNGestureHandler: 28ad20bf02257791f7f137b31beef34b9549f54b + RNImageCropPicker: ffbba608264885c241cbf3a8f78eb7aeeb978241 RNReanimated: 7faa787e8d4493fbc95fab2ad331fa7625828cfa + TOCropViewController: 3105367e808b7d3d886a74ff59bf4804e7d3ab38 Yoga: c2b1f2494060865ac1f27e49639e72371b1205fa PODFILE CHECKSUM: df5a4d8901f42ad69df9f07100579df01b20e7e8 diff --git a/app/mobile/package.json b/app/mobile/package.json index 4e2c235a..8a807c81 100644 --- a/app/mobile/package.json +++ b/app/mobile/package.json @@ -21,6 +21,7 @@ "react-native": "0.69.5", "react-native-base64": "^0.2.1", "react-native-gesture-handler": "^2.6.1", + "react-native-image-crop-picker": "^0.38.0", "react-native-reanimated": "^2.10.0", "react-native-safe-area-context": "^4.3.3", "react-native-safe-area-view": "^1.1.1", diff --git a/app/mobile/src/session/profile/Profile.jsx b/app/mobile/src/session/profile/Profile.jsx index 9eb6ab9f..ce857f79 100644 --- a/app/mobile/src/session/profile/Profile.jsx +++ b/app/mobile/src/session/profile/Profile.jsx @@ -5,6 +5,7 @@ import { useProfile } from './useProfile.hook'; import { Logo } from 'utils/Logo'; import Ionicons from '@expo/vector-icons/AntDesign'; import Colors from 'constants/Colors'; +import ImagePicker from 'react-native-image-crop-picker' export function Profile() { @@ -23,18 +24,43 @@ export function Profile() { } } + const onGallery = async () => { + try { + const full = await ImagePicker.openPicker({ mediaType: 'photo', width: 256, height: 256 }); + const crop = await ImagePicker.openCropper({ path: full.path, width: 256, height: 256, cropperCircleOverlay: true, includeBase64: true }); + await actions.setProfileImage(crop.data); + } + catch (err) { + console.log(err); + } + } + + const onCamera = async () => { + try { + const full = await ImagePicker.openCamera({ mediaType: 'photo', width: 256, height: 256 }); + const crop = await ImagePicker.openCropper({ path: full.path, width: 256, height: 256, cropperCircleOverlay: true, includeBase64: true }); + await actions.setProfileImage(crop.data); + } + catch (err) { + console.log(err); + } + } + return ( { `${state.handle}@${state.node}` } - + - - - - + + + + + + + { state.name } @@ -51,7 +77,7 @@ export function Profile() { Visible in Registry - + diff --git a/app/mobile/src/session/profile/Profile.styled.js b/app/mobile/src/session/profile/Profile.styled.js index 2b9b9029..eb97e763 100644 --- a/app/mobile/src/session/profile/Profile.styled.js +++ b/app/mobile/src/session/profile/Profile.styled.js @@ -24,11 +24,20 @@ export const styles = StyleSheet.create({ paddingRight: 4, textDecorationLine: 'underline', }, - edit: { + camera: { + position: 'absolute', + bottom: 0, + left: 0, + padding: 8, + backgroundColor: Colors.lightgrey, + borderBottomLeftRadius: 8, + borderTopRightRadius: 8, + }, + gallery: { position: 'absolute', bottom: 0, right: 0, - padding: 4, + padding: 8, backgroundColor: Colors.lightgrey, borderBottomRightRadius: 8, borderTopLeftRadius: 8, @@ -89,6 +98,10 @@ export const styles = StyleSheet.create({ logoutText: { color: Colors.white, paddingLeft: 8, - } + }, + switch: { + false: Colors.grey, + true: Colors.background, + }, }) diff --git a/app/mobile/src/session/profile/useProfile.hook.js b/app/mobile/src/session/profile/useProfile.hook.js index 0e47fb41..44a1693f 100644 --- a/app/mobile/src/session/profile/useProfile.hook.js +++ b/app/mobile/src/session/profile/useProfile.hook.js @@ -43,6 +43,9 @@ export function useProfile() { setVisible: async (visible) => { await account.actions.setSearchable(visible); }, + setProfileImage: async (data) => { + await profile.actions.setProfileImage(data); + }, }; return { state, actions }; diff --git a/app/mobile/yarn.lock b/app/mobile/yarn.lock index c7cf242c..dc625b63 100644 --- a/app/mobile/yarn.lock +++ b/app/mobile/yarn.lock @@ -5512,6 +5512,11 @@ react-native-gradle-plugin@^0.0.7: resolved "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.0.7.tgz" integrity sha512-+4JpbIx42zGTONhBTIXSyfyHICHC29VTvhkkoUOJAh/XHPEixpuBduYgf6Y4y9wsN1ARlQhBBoptTvXvAFQf5g== +react-native-image-crop-picker@^0.38.0: + version "0.38.0" + resolved "https://registry.yarnpkg.com/react-native-image-crop-picker/-/react-native-image-crop-picker-0.38.0.tgz#3f67a0ec40618e3cd6e05d3e7b90e70d01eaddf8" + integrity sha512-FaLASXOP7R23pi20vMiVlXl0Y7cwTdl7y7yBqrlrsSH9gl9ibsU5y4mYWPYRbe8x9F/3zPGUE+1F0Gj/QF/peg== + react-native-reanimated@^2.10.0: version "2.10.0" resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.10.0.tgz#ed53be66bbb553b5b5e93e93ef4217c87b8c73db"