vishalnarkhede

const useWatchedChannels = (client, changeChannel) => {
  const [activeChannelId, setActiveChannelId] = useState(null);
  const [unreadChannels, setUnreadChannels] = useState([]);
  const [readChannels, setReadChannels] = useState([]);
  const [oneOnOneConversations, setOneOnOneConversations] = useState([]);
  const [hasMoreChannels, setHasMoreChannels] = useState(true);
  const filters = {
    type: 'messaging',
    example: 'slack-demo',
    members: {

vishalnarkhede

import React from 'react';
import {TouchableOpacity, View, Text, Image, StyleSheet} from 'react-native';
import iconSearch from '../images/icon-search.png';
import iconThreeDots from '../images/icon-3-dots.png';

export const ChannelHeader = ({navigation, channel, client}) => {
  let channelTitle = '#channel_name';

  // For normal group channel/conversation, its channel name as display title.
  if (channel && channel.data && channel.data.name) {

vishalnarkhede

import {ChannelHeader} from './src/components/ChannelHeader';
import React, {useEffect, useState} from 'react';

function ChannelScreen({navigation, route}) {
  const [channel, setChannel] = useState(null);
  useEffect(() => {
    if (!channel) {
      navigation.openDrawer();
    }
    const channelId = route.params ? route.params.channelId : null;

vishalnarkhede

import {
  Chat,
  MessageList,
  MessageInput,
  Channel,
} from 'stream-chat-react-native';

function ChannelScreen({navigation, route}) {
  const [channel, setChannel] = useState(null);
  useEffect(() => {

vishalnarkhede

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';

export const MessageSlack = props => {

vishalnarkhede

import React from 'react';
import {ReactionPickerWrapper} from 'stream-chat-react-native';
import {StyleSheet, Image, View, TouchableOpacity, Text} from 'react-native';
import iconEmoticon from '../images/icon-emoticon.png';

export const MessageFooter = props => {
  return (
    <View style={styles.reactionListContainer}>
      {props.message.latest_reactions &&
        props.message.latest_reactions.length > 0 &&

vishalnarkhede

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

export const MessageHeader = props => {
  return (
    <View style={styles.column}>
      {props.message.attachments.length > 0 && (
        <View style={styles.header}>
          <MessageUserBar {...props} />

vishalnarkhede

import React from 'react';
import {MessageUserBar} from './MessageHeader';

export const MessageText = props => {
  return (
    <React.Fragment>
      {props.message.attachments.length === 0 && <MessageUserBar {...props} />}
      {props.renderText(props.message, props.theme.message.content.markdown)}
    </React.Fragment>
  );

vishalnarkhede

import React from 'react';
import {MessageAvatar as StreamMessageAvatar} from 'stream-chat-react-native';

export const MessageAvatar = props => {
  return (
    <StreamMessageAvatar
      {...props}
      showAvatar={
        props.groupStyles[0] === 'single' || props.groupStyles[0] === 'top'
          ? true

vishalnarkhede

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

export const UrlPreview = props => {
  const getDomain = url => {
    let domain = url && url.replace('https://', '').replace('http://', '');

    if (!domain) {
      return url;
    }