add code

pubnub · Oct 27, 2023 · daa3e2d · daa3e2d
1 parent c7e243b
commit daa3e2d
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 2 deletions.
diff --git a/samples/react-native-group-chat/app.json b/samples/react-native-group-chat/app.json
@@ -25,6 +25,14 @@
     },
     "web": {
       "favicon": "./assets/favicon.png"
-    }
+    },
+    "plugins": [
+      [
+        "expo-image-picker",
+        {
+          "photosPermission": "The app accesses your photos to let you share them with your friends."
+        }
+      ]
+    ]
   }
 }
diff --git a/samples/react-native-group-chat/package.json b/samples/react-native-group-chat/package.json
@@ -20,6 +20,7 @@
     "expo": "~49.0.8",
     "expo-clipboard": "~4.3.1",
     "expo-font": "~11.4.0",
+    "expo-image-picker": "~14.3.2",
     "expo-status-bar": "~1.6.0",
     "nanoid": "4.0.2",
     "react": "18.2.0",

diff --git a/samples/react-native-group-chat/screens/ordinary/chat/Chat.tsx b/samples/react-native-group-chat/screens/ordinary/chat/Chat.tsx
@@ -6,6 +6,7 @@ import {
   TouchableOpacity,
   FlatList,
   SafeAreaView,
+  Image,
 } from "react-native"
 import { GiftedChat, Bubble } from "react-native-gifted-chat"
 import { StackScreenProps } from "@react-navigation/stack"
@@ -19,6 +20,7 @@ import { colorPalette as colors, Text } from "../../../ui-components"
 import { useNavigation } from "@react-navigation/native"
 import { useCommonChatRenderers } from "../../../hooks"
 import { MaterialCommunityIcons } from "@expo/vector-icons"
+import * as ImagePicker from 'expo-image-picker';
 
 export function ChatScreen({}: StackScreenProps<HomeStackParamList, "Chat">) {
   const { chat, setCurrentChannel, currentChannel, getUser, currentChannelMembers } =
@@ -260,6 +262,24 @@ export function ChatScreen({}: StackScreenProps<HomeStackParamList, "Chat">) {
     [messageDraft]
   )
 
+  const pickImage = async () => {
+    // No permissions request is necessary for launching the image library
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.All,
+      allowsEditing: true,
+      aspect: [4, 3],
+      quality: 1,
+    });
+
+    const asset = result.assets[0]
+
+    if (!result.canceled) {
+      const fileName =
+        asset.fileName || asset.uri.substring(asset.uri.lastIndexOf("/") + 1, asset.uri.length)
+      messageDraft.files = [{ mimeType: "image/*", name: fileName, uri: asset.uri }]
+    }
+  };
+
   const renderBubble = (props: Bubble<EnhancedIMessage>["props"]) => {
     return (
       <View>
@@ -270,6 +290,14 @@ export function ChatScreen({}: StackScreenProps<HomeStackParamList, "Chat">) {
             right: { marginLeft: 0, padding: 12, backgroundColor: colors.teal100 },
           }}
         />
+        {props.currentMessage?.originalPnMessage.content.files?.length ? (
+          <View>
+            <Image
+              source={{ uri: props.currentMessage.originalPnMessage.content.files[0].url }}
+              style={{ width: 300, height: 300 }}
+            />
+          </View>
+        ) : null}
         {props.currentMessage?.originalPnMessage.hasThread ? (
           <TouchableOpacity
             onPress={() =>
@@ -289,6 +317,14 @@ export function ChatScreen({}: StackScreenProps<HomeStackParamList, "Chat">) {
     )
   }
 
+  const renderAccessory = () => {
+    return (
+      <View>
+        <Text onPress={pickImage}>Upload file</Text>
+      </View>
+    )
+  }
+
   if (!messageDraft || !chat) {
     return (
       <View style={{ justifyContent: "center", flex: 1 }}>
@@ -323,6 +359,7 @@ export function ChatScreen({}: StackScreenProps<HomeStackParamList, "Chat">) {
           handlePresentModalPress({ message: giftedMessage })
         }}
         messageContainerRef={giftedChatRef}
+        renderAccessory={renderAccessory}
       />
       <ActionsMenuComponent />
     </SafeAreaView>

diff --git a/yarn.lock b/yarn.lock
@@ -6077,6 +6077,18 @@ expo-font@~11.4.0:
   dependencies:
     fontfaceobserver "^2.1.0"
 
+expo-image-loader@~4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/expo-image-loader/-/expo-image-loader-4.3.0.tgz#d897b4d4f1838faa8291c36f00b99c2b36a6ac5c"
+  integrity sha512-2kqJIO+oYM8J3GbvTUHLqTSpt1dLpOn/X0eB4U4RTuzz/faj8l/TyQELsMBLlGAkweNUuG9LqznbaBz+WuSFEw==
+
+expo-image-picker@~14.3.2:
+  version "14.3.2"
+  resolved "https://registry.yarnpkg.com/expo-image-picker/-/expo-image-picker-14.3.2.tgz#5ae2f36fe518a10c8fe82e5ff2ee735c14817cfc"
+  integrity sha512-xr/YeQMIYheXecWP033F2SPwpBlBR5xVCx7YSfSCTH8Y9pw7Z886agqKGbS9QBVGlzJ5qecJktZ6ASSzeslDVg==
+  dependencies:
+    expo-image-loader "~4.3.0"
+
 expo-keep-awake@~12.3.0:
   version "12.3.0"
   resolved "https://registry.yarnpkg.com/expo-keep-awake/-/expo-keep-awake-12.3.0.tgz#c42449ae19c993274ddc43aafa618792b6aec408"
@@ -12543,7 +12555,7 @@ webpack-sources@^3.2.3:
   resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
-webpack@5.88.2, webpack@^5.64.4:
+webpack@^5.64.4:
   version "5.88.2"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.88.2.tgz#f62b4b842f1c6ff580f3fcb2ed4f0b579f4c210e"
   integrity sha512-JmcgNZ1iKj+aiR0OvTYtWQqJwq37Pf683dY9bVORwVbUrDhLhdn/PlO2sHsFHPkj7sHNQF3JwaAkp49V+Sq1tQ==