search

AgoraIO-Usecase / AgoraChat-UIKit-rn

MIT License
0 stars 0 forks source link

Getting multiple dependent packages issues #2

Open mannesudhir9 opened 2 weeks ago

mannesudhir9 commented 2 weeks ago

Description

Hi I have installed npm i react-native-chat-uikit then added below code to test


import React from 'react';
import { ChatFragment, ScreenContainer } from 'react-native-chat-uikit';
const ResidentChats = ({navigation}) => {
  const chatId = 'xxx';
  const chatType = 0;
  return (
    <ScreenContainer mode="padding" edges={['right', 'left', 'bottom']}>
      <ChatFragment screenParams={{ chatId, chatType }} />
    </ScreenContainer>
  );
};
export default ResidentChats;

First i got date-fns/format could not be found within the project or in these directories: then after installing date-fns pacakge i am getting other issue which i have uploaded screenshot

Screenshot 2024-11-12 at 1 07 20 PM

Version

"react-native-chat-uikit": "^2.4.1"

Output of npx react-native info

System: OS: macOS 14.5 CPU: (8) arm64 Apple M1 Memory: 102.48 MB / 8.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 22.4.0 path: /opt/homebrew/bin/node Yarn: version: 1.22.22 path: /opt/homebrew/bin/yarn npm: version: 10.8.1 path: /opt/homebrew/bin/npm Watchman: version: 2024.06.24.00 path: /opt/homebrew/bin/watchman Managers: CocoaPods: version: 1.15.2 path: /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms:

Steps to reproduce

import React from 'react'; import { ChatFragment, ScreenContainer } from 'react-native-chat-uikit';

const ResidentChats = ({navigation}) => { const chatId = 'xxx'; const chatType = 0; return (

); };

export default ResidentChats;

Snack, code example, screenshot, or link to a repository

import React from 'react'; import { ChatFragment, ScreenContainer } from 'react-native-chat-uikit';

const ResidentChats = ({navigation}) => { const chatId = 'xxx'; const chatType = 0; return (

); };

export default ResidentChats;

Platform

SimulatorOrDevice

iOSVersion

ycj3 commented 2 weeks ago

Hi @mannesudhir9

Have you tried running npm install --save react-native-device-info to install the react-native-device-info package?

mannesudhir9 commented 2 weeks ago

No @ycj3

ycj3 commented 2 weeks ago

Please try this to see if it resolves the issue.

For more information about react-native-device-info, you can refer to: https://www.npmjs.com/package/react-native-device-info.

mannesudhir9 commented 2 weeks ago
Screenshot 2024-11-12 at 2 54 46 PM

Getting this issue now

AsteriskZuo commented 2 weeks ago

Please take a look at the quickstart first.

AsteriskZuo commented 2 weeks ago

https://github.com/AgoraIO-Usecase/AgoraChat-UIKit-rn/blob/dev-2.3/docs/v3/en/index.en.md

mannesudhir9 commented 2 weeks ago

All the package related issues have been resolved now, for testing purpose i have added below code but getting some different issue unable to get it import React, {useEffect, useState} from 'react'; import ChatFragment from 'react-native-chat-uikit'; import UikitContainer from 'react-native-chat-uikit'; import UikitModalPlaceholder from 'react-native-chat-uikit'; const ResidentChats = ({navigation}) => { const appKey = ''; const chatId = ''; // The Chat ID. It can be a person or a group. const chatType = 0; // 0 means single person chat. 1 means group chat. return ( <UikitContainer option={{ appKey: appKey }} ModalComponent={() => }

<ChatFragment screenParams={{ chatId, chatType }} /> ); };

export default ResidentChats;

Screenshot 2024-11-12 at 3 16 19 PM

I am working on .js file

mannesudhir9 commented 2 weeks ago

@ycj3 can you please help me out on this

ycj3 commented 2 weeks ago

@mannesudhir9 Replace the App.tsx with the App.tsx within this repository.

mannesudhir9 commented 2 weeks ago

I am trying to integrate in my application in one of my component

import React, {useEffect, useState} from 'react'; import ChatFragment from 'react-native-chat-uikit'; import UikitContainer from 'react-native-chat-uikit'; import UikitModalPlaceholder from 'react-native-chat-uikit'; const ResidentChats = ({navigation}) => { const appKey = ''; const chatId = ''; // The Chat ID. It can be a person or a group. const chatType = 0; // 0 means single person chat. 1 means group chat. return ( <UikitContainer option={{ appKey: appKey }} ModalComponent={() => }

<ChatFragment screenParams={{ chatId, chatType }} /> ); };

