File Upload Screen

Overview

The FileUpload screen facilitates the process of uploading files within the LikeMinds chat application. It provides users with an interface to select files from their device, which can include documents, images, and other media types. The screen likely features options to preview selected files and initiate the upload, ensuring a seamless experience for sharing content in conversations.

Data Variables

• file: It contains the details of the file to be uploaded.
• chatroomType: It contains the details of the type of the chatroom.
• chatroomID: It contains the details of the chatroom.

Callbacks

• handleGallery: Triggered to open the gallery for selecting images or media files.
• handleCamera: Triggered to open the camera for capturing a new image or video.
• handleDoc: Triggered to handle the selection of documents for upload.
• onEdit: Triggered when a file or content is edited.

Customisation

Property	Type	Description
selectedImageBorderColor	string	Defines the border color for selected images.

Props

Property	Type	Description	Required
handleGallery	Function	Callback triggered to open the gallery for media selection.
handleCamera	Function	Callback triggered to open the camera for capturing an image or video.
handleDoc	Function	Callback triggered to handle document selection.
onEdit	Function	Callback triggered when a message or content is edited.
backIconPath	string	Path to the back icon for navigation.	✔️
imageCropIcon	string	Path to the icon used for cropping images.
chatroomID	string	Unique identifier for the chatroom.	✔️
previousMessage	any	Contains the previous message details for reference.

Usage Example

Step 1: Create Custom Screen and Wrapper

• In your app, create a FileUploadScreenWrapper file which will wrap the FileUploadScreen within the ChatroomContextProvider so that the callbacks becomes accessible inside of the FileUploadScreen.
• Create fileUploadStyles for customisation and call the setFileUploadStyle to set the customisation.

FileUploadScreen

import {
  FileUpload,
  useInputBoxContext,
} from "@likeminds.community/feed-rn-core";

const FileUploadScreen = ({ route }) => {
  const { handleGallery, handleCamera } = useInputBoxContext();

  // customised handleGallery callback
  const customHandleGalleryProp = (type) => {
    console.log("do something before gallery handle");
    handleGallery(type);
    console.log("do something after gallery handle");
  };

  // customised handleGallery callback
  const customHandleCameraProp = (type) => {
    console.log("do something before camera handle");
    handleCamera(type);
    console.log("do something after camera handle");
  };

  const fileUploadStyles = {
    selectedImageBorderColor: "red",
  };

  // like list screen customisation
  if (fileUploadStyles) {
    STYLES.setFileUploadStyle(postLikesListStyles);
  }
  return (
    <FileUpload
      handleGallery={customHandleGalleryProp}
      handleCamera={customHandleCameraProp}
    />
  );
};

export default FileUploadScreen;

FileUploadScreenWrapper

import { FileUploadScreen } from "<<path_to_FileUploadScreen.tsx>>";
import { ChatroomContextProvider } from "@likeminds.community/chat-rn-core/ChatSX/context";

function FileUploadScreenWrapper() {
  return (
    <ChatroomContextProvider>
      <FileUploadScreen />
    </ChatroomContextProvider>
  );
}

export default FileUploadScreenWrapper;

Step 2: Add the Custom Screen in App.tsx

• In your App.tsx, create a Stack.Navigator in the NavigationContainer wrapped by LMOverlayProvider.
• Add FileUploadScreenWrapper as a Stack screen in your NavigationContainer.

App.tsx

import {
  FILE_UPLOAD,
  LMOverlayProvider,
  STYLES,
} from "@likeminds.community/feed-rn-core";
import { FileUploadScreenWrapper } from "<<path_to_FileUploadScreenWrapper.tsx>>";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

export const App = () => {
  const Stack = createNativeStackNavigator();
  return (
    <LMOverlayProvider
      myClient={myClient} // pass in the LMChatClient created
      apiKey={apiKey} // pass in the API Key generated
      userName={userName} // pass in the logged-in user's name
      userUniqueId={userUniqueID} // pass in the logged-in user's uuid
    >
      <NavigationContainer ref={navigationRef} independent={true}>
        <Stack.Navigator screenOptions={{ headerShown: false }}>
          <Stack.Screen
            options={{ gestureEnabled: Platform.OS === "ios" ? false : true }}
            name={FILE_UPLOAD}
            component={FileUploadScreenWrapper}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </LMOverlayProvider>
  );
};