React Native Quick Start Guide

Prerequisites

• A FacePing API key
• React Native environment setup
• Basic knowledge of React Native

Installation

First, create a new React Native project and install required dependencies:

npx react-native init FacePingDemo
cd FacePingDemo
npm install react-native-image-picker

Step 1: Create Face Group

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native';

const GroupCreator = () => {
  const [groupName, setGroupName] = useState('');
  const [status, setStatus] = useState('');

  const createGroup = async () => {
    try {
      const response = await fetch(
        `https://api.faceping.ai/groups/${groupName}`,
        {
          method: 'POST',
          headers: {
            'Authorization': 'Bearer your_api_key_here'
          }
        }
      );
      
      if (response.ok) {
        setStatus('Group created successfully');
      } else {
        throw new Error('Failed to create group');
      }
    } catch (error) {
      setStatus('Error creating group');
    }
  };

  return (
    <View style={styles.container}>
        <TextInput
            style={styles.input}
            value={groupName}
            onChangeText={setGroupName}
            placeholder="Enter group name"
        />
        <TouchableOpacity style={styles.button} onPress={createGroup}>
            <Text style={styles.buttonText}>Create Group</Text>
        </TouchableOpacity>
        {status ? <Text style={styles.status}>{status}</Text> : null}
    </View>
  );
};

Step 2: Upload Face Image

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, Image, StyleSheet } from 'react-native';
import { launchImageLibrary } from 'react-native-image-picker';

const FaceUploader = () => {
  const [image, setImage] = useState(null);
  const [status, setStatus] = useState('');

  const selectImage = async () => {
    const result = await launchImageLibrary({
      mediaType: 'photo'
    });

    if (result.assets?.[0]) {
      setImage(result);
    }
  };

  const uploadFace = async () => {
    if (!image?.assets?.[0]) return;

    const formData = new FormData();
    formData.append('image', {
      uri: image.assets[0].uri,
      type: image.assets[0].type,
      name: image.assets[0].fileName
    });

    try {
      const response = await fetch(
        'https://api.faceping.ai/groups/my-group/faces',
        {
          method: 'POST',
          headers: {
            'Authorization': 'Bearer your_api_key_here'
          },
          body: formData
        }
      );
      
      if (response.ok) {
        setStatus('Face uploaded successfully');
      } else {
        throw new Error('Failed to upload face');
      }
    } catch (error) {
      setStatus('Error uploading face');
    }
  };

 return (
    <View style={styles.container}>
        <TouchableOpacity style={styles.button} onPress={selectImage}>
            <Text style={styles.buttonText}>Select Image</Text>
        </TouchableOpacity>
        {image?.assets?.[0]?.uri && (
            <Image source={{ uri: image.assets[0].uri }} style={styles.preview} />
        )}
        <TouchableOpacity style={styles.button} onPress={uploadFace}>
            <Text style={styles.buttonText}>Upload Face</Text>
        </TouchableOpacity>
        {status ? <Text style={styles.status}>{status}</Text> : null}
    </View>
    );
};

Step 3: Search for Faces

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, Image, FlatList, StyleSheet } from 'react-native';
import { launchImageLibrary } from 'react-native-image-picker';

const FaceSearch = () => {
  const [image, setImage] = useState(null);
  const [matches, setMatches] = useState([]);
  const [status, setStatus] = useState('');

  const selectImage = async () => {
    const result = await launchImageLibrary({
      mediaType: 'photo'
    });

    if (result.assets?.[0]) {
      setImage(result);
    }
  };

  const searchFaces = async () => {
    if (!image?.assets?.[0]) return;

    const formData = new FormData();
    formData.append('image', {
      uri: image.assets[0].uri,
      type: image.assets[0].type,
      name: image.assets[0].fileName
    });

    try {
      const response = await fetch(
        'https://api.faceping.ai/groups/my-group/search',
        {
          method: 'POST',
          headers: {
            'Authorization': 'Bearer your_api_key_here'
          },
          body: formData
        }
      );
      
      const data = await response.json();
      setMatches(data.matches || []);
      setStatus(`Found ${data.matches?.length || 0} matches`);
    } catch (error) {
      setStatus('Error searching faces');
      setMatches([]);
    }
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.button} onPress={selectImage}>
        <Text style={styles.buttonText}>Select Image</Text>
      </TouchableOpacity>
      {image?.assets?.[0]?.uri && (
        <Image 
          source={{ uri: image.assets[0].uri }} 
          style={styles.preview} 
        />
      )}
      <TouchableOpacity style={styles.button} onPress={searchFaces}>
        <Text style={styles.buttonText}>Search Faces</Text>
      </TouchableOpacity>
      {status ? <Text style={styles.status}>{status}</Text> : null}
      <FlatList
        data={matches}
        renderItem={({ item }) => (
          <Text>Match Score: {item.score}</Text>
        )}
      />
    </View>
  );
};

Common styles for all components:

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  button: {
    backgroundColor: '#007AFF',
    padding: 12,
    borderRadius: 6,
    alignItems: 'center',
    marginBottom: 10,
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
  preview: {
    width: 200,
    height: 200,
    alignSelf: 'center',
    marginVertical: 10,
  },
  status: {
    marginTop: 10,
    textAlign: 'center',
  },
});

Security Notes

• Images are immediately discarded after vector conversion
• Face vectors cannot be reverse-engineered into images
• Always use HTTPS for all API calls
• Store your API keys securely

Next Steps

• Explore the full API documentation
• Learn about metadata filtering
• Try bulk processing with Google Drive or FTP