Clarifai Custom Model in React Native - react-native

Question

Can anyone help with integration of Clarifai Custom trained model in React Native? I found in docs that if you want to use custom instead of general model, you should pass object with model_id and model_version_id. As I created this custom model on their web page it gave me that parameters, but the algorithm won't really work and it returns the error of "request failed status code 400". Did anyone tried to implement this API in React Native?
const ScanMachine = props => {
const {id} = props.route.params;
const selectedCategory = CATEGORIES.find(cat => cat.id === id);
const camRef = useRef(null);
const [hasPermission, setHasPermission] = useState(null);
const [ratio, setRatio] = useState(null);
const [capturedPhoto, setCapturedPhoto] = useState(null);
const [prediction, setPrediction] = useState([]);
useEffect(() => {
(async () => {
const { status } = await Camera.requestPermissionsAsync();
setHasPermission(status === 'granted');
setRatio('16:9');
})();
}, []);
if (hasPermission === null) {
return <View />;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
async function takePicture() {
if(camRef) {
let data = await camRef.current.takePictureAsync();
console.log(data);
setCapturedPhoto(data.uri);
return data.uri;
}
}
async function resize(photo) {
let imageManipulate = await ImageManipulator.manipulateAsync(photo, [{resize: {height: 350, width: 300}}], {base64: true});
return imageManipulate.base64;
}
async function predictions(image) {
let pred = await clarifai.models.predict({id: "custom_laundry_id", version: "03f4ff3ce1ba4cf68b77e923d0ce8699"}, image);
return pred;
}
async function detectObject() {
let photo = await takePicture();
let resized = await resize(photo);
let predict = await predictions(resized);
setPrediction(predict.outputs[0].data.concepts)
console.log(predict);
}
return (
<View style={{ flex: 1}}>
<Camera style={{ flex: 1, alignItems:'center'}} ref={camRef} ratio={ratio}>
<View style={{ flex: 1, backgroundColor: 'transparent', margin: 20, justifyContent: 'space-between'}}>
{prediction && <FlatList data={prediction.map(predict => ({
key: predict.name,
}))} renderItem={({ item }) => (
<Text style={{fontSize: 17, color: '#fff'}}>{item.key + " "}</Text>
)} numColumns={4} /> }
</View>
<BarcodeMask edgeColor={'#62B1F6'} backgroundColor={'transparent'} width={300} height={350} showAnimatedLine={false} />
<View style={{flex: 1, justifyContent: 'space-between', justifyContent:'flex-end', margin: 20}}>
<TouchableOpacity style={{ backgroundColor: 'transparent', alignSelf: 'flex-end'}} onPress={detectObject}>
<FontAwesome name="camera" style={{color: '#fff', fontSize: 40, alignContent: 'flex-start'}} />
</TouchableOpacity>
</View>
</Camera>
{/* { capturedPhoto &&
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', margin: 20}}>
<Image style={{width: '100%', height: '100%', borderRadius: 10}} source={{uri: capturedPhoto}} />
</View> } */}
</View>
);
};