vishalnarkhede

/**
 * 
 * Stream comes with some in-built components for message.
 * 
 * 1. MessageLivestream - https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageLivestream.js
 * 2. MessageSimple - https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageSimple.js
 * 3. MessageTeam - https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageTeam.js
 * 4. MessageCommerce - https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageTeam.js
 * 
 * All these components are exported from 'stream-chat-react' package.

vishalnarkhede

# Create a new react-native project with name SlackChatApp */
npx react-native init SlackChatApp

# Go to your app directory
cd SlackChatApp

# Add all the required dependencies for this project
yarn add @react-native-community/masked-view@0.1.7
yarn add @react-native-community/netinfo@5.6.2
yarn add @react-navigation/drawer@5.3.2

vishalnarkhede

module.exports = {
  assets: ['./src/fonts/'],
};

vishalnarkhede

import React from 'react';
import {View, SafeAreaView, Text, StyleSheet} from 'react-native';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {NavigationContainer} from '@react-navigation/native';

/** This is where you will put your channel component which container MessageList and MessageInput component  */
function ChannelScreen({navigation, route}) {
  return (
    <SafeAreaView>
      <Text>Channel Screen</Text>

vishalnarkhede

import React from 'react';
import {
  View,
  Text,
  SafeAreaView,
  TextInput,
  StyleSheet,
  SectionList,
} from 'react-native';

vishalnarkhede

/** This will go in import section at top of the file */
import { ChannelList } from './src/components/ChannelList';


const ChannelListDrawer = (props) => {
  return (
    <SafeAreaView>
      <ChannelList />
    </SafeAreaView>
  );

vishalnarkhede

import {StreamChat} from 'stream-chat';

const chatClient = new StreamChat('q95x9hkbyd6p');
const userToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoidmlzaGFsIn0.LpDqH6U8V8Qg9sqGjz0bMQvOfWrWKAjPKqeODYM0Elk';
const user = {
  id: 'vishal',
  name: 'Vishal',
};

vishalnarkhede

import React, {useState, useEffect} from 'react';

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 = {

vishalnarkhede

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

export const ChannelListItem = ({
  channel,
  setActiveChannelId,
  changeChannel,
  isOneOnOneConversation,
  isUnread,
  activeChannelId,

vishalnarkhede

import React, {useState, useEffect} from 'react';
import {
  View,
  Text,
  SafeAreaView,
  TextInput,
  StyleSheet,
  SectionList,
} from 'react-native';
import {ChannelListItem} from './ChannelListItem';