Merge pull request #417 from ephemeraHQ/ar/attachment-menu-android

Fix: Android Attachment menu
ephemeraHQ · Jul 29, 2024 · de09bcb · de09bcb
2 parents 6b5b128 + 800bead
commit de09bcb
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 16 deletions.
diff --git a/android/app/src/main/res/values-night/colors.xml b/android/app/src/main/res/values-night/colors.xml
@@ -1,4 +1,4 @@
 <resources>
-  <color name="bootsplash_background">#201A19</color>
-  <color name="colorPrimaryDark">#201A19</color>
+  <color name="bootsplash_background">#000000</color>
+  <color name="colorPrimaryDark">#000000</color>
 </resources>
diff --git a/components/Chat/Attachment/AddAttachmentButton.tsx b/components/Chat/Attachment/AddAttachmentButton.tsx
@@ -1,10 +1,12 @@
 import { MenuView } from "@react-native-menu/menu";
+import { textPrimaryColor } from "@styles/colors";
+import { strings } from "@utils/i18n/strings";
 import { RemoteAttachmentContent } from "@xmtp/react-native-sdk";
 import * as ImagePicker from "expo-image-picker";
 import { setStatusBarHidden } from "expo-status-bar";
 import mime from "mime";
 import { useCallback, useEffect, useRef } from "react";
-import { Platform, StyleSheet } from "react-native";
+import { Platform, StyleSheet, useColorScheme } from "react-native";
 import { v4 as uuidv4 } from "uuid";
 
 import { useAccountsStore } from "../../../data/store/accountsStore";
@@ -45,15 +47,14 @@ type AddAttachmentButtonProps = {
 export default function AddAttachmentButton({
   onSelectionStatusChange,
 }: AddAttachmentButtonProps) {
-  const { conversation, mediaPreviewRef } = useConversationContext([
+  const colorScheme = useColorScheme();
+  const { mediaPreviewRef } = useConversationContext([
     "conversation",
     "mediaPreviewRef",
   ]);
   const currentAccount = useAccountsStore((s) => s.currentAccount);
 
   const styles = useStyles();
-  const [cameraPermissions, requestCameraPermissions] =
-    ImagePicker.useCameraPermissions();
   const currentAttachmentMediaURI = useRef(mediaPreviewRef.current?.mediaURI);
   const assetRef = useRef<ImagePicker.ImagePickerAsset | undefined>(undefined);
 
@@ -170,18 +171,28 @@ export default function AddAttachmentButton({
       actions={[
         {
           id: "mediaLibrary",
-          title: "Photo Library",
+          title: strings.photo_library,
+          titleColor: textPrimaryColor(colorScheme),
+          imageColor: Platform.select({
+            ios: undefined,
+            android: textPrimaryColor(colorScheme),
+          }),
           image: Platform.select({
             ios: "square.and.arrow.up",
-            android: "square.and.arrow.up",
+            android: "ic_menu_share",
           }),
         },
         {
           id: "camera",
-          title: "Camera",
+          title: strings.camera,
+          titleColor: textPrimaryColor(colorScheme),
+          imageColor: Platform.select({
+            ios: undefined,
+            android: textPrimaryColor(colorScheme),
+          }),
           image: Platform.select({
             ios: "camera",
-            android: "camera",
+            android: "ic_menu_camera",
           }),
         },
       ]}

diff --git a/components/Chat/Input/Input.tsx b/components/Chat/Input/Input.tsx
@@ -224,8 +224,6 @@ export default function ChatInput({ inputHeight }: ChatInputProps) {
 
   const mediaPreviewAnimation = useSharedValue(mediaPreviewToPrefill ? 1 : 0);
 
-  const inputContainerRef = useRef<View>(null);
-
   const inputHeightAnimatedStyle = useAnimatedStyle(() => {
     return {
       maxHeight: inputHeight.value,
@@ -352,7 +350,7 @@ export default function ChatInput({ inputHeight }: ChatInputProps) {
   const inputIsFocused = useRef(false);
 
   return (
-    <View ref={inputContainerRef} style={styles.chatInputWrapper}>
+    <View style={styles.chatInputWrapper}>
       {replyingToMessage && (
         <View style={styles.replyToMessagePreview}>
           <ChatInputReplyPreview
@@ -465,9 +463,8 @@ const useStyles = () => {
   const colorScheme = useColorScheme();
   return StyleSheet.create({
     chatInputWrapper: {
-      position: "absolute",
-      left: 0,
-      right: 0,
+      backgroundColor: backgroundColor(colorScheme),
+      width: "100%",
       bottom: 0,
     },
     replyToMessagePreview: {

diff --git a/utils/i18n/strings.ts b/utils/i18n/strings.ts
@@ -41,4 +41,8 @@ export const strings = {
   are_you_sure: "Are you sure?",
   promote_to_admin: "Promote to admin",
   send_a_message: "Send a message",
+
+  // Attachments
+  photo_library: "Photo Library",
+  camera: "Camera",
 };