export default ResidentChats;

and my app.js is

import * as React from 'react'; import { Provider } from 'react-redux'; import { PersistGate } from 'redux-persist/integration/react'; import { persistor, store } from './src/redux/Store/store'; import AppNavigation from './src/Navigators/AppNavigation';

const App = () => {

return (

); };

export default App;

ycj3 commented 2 weeks ago 
import {
  Container,
  ConversationDetail,
  TextInput,
  useChatContext,
} from 'react-native-chat-uikit';

  return (
    <Container options={{appKey: appKey, autoLogin: false}}>
      <SendMessage />
    </Container>
  );

How to integrate react-native-chat-uikit to you own app, please refer to the App.tsx file in quick start repo

mannesudhir9 commented 2 weeks ago

I dont need login component as in app.tsx as my component will be available after login only, i need just message sending ui,

please help me for neccessary changes of my component import React, {useEffect, useState} from 'react'; import ChatFragment from 'react-native-chat-uikit'; import UikitContainer from 'react-native-chat-uikit'; import UikitModalPlaceholder from 'react-native-chat-uikit'; const ResidentChats = ({navigation}) => { const appKey = ''; const chatId = ''; // The Chat ID. It can be a person or a group. const chatType = 0; // 0 means single person chat. 1 means group chat. return ( <UikitContainer option={{ appKey: appKey }} ModalComponent={() => }

<ChatFragment screenParams={{ chatId, chatType }} />

); };

export default ResidentChats;

mannesudhir9 commented 2 weeks ago

@ycj3 any help

mannesudhir9 commented 2 weeks ago
Screenshot 2024-11-13 at 11 20 23 AM

Getting this issue for below code

import * as React from 'react'; import { ChatConversation, GlobalContainer as UikitContainer } from 'react-native-chat-uikit';

export default function ResidentChats() { const appKey = '7634764734'; const chatId = '123'; // The Chat ID. It can be a person or a group. const chatType = 0; // 0 means single person chat. 1 means group chat. return ( <UikitContainer option={{ appKey: appKey }}> <ChatConversation screenParams={{ chatId, chatType }} /> ); }

ycj3 commented 2 weeks ago

@AsteriskZuo Could you help on this issue?

In the meantime, could you provide the correct JavaScript format for your code, @mannesudhir9?

mannesudhir9 commented 2 weeks ago

Using default visual studio format, and react native version is "react-native": "0.73.4", and i am using .js files not a typescript

ycj3 commented 2 weeks ago

Using default visual studio format, and react native version is "react-native": "0.73.4", and i am using .js files not a typescript

I mean could you provide your code in a GitHub code block format ? @mannesudhir9

mannesudhir9 commented 2 weeks ago 
import * as React from 'react';
import { ChatConversation, GlobalContainer as UikitContainer } from 'react-native-chat-uikit';

export default function ResidentChats() {
  const appKey = '7634764734';
  const chatId = '123'; // The Chat ID. It can be a person or a group.
  const chatType = 0; // 0 means single person chat. 1 means group chat.
  return (
    <UikitContainer option={{ appKey: appKey }}>
      <ChatConversation screenParams={{ chatId, chatType }} />
    </UikitContainer>
  );
}
ycj3 commented 2 weeks ago 
import {
  Container,
  ConversationDetail,
  TextInput,
  useChatContext,
} from 'react-native-chat-uikit';

  return (
    <Container options={{appKey: appKey, autoLogin: false}}>
      <SendMessage />
    </Container>
  );

How to integrate react-native-chat-uikit to you own app, please refer to the App.tsx file in quick start repo

Have you checked the comment above? I think Even if you’re using plain JavaScript, you can still look at TypeScript code implementations as a helpful reference.

mannesudhir9 commented 2 weeks ago

Actually my requirement is, initially it has to show list of users in one component where the users list will be coming from our own api from nodejs, upon clicking the user the messaging between the users has to happen, for this to happen i am not getting any proper documents, in all documents there is a login and so much of code which is not understandable, can we get this kind of requirement attached as screenshots not exactly same ui but functionality has to do in react-native-chat-uikit with Agora, If not we need to think of other libraries.

Screenshot 2024-11-13 at 1 19 45 PM Screenshot 2024-11-13 at 1 20 22 PM
mannesudhir9 commented 2 weeks ago

@ycj3 any update please.