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:

1. Clear and reinstall dependencies:

   rm -rf node_modules package-lock.json
   npm install

2. Deduplicate React instances:

   npm dedupe

3. 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