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"