vishalnarkhede

// If you are running into following error, then please use this gist as an example for implementing chat in react or RN
// "Watch or Presence requires an active websocket connection, please make sure to include your websocket connection_id"

// This error occurs if you make api call which requires active websocket connection (established by `client.connectUser`),
// without waiting for client.connectUser call to finish.

import React, { useEffect, useState } from 'react';
import { StreamChat } from 'stream-chat';
import {
  Chat,

vishalnarkhede

// src/components/InpuBoxThread.js

import React, {useRef, useState} from 'react';
import {TouchableOpacity, Animated, View, StyleSheet} from 'react-native';
import {
  AutoCompleteInput,
  SendButton,
  useChannelContext,
} from 'stream-chat-react-native';
import {getChannelDisplayName} from '../utils';

vishalnarkhede

// src/screens/MessageSearchScreen.js

import React, {useEffect, useRef, useState} from 'react';
import {View, StyleSheet} from 'react-native';
import {
  FlatList,
  TextInput,
  TouchableOpacity,
  ActivityIndicator,
  SafeAreaView,

vishalnarkhede

// src/screens/NewMessageScreen.js

import React, {useEffect, useState} from 'react';
import {View, SafeAreaView, StyleSheet} from 'react-native';
import {
  Chat,
  Channel,
  MessageList,
  MessageInput,
} from 'stream-chat-react-native';

vishalnarkhede

// src/screens/ChannelSearchScreen.js

import React, {useState} from 'react';
import {
  View,
  SafeAreaView,
  StyleSheet,
  FlatList,
  TextInput,
  TouchableOpacity,

vishalnarkhede

// src/components/DirectMessagingConversationAvatar.js

import React from 'react';
import {View, StyleSheet, Image} from 'react-native';

import {ChatClientService} from '../utils';
import {useTheme} from '@react-navigation/native';
import {PresenceIndicator} from './ChannelListItem';

export const DirectMessagingConversationAvatar = ({channel}) => {

vishalnarkhede

// src/components/ModalScreenHeader.js

import React from 'react';
import {TouchableOpacity, View, Text, Image, StyleSheet} from 'react-native';
  
import {useTheme} from '@react-navigation/native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {SCText} from './SCText';

export const ModalScreenHeader = ({goBack, title, subTitle}) => {

vishalnarkhede

// src/components/MessageFooter.js

import React from 'react';
import {StyleSheet, View, TouchableOpacity, Text} from 'react-native';
import {SVGIcon} from './SVGIcon';
import {useTheme} from '@react-navigation/native';
import {ReactionPicker} from './ReactionPicker';

export const MessageFooter = (props) => {
  const {dark} = useTheme();

vishalnarkhede

// src/components/MessageActionSheep.js

import React from 'react';
import {ActionSheetCustom as ActionSheet} from 'react-native-actionsheet';

import {View, Text, StyleSheet} from 'react-native';

import {SCText} from './SCText';
import {ChatClientService} from '../utils';
import {useTheme} from '@react-navigation/native';

vishalnarkhede

// src/components/MessageSlack.js

import React from 'react';
import {MessageSimple} from 'stream-chat-react-native';
import {MessageFooter} from './MessageFooter';
import {MessageText} from './MessageText';
import {MessageAvatar} from './MessageAvatar';
import {MessageHeader} from './MessageHeader';
import {UrlPreview} from './UrlPreview';
import {Giphy} from './Giphy';