⚠️ Deprecated Package

This package is deprecated. Please use @thinksys/react-native-mediapipe instead.

React Native ThinkSys Mediapipe

The ThinkSys Mediapipe enables pose detection for React Native apps, providing a comprehensive solution for both iOS and Android developers. It offers real-time motion tracking, seamless integration, and customizable features, ideal for fitness, healthcare, and interactive applications. By combining MediaPipe's advanced capabilities with React Native's cross-platform framework, developers can easily build immersive, motion-based apps across both mobile platforms.

Requirement

• iOS 13 or higher
• Gradle minimum SDK 24 or higher
• Android SDK Version 26 or higher

Installation

npm install react-native-thinksys-mediapipe

iOS setup

1. Add camera usage permission in Info.plist in example/ios

   <key>NSCameraUsageDescription</key>
   <string>This app uses camera to get pose landmarks that appear in the camera feed.</string>

2. Run cd ios && pod install

Android setup

Add these to your project's manifest.

<uses-feature android:name="android.hardware.camera" />
<uses-permission android:name="android.permission.CAMERA" />

Usage

Basic

import { RNMediapipe } from 'react-native-thinksys-mediapipe';

export default function App() {

    return (
        <View>
            <RNMediapipe 
                width={400}
                height={300}
            />
        </View>
    )
}

Usage with body prop

Used to show/hide any body part overlay

By default, the body prop is set to true

import { RNMediapipe } from 'react-native-thinksys-mediapipe';

export default function App() {

    return (
        <View>
            <RNMediapipe 
                width={400}
                height={300}
                face={true}
                leftArm={true}
                rightArm={true}
                leftWrist={true}
                rightWrist={true}
                torso={true}
                leftLeg={true}
                rightLeg={true}
                leftAnkle={true}
                rightAnkle={true}
            />
        </View>
    )
}

Usage with switch camera method

import { RNMediapipe, switchCamera } from 'react-native-thinksys-mediapipe';

export default function App() {

    const onFlip = () => {
        switchCamera();
    };

    return (
        <View>
            <RNMediapipe 
                width={400}
                height={300}
            />

            <TouchableOpacity onPress={onFlip} style={styles.btnView}>
                <Text style={styles.btnTxt}>Switch Camera</Text>
            </TouchableOpacity>
        </View>
    )
}

Usage with onLandmark prop

import { RNMediapipe } from 'react-native-thinksys-mediapipe';

export default function App() {

    return (
        <View>
            <RNMediapipe 
                width={400}
                height={300}
                onLandmark={(data) => {
                    console.log('Body Landmark Data:', data);
                }}
            />
        </View>
    )
}

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

🔗 Links

License

This project is licensed under a custom MIT License with restrictions - see the LICENSE file for details.