react-native-compass-k

react-native-compass-k

React Native implementation of image editor with compass overlay, crop, brightness adjustment, and rotation features.

Installation

npm install react-native-compass-k

Additional Setup

This package requires some native dependencies. After installation, you may need to run:

# Install peer dependencies (if not already installed)
npm install react react-native

# Install required dependencies
npm install expo-image-manipulator react-native-image-picker react-native-svg

# For iOS
cd ios && pod install && cd ..

# For Android, no additional steps needed

Important: Make sure react and react-native are installed in your main project's node_modules, not in the package's node_modules. If you encounter "Cannot read property 'useState' of null" errors, try:

# Remove node_modules and reinstall
rm -rf node_modules
npm install

# Or use npm's dedupe to fix duplicate React instances
npm dedupe

Note: If you're not using Expo, you may need to use react-native-image-manipulator instead of expo-image-manipulator. Please check the compatibility with your React Native setup.

Usage

import { ImageController } from 'react-native-compass-k';

function App() {
  return (
    <ImageController
      onImageSelected={(result) => {
        console.log('Image:', result.image);
        console.log('Compass:', result.compass);
        console.log('Edits:', result.edits);
      }}
      enableCompass={true}
      enableCrop={true}
      enableBrightness={true}
      enableZoom={true}
      enableRotation={true}
      language="en"
    />
  );
}

Features

• Compass Overlay: Add and position a compass on images with rotation support
• Crop: Select and adjust crop areas with drag handles
• Brightness: Adjust image brightness with slider
• Zoom: Zoom in/out on images
• Rotation: Rotate images in 90-degree increments
• Multi-language: Support for English, Marathi, and Hindi

Props

ImageController

Prop	Type	Default	Description
onImageSelected	(result) => void	required	Callback when image is saved
onCancel	() => void	optional	Callback when editing is cancelled
enableCompass	boolean	true	Enable compass overlay
enableCrop	boolean	true	Enable crop functionality
enableBrightness	boolean	true	Enable brightness adjustment
enableZoom	boolean	true	Enable zoom functionality
enableRotation	boolean	true	Enable rotation functionality
maxFileSize	number	10MB	Maximum file size in bytes
acceptedFileTypes	string[]	['image/*']	Accepted file types
language	string	'en'	Language code ('en', 'mr', 'hi')

Troubleshooting

"Cannot read property 'useState' of null" Error

This error occurs when React is not properly resolved. Try:

• Clear and reinstall dependencies:

  rm -rf node_modules package-lock.json
  npm install
  

• Deduplicate React instances:

  npm dedupe
  

• Ensure React is in your main project: Make sure react and react-native are installed in your project's root node_modules, not in node_modules/react-native-compass-k/node_modules.

License

MIT