upload profile photos (save them locally)

src/view/com/util/UserAvatar.tsx

@@ -1,7 +1,8 @@
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import React, {useCallback, useState} from 'react'
-import React, {useCallback} from 'react'
+import {StyleSheet, View, TouchableOpacity, Alert, Image} from 'react-native'
-import {Alert, StyleSheet, View, TouchableOpacity} from 'react-native'
 import Svg, {Circle, Text, Defs, LinearGradient, Stop} from 'react-native-svg'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {openCamera, openCropper, openPicker} from 'react-native-image-crop-picker'
 import {getGradient} from '../../lib/asset-gen'
 import {colors} from '../../lib/styles'
 
@@ -16,9 +17,49 @@ export function UserAvatar({
   handle: string
   displayName: string | undefined
 }) {
+  const [localAvatarPicture, setLocalAvatarPicture] = useState<string | null>(
+    null,
+  )
   const initials = getInitials(displayName || handle)
   const gradient = getGradient(handle)
 
+  const handleEditAvatar = useCallback(() => {
+    Alert.alert('', 'Select upload method', [
+      {
+        text: 'Take a new photo',
+        onPress: () => {
+          openCamera({
+            mediaType: 'photo',
+            cropping: true,
+            width: 80,
+            height: 80,
+            cropperCircleOverlay: true,
+          }).then(item => {
+            setLocalAvatarPicture(item.path)
+          })
+        },
+      },
+      {
+        text: 'Select from gallery',
+        onPress: () => {
+          openPicker({
+            mediaType: 'photo',
+          }).then(async item => {
+            await openCropper({
+              mediaType: 'photo',
+              path: item.path,
+              width: 80,
+              height: 80,
+              cropperCircleOverlay: true,
+            }).then(croppedItem => {
+              setLocalAvatarPicture(croppedItem.path)
+            })
+          })
+        },
+      },
+    ])
+  }, [])
+
   const renderSvg = (size: number, initials: string) => (
     <Svg width={size} height={size} viewBox="0 0 100 100">
       <Defs>
@@ -40,13 +81,13 @@ export function UserAvatar({
     </Svg>
   )
 
-  const handleEditAvatar = useCallback(() => {
-    Alert.alert('TB Implemented')
-  }, [])
-
   return isMe ? (
     <TouchableOpacity onPress={handleEditAvatar}>
-      {renderSvg(size, initials)}
+      {localAvatarPicture != null ? (
+        <Image style={styles.avatarImage} source={{uri: localAvatarPicture}} />
+      ) : (
+        renderSvg(size, initials)
+      )}
       <View style={styles.editButtonContainer}>
         <FontAwesomeIcon
           icon="camera"
@@ -88,4 +129,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  avatarImage: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+  },
 })

src/view/com/util/UserBanner.tsx

@@ -1,9 +1,10 @@
-import React, {useCallback} from 'react'
+import React, {useCallback, useState} from 'react'
-import {Alert, StyleSheet, View, TouchableOpacity} from 'react-native'
+import {StyleSheet, View, TouchableOpacity, Alert, Image} from 'react-native'
 import Svg, {Rect, Defs, LinearGradient, Stop} from 'react-native-svg'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {getGradient} from '../../lib/asset-gen'
 import {colors} from '../../lib/styles'
+import {openCamera, openCropper, openPicker} from 'react-native-image-crop-picker'
 
 export function UserBanner({
   handle,
@@ -12,8 +13,47 @@ export function UserBanner({
   handle: string
   isMe?: boolean
 }) {
+  const [localBannerPicture, setLocalBannerPicture] = useState<string | null>(
+    null,
+  )
+
   const gradient = getGradient(handle)
 
+  const handleEditBanner = useCallback(() => {
+    Alert.alert('', 'Select upload method', [
+      {
+        text: 'Take a new photo',
+        onPress: () => {
+          openCamera({
+            mediaType: 'photo',
+            cropping: true,
+            width: 1000,
+            height: 120,
+          }).then(item => {
+            setLocalBannerPicture(item.path)
+          })
+        },
+      },
+      {
+        text: 'Select from gallery',
+        onPress: () => {
+          openPicker({
+            mediaType: 'photo',
+          }).then(async item => {
+            await openCropper({
+              mediaType: 'photo',
+              path: item.path,
+              width: 1000,
+              height: 120,
+            }).then(croppedItem => {
+              setLocalBannerPicture(croppedItem.path)
+            })
+          })
+        },
+      },
+    ])
+  }, [])
+
   const renderSvg = () => (
     <Svg width="100%" height="120" viewBox="50 0 200 100">
       <Defs>
@@ -31,13 +71,13 @@ export function UserBanner({
     </Svg>
   )
 
-  const handleEditBanner = useCallback(() => {
-    Alert.alert('TB Implemented')
-  }, [])
-
   return isMe ? (
     <TouchableOpacity onPress={handleEditBanner}>
-      {renderSvg()}
+      {localBannerPicture != null ? (
+        <Image style={styles.bannerImage} source={{uri: localBannerPicture}} />
+      ) : (
+        renderSvg()
+      )}
       <View style={styles.editButtonContainer}>
         <FontAwesomeIcon
           icon="camera"
@@ -63,4 +103,8 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  bannerImage: {
+    width: 1000,
+    height: 120,
+  },
 })