Schoolx Image Module

A React Native library for handling image upload and face detection functionality.

Installation

npm install schoolx-image-module
# or
yarn add schoolx-image-module

Usage

Basic Usage

import React, { useState } from 'react';
import InitialScreen from 'schoolx-image-module';

const App = () => {
  const [isOpen, setIsOpen] = useState(false);

  const uploadImage = async (image: string) => {
    // Your upload logic here
    console.log('Uploading image:', image);
    
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 2000));
    
    return {
      type: 'success' as const,
      message: 'Upload successful'
    };
  };

  const onClose = () => {
    setIsOpen(false);
    console.log('Modal closed');
  };

  return (
    <InitialScreen
      uploadImage={uploadImage}
      onClose={onClose}
      isOpen={isOpen}
    />
  );
};

Props

InitialScreenProps

| Prop | Type | Required | Description | |------|------|----------|-------------| | uploadImage | (image: string) => Promise<ResultUpdateFaceProps> | Yes | Function to handle image upload | | onClose | () => void | Yes | Callback when modal is closed | | isOpen | boolean | Yes | Controls modal visibility |

ResultUpdateFaceProps

interface ResultUpdateFaceProps {
  type: 'success' | 'failed';
  message: string;
}

Types

The library exports the following types:

import {
  InitialScreenProps,
  ResultUpdateFaceProps,
  Step,
  ErrorType,
  FaceUpdateFlowProps
} from 'schoolx-image-module';

Features

• Face Detection: Built-in face detection using ML Kit
• Image Validation: Automatic validation for image quality and face detection
• Modal Interface: Clean modal interface for image upload flow
• TypeScript Support: Full TypeScript support with type definitions
• Customizable: Easy to customize upload logic and UI

Dependencies

This library requires the following peer dependencies:

• react-native-vision-camera
• @react-native-ml-kit/face-detection
• react-native-image-picker
• @bam.tech/react-native-image-resizer
• react-native-modal
• @gorhom/bottom-sheet
• react-native-reanimated
• react-native-gesture-handler
• react-native-safe-area-context
• react-native-svg

Development

Local Testing

# Install dependencies
yarn install

# Run on iOS
yarn ios

# Run on Android
yarn android

# Run tests
yarn test

Building for Production

# Clean build
yarn clean

# Reset and reinstall
yarn reset

License

MIT