I am trying to build an react native app with expo and got stuck here
If you understand the problem neglect the below statements:
I am developing a React Native app using Expo, where I aim to integrate an ONNX model for face recognition. The app allows users to pick an image, preprocess it, and run inference using the ONNX Runtime for React Native. However, I am encountering multiple issues during development:
Here is the output i see in the application:
Here is the code i wrote in the index.jsx ~ i replaced index.tsx with jsx:
import React, { useState } from 'react';
import { View, Button, Image, Text, StyleSheet, Platform } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import { InferenceSession, Tensor } from 'onnxruntime-react-native';
import * as FileSystem from 'expo-file-system';
export default function App () {
const [imageUri, setImageUri] = useState(null);
const [output, setOutput] = useState(null);
// Load the ONNX model
const loadModel = async () => {
try {
const modelPath =
Platform.OS === 'android'
? `file:///android_asset/face_encoder.onnx` // Android path for assets
: `${FileSystem.documentDirectory}face_encoder.onnx`; // iOS path
// Load the ONNX model
const session = await InferenceSession.create(modelPath);
return session;
} catch (error) {
console.error('Error loading model:', error);
}
};
// Process image and run inference
const processImage = async (session) => {
if (!imageUri) return;
try {
// Convert image to tensor (mocked for simplicity)
// In practice, preprocess the image (resize to 224x224, normalize, etc.)
const inputTensor = new Float32Array(3 * 224 * 224).fill(0.5);
const tensor = new Tensor('float32', inputTensor, [1, 3, 224, 224]);
// Run inference
const feeds = { input: tensor };
const results = await session.run(feeds);
// Process results
setOutput(results.output.data);
} catch (error) {
console.error('Error processing image:', error);
}
};
const handleLoadImage = async () => {
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
if (!result.canceled) {
setImageUri(result.uri);
}
};
const handleRunModel = async () => {
const session = await loadModel();
if (session) {
await processImage(session);
}
};
return (
<View style={styles.container}>
<Text>Face Recognition App</Text>
{imageUri && <Image source={{ uri: imageUri }} style={styles.image} />}
<Button title="Load Image" onPress={handleLoadImage} />
<Button title="Run Model" onPress={handleRunModel} />
{output && <Text>Output: {JSON.stringify(output)}</Text>}
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
image: {
width: 200,
height: 200,
marginVertical: 20,
},
});
Here is the app.json:
{
"expo": {
"name": "FceDetectionApp",
"slug": "FceDetectionApp",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"scheme": "myapp",
"userInterfaceStyle": "automatic",
"newArchEnabled": true,
"ios": {
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/images/adaptive-icon.png",
"backgroundColor": "#ffffff"
},
"package": "Face.Files"
},
"web": {
"bundler": "metro",
"output": "static",
"favicon": "./assets/images/favicon.png"
},
"plugins": [
"expo-router",
[
"expo-splash-screen",
{
"image": "./assets/images/splash-icon.png",
"imageWidth": 200,
"resizeMode": "contain",
"backgroundColor": "#ffffff"
}
]
],
"experiments": {
"typedRoutes": true
},
"extra": {
"router": {
"origin": false
},
"eas": {
"projectId": "81f38c43-7dd5-4bfc-ad5d-fbb101bd1d3a"
}
}
}
}
Package.json dependencies:
"dependencies": {
"@expo/vector-icons": "^14.0.2",
"@react-navigation/bottom-tabs": "^7.2.0",
"@react-navigation/native": "^7.0.14",
"expo": "~52.0.23",
"expo-blur": "~14.0.1",
"expo-constants": "~17.0.3",
"expo-font": "~13.0.2",
"expo-haptics": "~14.0.0",
"expo-image-picker": "^16.0.3",
"expo-linking": "~7.0.3",
"expo-router": "~4.0.15",
"expo-splash-screen": "~0.29.18",
"expo-status-bar": "~2.0.0",
"expo-symbols": "~0.2.0",
"expo-system-ui": "~4.0.6",
"expo-web-browser": "~14.0.1",
"onnxruntime-react-native": "^1.20.1",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-native": "0.76.5",
"react-native-gesture-handler": "~2.20.2",
"react-native-get-random-values": "~1.11.0",
"react-native-reanimated": "~3.16.1",
"react-native-safe-area-context": "4.12.0",
"react-native-screens": "~4.4.0",
"react-native-web": "~0.19.13",
"react-native-webview": "13.12.5"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@types/jest": "^29.5.12",
"@types/react": "~18.3.12",
"@types/react-test-renderer": "^18.3.0",
"jest": "^29.2.1",
"jest-expo": "~52.0.2",
"react-test-renderer": "18.3.1",
"typescript": "^5.3.3"
},
]