Call Header

We will create a custom call header which will display the id of the call and a back button to hang up the call.

import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
import { CallingState, useCall } from "@stream-io/video-react-native-sdk";

const CallHeader = () => {
  const call = useCall();

  const onHangupCallHandler = async () => {
    setShow("loading");
    try {
      if (callingState !== CallingState.LEFT) {
        await call?.leave();
      }
      navigation.goBack();
    } catch (error) {
      if (error instanceof Error) {
        console.error("Error leaving call:", error);
        setErrorMessage(error.message);
      }
    }
  };

  return (
    <View style={styles.topView}>
      <View style={styles.headerContainer}>
        <TouchableOpacity
          onPress={onHangupCallHandler}
          style={styles.backButton}
        >
          <Text style={styles.backButtonText}>←</Text>
        </TouchableOpacity>
        <Text style={styles.title}>{call?.id}</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  topView: {
    width: "100%",
    backgroundColor: "gray",
  },
  headerContainer: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 16,
  },
  backButton: {
    padding: 10,
  },
  backButtonText: {
    fontSize: 24,
    color: "black",
  },
  title: {
    flex: 1,
    paddingVertical: 20,
    color: "black",
    textAlign: "center",
  },
});

Also we need to reset to 0 the top padding of our CallContent in our theme, because we are positioning the CallHeader above the CallContent.

export const useCustomTheme = (mode: ThemeMode): DeepPartial<Theme> => {
  const callContent: DeepPartial<Theme["callContent"]> = {
    container: { paddingTop: 0 },
  };

  const customTheme: DeepPartial<Theme> = {
    callContent,
  };

  return customTheme;
};

Final steps

Now we can use the CallHeader component inside our StreamCall component positioned above the CallContent component:

import {
  Call,
  CallContent,
  StreamCall,
} from "@stream-io/video-react-native-sdk";

const VideoCallUI = () => {
  let call: Call;
  // your logic to create a new call or get an existing call

  return (
    <StreamCall call={call}>
      <CallHeader />
      <CallContent />
    </StreamCall>
  );
};

Participant Label

Incoming & Outgoing Call Component