Module 7: Native Modules & Platform APIs

Access native device features and platform-specific APIs in React Native.

Back to Course|4 hours|Intermediate

Native Modules & Platform APIs

Access native device features and platform-specific APIs in React Native.

Progress: 0/4 topics completed0%

Select Topics Overview

Camera & Image Picker

Learn to integrate camera functionality and image picking capabilities in React Native applications using native modules

Content by: Jigar Solanki

React Native Developer

Connect

Camera Integration

Access device camera to capture photos and videos in React Native applications. Use libraries like react-native-camera or expo-camera for camera functionality.

Image Picker

Allow users to select images from their photo library or camera. Use react-native-image-picker or expo-image-picker for image selection functionality.

Permissions

Handle camera and photo library permissions properly. Request permissions at runtime and provide clear explanations for why permissions are needed.

Camera & Image Picker Example

Code Example
import React, { useState } from 'react';
import { 
  View, 
  Text, 
  TouchableOpacity, 
  StyleSheet, 
  Image, 
  Alert,
  PermissionsAndroid,
  Platform 
} from 'react-native';
import { launchCamera, launchImageLibrary, MediaType, ImagePickerResponse } from 'react-native-image-picker';

const CameraImagePicker = () => {
  const [selectedImage, setSelectedImage] = useState(null);

  // Request camera permission for Android
  const requestCameraPermission = async () => {
    if (Platform.OS === 'android') {
      try {
        const granted = await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.CAMERA,
          {
            title: 'Camera Permission',
            message: 'App needs access to camera to take photos',
            buttonNeutral: 'Ask Me Later',
            buttonNegative: 'Cancel',
            buttonPositive: 'OK',
          }
        );
        return granted === PermissionsAndroid.RESULTS.GRANTED;
      } catch (err) {
        console.warn(err);
        return false;
      }
    }
    return true;
  };

  // Request storage permission for Android
  const requestStoragePermission = async () => {
    if (Platform.OS === 'android') {
      try {
        const granted = await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
          {
            title: 'Storage Permission',
            message: 'App needs access to storage to select images',
            buttonNeutral: 'Ask Me Later',
            buttonNegative: 'Cancel',
            buttonPositive: 'OK',
          }
        );
        return granted === PermissionsAndroid.RESULTS.GRANTED;
      } catch (err) {
        console.warn(err);
        return false;
      }
    }
    return true;
  };

  const openCamera = async () => {
    const hasPermission = await requestCameraPermission();
    if (!hasPermission) {
      Alert.alert('Permission denied', 'Camera permission is required to take photos');
      return;
    }

    const options = {
      mediaType: 'photo' as MediaType,
      quality: 0.8,
      maxWidth: 1024,
      maxHeight: 1024,
    };

    launchCamera(options, (response: ImagePickerResponse) => {
      if (response.didCancel) {
        console.log('User cancelled camera');
      } else if (response.errorMessage) {
        console.log('Camera Error: ', response.errorMessage);
        Alert.alert('Error', 'Failed to take photo');
      } else if (response.assets && response.assets[0]) {
        setSelectedImage(response.assets[0]);
      }
    });
  };

  const openImageLibrary = async () => {
    const hasPermission = await requestStoragePermission();
    if (!hasPermission) {
      Alert.alert('Permission denied', 'Storage permission is required to select images');
      return;
    }

    const options = {
      mediaType: 'photo' as MediaType,
      quality: 0.8,
      maxWidth: 1024,
      maxHeight: 1024,
    };

    launchImageLibrary(options, (response: ImagePickerResponse) => {
      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.errorMessage) {
        console.log('ImagePicker Error: ', response.errorMessage);
        Alert.alert('Error', 'Failed to select image');
      } else if (response.assets && response.assets[0]) {
        setSelectedImage(response.assets[0]);
      }
    });
  };

  const clearImage = () => {
    setSelectedImage(null);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Camera & Image Picker</Text>
      
      {selectedImage ? (
        <View style={styles.imageContainer}>
          <Image source={{ uri: selectedImage.uri }} style={styles.image} />
          <View style={styles.imageInfo}>
            <Text style={styles.imageText}>File: {selectedImage.fileName || 'Unknown'}</Text>
            <Text style={styles.imageText}>Size: {selectedImage.fileSize ? Math.round(selectedImage.fileSize / 1024) + ' KB' : 'Unknown'}</Text>
            <Text style={styles.imageText}>Type: {selectedImage.type || 'Unknown'}</Text>
          </View>
        </View>
      ) : (
        <View style={styles.placeholderContainer}>
          <Text style={styles.placeholderText}>No image selected</Text>
        </View>
      )}

      <View style={styles.buttonContainer}>
        <TouchableOpacity style={styles.button} onPress={openCamera}>
          <Text style={styles.buttonText}>📷 Take Photo</Text>
        </TouchableOpacity>
        
        <TouchableOpacity style={styles.button} onPress={openImageLibrary}>
          <Text style={styles.buttonText}>🖼️ Choose from Library</Text>
        </TouchableOpacity>
        
        {selectedImage && (
          <TouchableOpacity style={[styles.button, styles.clearButton]} onPress={clearImage}>
            <Text style={styles.buttonText}>🗑️ Clear Image</Text>
          </TouchableOpacity>
        )}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 30,
    color: '#333',
  },
  imageContainer: {
    alignItems: 'center',
    marginBottom: 30,
  },
  image: {
    width: 300,
    height: 300,
    borderRadius: 8,
    marginBottom: 15,
  },
  imageInfo: {
    backgroundColor: 'white',
    padding: 15,
    borderRadius: 8,
    width: '100%',
  },
  imageText: {
    fontSize: 14,
    color: '#666',
    marginBottom: 5,
  },
  placeholderContainer: {
    height: 300,
    backgroundColor: 'white',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 30,
  },
  placeholderText: {
    fontSize: 16,
    color: '#999',
  },
  buttonContainer: {
    gap: 15,
  },
  button: {
    backgroundColor: '#2196F3',
    padding: 15,
    borderRadius: 8,
    alignItems: 'center',
  },
  clearButton: {
    backgroundColor: '#f44336',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default CameraImagePicker;
Swipe to see more code

🎯 Practice Exercise

Test your understanding of this topic:

Previous Module

Module 6: API Integration & Data Fetching

Next Module

Module 8: Advanced UI Components

Ready for the Next Module?

Continue your learning journey and master the next set of concepts.

Continue to Module 8