Video message

android/app/build.gradle

@@ -108,6 +108,7 @@ dependencies {
     // The version of react-native is set by the React Native Gradle Plugin
     implementation("com.facebook.react:react-android")
     implementation(platform("com.google.firebase:firebase-bom:32.6.0"))
+    implementation project(':react-native-share')
     debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
     debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
         exclude group:'com.squareup.okhttp3', module:'okhttp'

android/app/src/main/AndroidManifest.xml

@@ -27,6 +27,12 @@
         <intent-filter>
             <action android:name="android.intent.action.MAIN" />
             <category android:name="android.intent.category.LAUNCHER" />
+            <action android:name="android.intent.action.VIEW" />
+            <category android:name="android.intent.category.DEFAULT" />
+            <category android:name="android.intent.category.BROWSABLE" />
+            <data android:scheme="http" />
+            <data android:scheme="https" />
+            <data android:mimeType="video/*" />
         </intent-filter>
       </activity>
     </application>

android/app/src/main/java/com/kit_box/MainApplication.java

@@ -9,6 +9,8 @@
 import com.facebook.react.defaults.DefaultReactNativeHost;
 import com.facebook.soloader.SoLoader;
 import java.util.List;
+import cl.json.RNSharePackage;
+import cl.json.ShareApplication;
 
 public class MainApplication extends Application implements ReactApplication {
 

android/build.gradle

@@ -6,6 +6,8 @@ buildscript {
         minSdkVersion = 21
         compileSdkVersion = 33
         targetSdkVersion = 33
+
+        // kotlinVersion = '1.5.0'
 
         // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
         ndkVersion = "23.1.7779620"
@@ -18,5 +20,6 @@ buildscript {
         classpath("com.android.tools.build:gradle")
         classpath("com.facebook.react:react-native-gradle-plugin")
         classpath ('com.google.gms:google-services:4.4.0')
+        // classpath ("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion")
     }
 }

android/settings.gradle

@@ -2,3 +2,7 @@ rootProject.name = 'kit_box'
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'
 includeBuild('../node_modules/@react-native/gradle-plugin')
+include ':react-native-audio-recorder-player'
+project(':react-native-audio-recorder-player').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-audio-recorder-player/android')
+include ':react-native-share'
+project(':react-native-share').projectDir = new File(rootProject.projectDir,    '../node_modules/react-native-share/android')

package.json

@@ -36,10 +36,12 @@
     "patch-package": "^8.0.0",
     "react": "18.2.0",
     "react-native": "0.72.6",
+    "react-native-audio-recorder-player": "^3.6.5",
     "react-native-blob-util": "^0.19.2",
     "react-native-calendars": "^1.1302.0",
     "react-native-document-picker": "^9.0.1",
     "react-native-dotenv": "^3.4.9",
+    "react-native-fs": "^2.20.0",
     "react-native-gesture-bottom-sheet": "^1.1.0",
     "react-native-gesture-handler": "^2.14.0",
     "react-native-gifted-chat": "^2.4.0",
@@ -58,8 +60,10 @@
     "react-native-safe-area-context": "^4.7.4",
     "react-native-screens": "^3.27.0",
     "react-native-select-dropdown": "^3.4.0",
+    "react-native-share": "^10.0.2",
     "react-native-size-matters": "^0.4.2",
     "react-native-slider": "^0.11.0",
+    "react-native-sound": "^0.11.2",
     "react-native-splash-screen": "^3.3.0",
     "react-native-svg": "^13.14.0",
     "react-native-svg-transformer": "^1.1.0",
@@ -70,6 +74,7 @@
     "react-native-twilio-video-webrtc": "^3.2.0",
     "react-native-vector-icons": "^10.0.1",
     "react-native-video": "^5.2.1",
+    "react-native-video-controls": "^2.8.1",
     "react-native-video-player": "^0.14.0",
     "react-native-vision-camera": "^3.6.10",
     "rn-bottom-drawer": "^1.4.3",

src/Components/Chat/FileTransfer.jsx

@@ -23,11 +23,11 @@ const FileTransfer = props => {
       <View style={styles.frame}>
         <Image
           source={
-            fileType === 'pdf'
+            fileType === 'pdf' || fileType === 'PDF'
               ? require('../../Assets/images/pdf.png')
-              : require('../../Assets/images/png.png')
+              : require('../../Assets/images/video.png')
           }
-          style={{height: 60, width: 60}}
+          style={{height: 60, width: 50}}
         />
         {props.isFooter ? (
           ''
@@ -57,6 +57,7 @@ const styles = StyleSheet.create({
     lineHeight: 20,
     marginLeft: 5,
     marginRight: 5,
+    maxWidth: moderateScale(175),
   },
   textType: {
     color: 'black',

src/Components/Chat/List.jsx

@@ -8,14 +8,19 @@ import Dot from 'react-native-vector-icons/Octicons';
 import Check from 'react-native-vector-icons/AntDesign';
 import {useNavigation} from '@react-navigation/core';
 
-const Lists = ({items, groupContact}) => {
+const Lists = ({items, groupContact, handleGroupSelection}) => {
   const Item = items.item;
   const navigation = useNavigation();
 
   return (
     <TouchableRipple
       style={styles.container}
-      onPress={() => navigation.navigate('ChatRoom', {Item})}>
+      onLongPress={() => handleGroupSelection(Item)}
+      onPress={() =>
+        groupContact?.length > 0
+          ? handleGroupSelection(Item)
+          : navigation.navigate('ChatRoom', {Item})
+      }>
       <List.Item
         left={() => (
           <>
@@ -112,6 +117,7 @@ export default Lists;
 
 const styles = StyleSheet.create({
   container: {
+    flex: 1,
     backgroundColor: colors.WHITE,
     marginBottom: moderateScale(-12),
   },

src/Components/Chat/ViewFile.jsx

@@ -2,31 +2,41 @@ import React, {useState} from 'react';
 import {Modal, Portal, Text, TouchableRipple, Icon} from 'react-native-paper';
 import {moderateScale} from 'react-native-size-matters';
 import Pdf from 'react-native-pdf';
-import {StyleSheet, View} from 'react-native';
+import {Image, StyleSheet, View} from 'react-native';
 import {colors} from '../../Utils/colors';
 import {fonts} from '../../Utils/fonts';
 
-const ViewFile = ({props, visible, onClose}) => {
-  const filePath = props.currentMessage.file.url;
+const ViewFile = ({props, visible, onClose, isImage, isVideo}) => {
+  const filePath = props.file.url || props.image;
   var name = '';
   if (filePath !== undefined) {
     name = filePath.split('/').pop();
   }
-  const [url, setUrl] = useState(props.currentMessage.file.url);
+
   return (
     <Portal>
       <Modal visible={visible} contentContainerStyle={styles.containerStyle}>
         <Text style={styles.pdfName}>{name}</Text>
         <View style={styles.container}>
-          <Pdf
-            source={{uri: url}}
-            style={{
-              height: '100%',
-              width: '100%',
-            }}
-          />
+          {!isImage && !isVideo && (
+            <Pdf
+              source={{uri: filePath}}
+              style={{
+                height: '100%',
+                width: '100%',
+              }}
+            />
+          )}
+          {isImage && (
+            <Image
+              style={styles.viewImage}
+              source={{uri: filePath}}
+              width="100%"
+              height="90%"
+            />
+          )}
           <TouchableRipple onPress={onClose} style={styles.buttonCancel}>
-            <Icon source="close" color={colors.BLACK} size={30} />
+            <Icon source="close" color={colors.BLACK} size={20} />
           </TouchableRipple>
         </View>
       </Modal>
@@ -45,7 +55,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     position: 'absolute',
     borderColor: 'black',
-    left: '85%',
+    left: '88%',
     top: moderateScale(-30),
   },
   textBtn: {
@@ -63,8 +73,13 @@ const styles = StyleSheet.create({
     // position: 'absolute',
     paddingTop: moderateScale(50),
     paddingLeft: moderateScale(20),
-    fontFamily: fonts.BOLD,
-    fontSize: moderateScale(20),
-    backgroundColor: colors.GRAY,
+    fontFamily: fonts.MEDIUM,
+    fontSize: moderateScale(12),
+    maxWidth: moderateScale(320),
+  },
+
+  viewImage: {
+    alignSelf: 'center',
+    resizeMode: 'contain',
   },
 });

src/Components/Header/HeaderWithBackaction.jsx

@@ -9,7 +9,7 @@ import MenuPopup from '../Menu/Menu';
 import {useNavigation} from '@react-navigation/native';
 import Icon from 'react-native-vector-icons/Feather';
 
-const HeaderWithBackaction = ({title, openMenu, isChat, profile}) => {
+const HeaderWithBackaction = ({title, openMenu, isChat, profile_pic}) => {
   const navigation = useNavigation();
 
   const _goBack = () => navigation.navigate('ChatList');
@@ -18,6 +18,8 @@ const HeaderWithBackaction = ({title, openMenu, isChat, profile}) => {
 
   const _handleMore = () => openMenu();
 
+  console.log(profile_pic, ' pp');
+
   return (
     <Appbar.Header
       style={[
@@ -32,7 +34,7 @@ const HeaderWithBackaction = ({title, openMenu, isChat, profile}) => {
         size={20}
         onPress={() => navigation.goBack()}
       />
-      {isChat && <Avatar.Image size={30} source={{uri: profile}} />}
+      {isChat && <Avatar.Image size={30} source={{uri: profile_pic}} />}
       <Appbar.Content
         title={title !== '' ? title : 'title'}
         titleStyle={styles.title}
@@ -62,14 +64,16 @@ const styles = StyleSheet.create({
   headerContainer: {
     backgroundColor: colors.APP_PRIMARY,
     color: colors.BLACK,
-    shadowColor: colors.APP_PRIMARY,
+    borderBottomWidth: 0.5,
+    shadowColor: colors.BLACK,
     shadowOffset: {
       width: 0,
       height: 4,
     },
     shadowOpacity: 0.25,
     shadowRadius: 3.84,
     elevation: 10,
+    height: moderateScale(45),
   },
 
   title: {

src/Components/Header/HeaderWithSearch.jsx

@@ -33,7 +33,7 @@ const HeaderWithSearch = props => {
           size={25}
           onPress={_handleMore}
         /> */}
-        {/* <MenuPopup /> */}
+        <MenuPopup check={props.isChatList} />
       </Appbar.Header>
     </>
   );
@@ -65,7 +65,6 @@ const styles = StyleSheet.create({
   title: {
     fontFamily: fonts.BOLD,
     fontSize: moderateScale(22),
-    fontWeight: 'bold',
     color: colors.WHITE,
   },
 });

src/Components/Menu/Menu.jsx

@@ -22,9 +22,19 @@ const MenuPopup = props => {
           <MenuIcon name="dots-three-vertical" color={colors.WHITE} size={15} />
         </Button>
       }>
-      <Menu.Item onPress={() => {}} title="Item 1" />
-      <Menu.Item onPress={() => {}} title="Item 2" />
-      <Divider />
+      {props.check && (
+        <>
+          <Menu.Item
+            onPress={() => {
+              navigation.navigate('Groups');
+              setVisible(false);
+            }}
+            title="Create Group"
+          />
+          <Menu.Item onPress={() => {}} title="Settings" />
+          <Divider />
+        </>
+      )}
       <Menu.Item onPress={() => navigation.replace('Login')} title="Logout" />
     </Menu>
   );