Custom Attachments

const CustomGiphy = ({ attachment, onPressIn }) => {
  console.log(attachment.type);
  console.log(attachment.actions)
  console.log(attachment.image_url)
  console.log(attachment.thumb_url)
  console.log(attachment.title)
  console.log(attachment.type)

  return (/** Your custom UI */)
}

const CustomGallery = ({ images, onPressIn }) => {
  console.log(images);

  return (/** Your custom UI */)
}

const CustomFileAttachment = ({ attachment }) => {
  console.log(attachemnt.mime_type);
  console.log(attachemnt.title);
  console.log(attachemnt.file_size);
  console.log(attachemnt.actions);

  return (/** Your custom UI */)
}

const CustomUrlPreview = () => {
  console.log(text);
  console.log(thumb_url);
  console.log(title);

  return (/** Your custom UI */)
}

// Provide these custom components to Channel, as props.
<Channel
  Gallery={CustomGallery}
  Giphy={CustomGiphy}
  FileAttachment={CustomFileAttachment}
  UrlPreview={CustomUrlPreview}
>

const CustomCardComponent = ({ type, ...otherProperties }) => {
  console.log(type);
  console.log(otherProperties);

  return (/** Your custom UI */)
}

<Channel Card={CustomCardComponent} />

import React, { useEffect, useState } from "react";
import {
  Image,
  Linking,
  StyleSheet,
  TouchableOpacity,
  View,
} from "react-native";
import { StreamChat } from "stream-chat";
import {
  Channel,
  Chat,
  MessageInput,
  MessageList,
  OverlayProvider as ChatOverlayProvider,
  useChannelContext,
} from "stream-chat-react-native";
import {
  SafeAreaProvider,
  SafeAreaView,
  useSafeAreaInsets,
} from "react-native-safe-area-context";
import Geolocation from "@react-native-community/geolocation";
import Svg, { Path } from "react-native-svg";

// ============================================================
//   Fill in following values
// ============================================================
const API_KEY = "";
const USER_ID = "";
const USER_TOKEN = "";
const CHANNEL_ID = "";
// Reference: https://developers.google.com/maps/documentation/maps-static/get-api-key
const MAPS_API_KEY = "";

const chatClient = StreamChat.getInstance(API_KEY);
const user = { id: USER_ID };

// We are going to `await` following two calls, before rendering any UI component.
// Please check the App component at bottom.
const connectUserPromise = chatClient.connectUser(user, USER_TOKEN);
const channel = chatClient.channel("messaging", CHANNEL_ID);

// Basic utilities required for location sharing

// Given the location coordinates, this function generates URL for google map,
// and opens this Url using Linking module of react-native.
// Please check documentation of `Linking` module from react-native, for details:
// https://reactnative.dev/docs/linking
//
// Generally this URL will be opened in google maps application.
// https://developers.google.com/maps/documentation/urls/get-started
const goToGoogleMaps = (lat, long) => {
  const url = `https://www.google.com/maps/search/?api=1&query=${lat},${long}`;

  Linking.canOpenURL(url).then((supported) => {
    if (supported) {
      Linking.openURL(url);
    } else {
      console.log(`Don't know how to open URI: ${url}`);
    }
  });
};

// Generates static map URL for given location coordinates.
// For reference, please check - https://developers.google.com/maps/documentation/maps-static/overview
const prepareStaticMapUrl = (lat, long) => {
  let baseURL = "https://maps.googleapis.com/maps/api/staticmap?";
  let url = new URL(baseURL);
  let params = url.searchParams;
  params.append("center", `${lat},${long}`);
  params.append("zoom", "15");
  params.append("size", "600x300");
  params.append("maptype", "roadmap");
  params.append("key", MAPS_API_KEY);
  params.append("markers", `color:red|${lat},${long}`);

  return url.toString();
};

// Send your current location attachment, as message, on current channel.
const sendCurrentLocation = () => {
  Geolocation.getCurrentPosition((info) => {
    channel?.sendMessage({
      text: "This is my location",
      attachments: [
        {
          type: "location",
          latitude: info.coords.latitude,
          longitude: info.coords.longitude,
        },
      ],
    });
  });
};

// UI Component for rendering `location` type attachment
const LocationCard = ({ type, latitude, longitude }) => {
  if (type === "location") {
    const mapApi = prepareStaticMapUrl(latitude, longitude);
    console.log(mapApi);
    return (
      <TouchableOpacity onPress={() => goToGoogleMaps(latitude, longitude)}>
        <Image source={{ uri: mapApi }} style={{ height: 200, width: 300 }} />
      </TouchableOpacity>
    );
  }
};

// Icon for "Share Location" button, next to input box.
const ShareLocationIcon = (props) => (
  <Svg width={24} height={24} viewBox="0 0 24 24" fill="none" {...props}>
    <Path
      d="M12 12c-1.654 0-3-1.345-3-3 0-1.654 1.346-3 3-3s3 1.346 3 3c0 1.655-1.346 3-3 3zm0-4a1.001 1.001 0 101 1c0-.551-.449-1-1-1z"
      fill="#000"
    />
    <Path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M12 22s7-5.455 7-12.727C19 5.636 16.667 2 12 2S5 5.636 5 9.273C5 16.545 12 22 12 22zm1.915-4.857C15.541 15.032 17 12.277 17 9.273c0-1.412-.456-2.75-1.27-3.7C14.953 4.664 13.763 4 12 4s-2.953.664-3.73 1.573C7.456 6.523 7 7.86 7 9.273c0 3.004 1.459 5.759 3.085 7.87.678.88 1.358 1.614 1.915 2.166a21.689 21.689 0 001.915-2.166zm-.683 3.281s0 .001 0 0z"
      fill="#000"
    />
  </Svg>
);

// UI component to add Share Location button next to input box.
const InputButtons = () => {
  const { channel: currentChannel } = useChannelContext();

  return (
    <TouchableOpacity
      onPress={() => sendCurrentLocation(currentChannel)}
      style={{ marginRight: 10 }}
    >
      <ShareLocationIcon />
    </TouchableOpacity>
  );
};

const ChannelScreen = () => {
  const { bottom } = useSafeAreaInsets();

  return (
    <ChatOverlayProvider bottomInset={bottom}>
      <SafeAreaView>
        <Chat client={chatClient}>
          {/* Setting keyboardVerticalOffset as 0, since we don't have any header yet */}
          <Channel
            channel={channel}
            keyboardVerticalOffset={0}
            Card={LocationCard}
            InputButtons={InputButtons}
          >
            <View style={StyleSheet.absoluteFill}>
              <MessageList />
              <MessageInput />
            </View>
          </Channel>
        </Chat>
      </SafeAreaView>
    </ChatOverlayProvider>
  );
};

export default function App() {
  const [ready, setReady] = useState();

  useEffect(() => {
    const initChat = async () => {
      await connectUserPromise;
      await channel.watch();
      setReady(true);
    };

    initChat();
  }, []);

  if (!ready) {
    return null;
  }

  return (
    <SafeAreaProvider>
      <ChannelScreen channel={channel} />
    </SafeAreaProvider>
  );
}