React Native VisionCamera

5.0.1 · active · verified Sun Apr 19

VisionCamera is a high-performance, feature-rich camera library for React Native, currently at version 5.0.1. It provides direct access to camera hardware, supporting advanced features like custom frame processing (via C++ JSI) and granular control over camera devices and capabilities. Version 5.0.0 marked a significant rewrite, building upon 'Nitro Modules' and introducing a new 'Constraints API' for more flexible camera configuration. The library maintains a regular release cadence, with frequent patch updates addressing bugs and minor features within major versions, and new major versions (like v5) introducing substantial architectural changes. Its key differentiators include superior performance, direct native control, and advanced customization options not typically found in simpler camera abstractions.

Common errors

Warnings

Install

Imports

Quickstart

This code snippet demonstrates requesting camera permissions and rendering a basic camera preview using the back camera. It includes checks for permissions and device availability.

import React, { useEffect } from 'react';
import { View, Text, StyleSheet, Linking, Alert } from 'react-native';
import { Camera, useCameraDevice, useCameraPermission } from 'react-native-vision-camera';

const App = () => {
  const { hasPermission, requestPermission } = useCameraPermission();
  const device = useCameraDevice('back');

  useEffect(() => {
    if (!hasPermission) {
      requestPermission().then(granted => {
        if (!granted) {
          Alert.alert(
            'Permission Required',
            'Camera access is required to use this feature. Please enable it in settings.',
            [
              { text: 'Cancel', style: 'cancel' },
              { text: 'Open Settings', onPress: () => Linking.openSettings() }
            ]
          );
        }
      });
    }
  }, [hasPermission, requestPermission]);

  if (!hasPermission) {
    return <Text style={styles.permissionText}>Requesting Camera Permission...</Text>;
  }

  if (device == null) {
    return <Text style={styles.permissionText}>No Camera Device Found.</Text>;
  }

  return (
    <View style={styles.container}>
      <Camera
        style={StyleSheet.absoluteFill}
        device={device}
        isActive={true}
        photo={true} // Enable photo capture
        video={true} // Enable video capture
        // frameProcessor={frameProcessor} // Uncomment for custom frame processing
        // frameProcessorFps={30} // Set frame processor FPS
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'black',
  },
  permissionText: {
    flex: 1,
    color: 'white',
    textAlign: 'center',
    textAlignVertical: 'center',
    fontSize: 18,
  },
});

export default App;

view raw JSON →