vishalnarkhede

const discountCampaign = client.campaign({
    sender_id: campaignSender.id,
    segment_ids: [indianUserSegment.id],
    message_template: {
      text: templateText,
      custom: {
        foo: 'bar',
      },
    },
});

vishalnarkhede

// Use threads state in your app to show a list of threads.
// Each thread should have a list of replies.
// Parent message can be rendered using `thread.message` and replies can be rendered using `thread.latest_replies`.
const [threads, setThreads] = useState([]);

useEffect(() => {
  client.queryThreads()
    .then((threads) => {
      setThreads(threads);

vishalnarkhede

import { useEffect, useState } from 'react';
import { Dimensions } from 'react-native';

import type { Channel, EventHandler } from 'stream-chat';
import { useChatContext, DefaultStreamChatGenerics } from 'stream-chat-react-native';

export const vw = (percentageWidth: number, rounded = false) => {
    const value = Dimensions.get('window').width * (percentageWidth / 100);
    return rounded ? Math.round(value) : value;
};

vishalnarkhede

import {useEffect} from 'react';

/**
 * Custom hook to update user references in message objects in all activeChannels.
 *
 * @param {*} chatClient 
 */
export const useUserUpdatedListener = (chatClient) => {
  useEffect(() => {
    const updateUserReferences = (e) => {

vishalnarkhede

import { FlatList } from "react-native-bidirectional-infinite-scroll";

<FlatList
    data={numbers}
    renderItem={ListItem}
    keyExtractor={(item) => item.toString()}
    onStartReached={onStartReached} // required, should return a promise
    onEndReached={onEndReached} // required, should return a promise
    showDefaultLoadingIndicators={true} // optional
    onStartReachedThreshold={10} // optional

vishalnarkhede

import React, {useEffect, useState} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  Text,
  Touchable,
  TouchableOpacity,
  View,
} from 'react-native';

vishalnarkhede

import React, {useEffect, useState} from 'react';
import {SafeAreaView, StyleSheet, Text, View} from 'react-native';

import {FlatList} from 'react-native-bidirectional-infinite-scroll';
import {MessageBubble} from './MessageBubble';
import {queryMoreMessages} from './utils';

const App = () => {
  const [messages, setMessages] = useState();

vishalnarkhede

import React, {useEffect, useState} from 'react';
import {SafeAreaView, StyleSheet, Text, View} from 'react-native';

import {FlatList} from 'react-native-bidirectional-infinite-scroll';
import {MessageBubble} from './MessageBubble';
import {queryMoreMessages} from './utils';

const App = () => {
  const [messages, setMessages] = useState();

vishalnarkhede

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

/**
 * UI Component for message item, in message list (FlatList).
 */
export const MessageBubble = ({item}) => {
  if (item.isMyMessage) {
    // Align sent messages to right side of the screen, with a grey'ish background.
    return (

vishalnarkhede

// Generate random integer, we will use this to use random message from list of dummy messages.
export const getRandomInt = (min: number, max: number) => {
  return Math.floor(Math.random() * (max - min)) + min;
};

// Generate unique key for message component of FlatList.
export const generateUniqueKey = () =>
  `_${Math.random().toString(36).substr(2, 9)}`;

// List of test messages to generate chat data.