Unable to add overlay on react-native Expo Camera recordings

Question

Why I cannot add an overlay on Expo Camera?

I tried adding an Text 'Hello' (Like a water mark) in below example. Now, I can see that on my app, however, when I save the recording and check that video, I don't see that text 'Hello' appears at all.

How can I fix that??

        <Camera
          style={{
            flex: 1,
            width: "100%",
          }}
          type={camType}
          ref={cameraRef}
          autoFocus={AutoFocus.on}
          ratio={'1:1'}
          videoStabilizationMode={VideoStabilization.auto}
          >
          <Text style={{ backgroundColor: 'green', justifyContent: "center", textAlign: "center", top: 50}}>Hello</Text>

        </Camera>

Answer 1

I don't think there is a way to do it with expo-camera for days i've been searching for a solution as well.

Here is my code, where it records and saves the video properly but when you check the video playback nothing of what on top of the video shows up

import { CameraView, useCameraPermissions } from "expo-camera";
import * as MediaLibrary from "expo-media-library";
import { useState, useRef, Children } from "react";
import {
  Button,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  Image,
} from "react-native";

export default function CameraComponent() {
  const [permission, requestPermission] = useCameraPermissions();
  const [mediaLibraryPermission, requestMediaLibraryPermission] =
    MediaLibrary.usePermissions();

  const cameraRef = useRef<CameraView>(null);
  const [recording, setRecording] = useState(false);

  if (!permission) {
    // Camera permissions are still loading.
    return <View />;
  }

  const takeVideo = async () => {
    console.log("taking video");

    if (cameraRef.current) {
      try {
        setRecording(true);

        const video = await cameraRef.current.recordAsync();
        console.log("video", video);

        if (video) {
          console.log("video.uri", video.uri);
          const asset = await MediaLibrary.createAssetAsync(video.uri);
          console.log(asset);
        }
      } catch (error) {
        console.log("error", error);
      }
    }
  };

  const stopVideo = async () => {
    if (cameraRef.current) {
      try {
        const stoppingVideo = await cameraRef.current.stopRecording();
        console.log("stopping video", stoppingVideo);
        setRecording(false);
      } catch (error) {
        console.log("error", error);
      }
    }
  };

  if (!permission.granted || !mediaLibraryPermission?.granted) {
    return (
      <View style={styles.container}>
        <Text style={{ textAlign: "center" }}>
          We need your permission to show the camera
        </Text>
        <Button onPress={requestPermission} title="grant permission" />
        <Button onPress={requestPermission} title="Grant Camera Permission" />
        <Button
          onPress={requestMediaLibraryPermission}
          title="Grant Media Library Permission"
        />
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <CameraView style={styles.camera} ref={cameraRef} mode="picture">
        <View className="h-full flex-row items-end justify-center">
          <TouchableOpacity
            className="bg-red-500 p-4 rounded-lg m-2 "
            onPress={takeVideo}
            disabled={recording}
          >
            <Text className="text-white text-center text-2xl font-bold">
              {recording ? "Recording" : "Record"}
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            className="bg-red-500 p-4 rounded-lg m-2 "
            onPress={stopVideo}
          >
            <Text className="text-white text-center text-2xl font-bold">
              Stop
            </Text>
          </TouchableOpacity>
        </View>
      </CameraView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
  },
  camera: {
    flex: 1,
  },
  button: {
    flex: 1,
    alignSelf: "flex-end",
    alignItems: "center",
  },
  text: {
    fontSize: 24,
    fontWeight: "bold",
    color: "white",
  },
});

I've also tried with https://react-native-vision-camera.com/ but no luck