Any react native/expo cam rec package that works?

React Native
1

I been sitting all day trying to make an app that record, save and send a short 15 second long video to Laravel API. But there is not a single one that works.

  1. react-native-image-picker don’t work in expo but somewhat in native CLI but refuses to save the video to URI without any errors to track and no flipper log working because its removed.
  2. expo-camera / expo-media-library throwing tons of errors but refuses to connect to its own library more or less.
  3. vision-camera throws the epic Execution failed for task ':react-native-vision-camera:compileDebugKotlin'. when tying to build the app or start it.

The need of downgrading, upgrading, changing, removing and adding back and forth in different files makes me wonder how people actually pull this off or is it just pure luck? until next upgrade. Then it all falls apart again.

Update:

I went back to react-native-image-picker because it open the camera and record at least. The issue is that i cant save the video file.

Copy

import React, { useState } from 'react';
import {
  View,
  Button,
  StyleSheet,
  useWindowDimensions,
  Alert,
  Image,
} from 'react-native';
import logo from '../../assets/images/logo.png';
import {launchCamera, CameraOptions} from 'react-native-image-picker';
import Video from 'react-native-video';

const camera: React.FC = () => {
  const {height} = useWindowDimensions();

  const [videoSource, setVideoSource] = useState<string>('');

  const handleRecordVideo = () => {
    const options: CameraOptions = {
      mediaType: 'video',
      durationLimit: 5, // Limit the duration to 5 seconds
    };

    launchCamera(options, response => {
      console.log('Response: ', response);
      if (response?.didCancel) {
        console.log('User cancelled video picker');
      } else if (response?.errorCode) {
        console.error('ImagePicker Error: ', response.errorMessage);
        Alert.alert('Error', response.errorMessage || 'An error occurred');
      } else if (response?.assets && response.assets.length > 0) {
        const videoUri = response.assets[0].uri;
        console.log('Video URI: ', videoUri);

        Alert.alert('Video Recorded', 'Video has been saved to your gallery');
      }
    });
  };

  return (
    <View style={styles.root}>
      <Image
        source={logo}
        style={[styles.logo, {height: height * 0.3}]}
        resizeMode="contain"
      />
      <Button title="Record Video" onPress={handleRecordVideo} />
      {videoSource !== '' && (
        <Video
          source={{ uri: videoSource }}
          style={{ width: 300, height: 300 }}
          controls
          resizeMode="contain"
        />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    padding: 20,
  },
  logo: {
    width: 300,
    maxWidth: 500,
    maxHeight: 300,
    marginTop: 50,
  },
});

export default camera;

I dont know why. Docs say no permission needs to be added and it should throw a different error if that would be the case. The logs from Metro.js doesn’t say much

(NOBRIDGE) LOG  Bridgeless mode is enabled
 (NOBRIDGE) LOG  Running "frontend" with {"rootTag":351,"initialProps":{},"fabric":true}
 (NOBRIDGE) LOG  Response:  {"didCancel": true}
 (NOBRIDGE) LOG  Video recording started
 (NOBRIDGE) LOG  No video assets found. Video was not saved.

It’s weird that the ‘didCancel’ comes before “Video recording started” comes. Because I just press record icon and let the timer run out. Must be someone who made this work?