react-native-image-picker | React Native module that allows you to use native UI | iOS library
kandi X-RAY | react-native-image-picker Summary
Support
Quality
Security
License
Reuse
- Launch camera
- Creates a new file
- Gets the error map
- Checks if the camera has been granted
- Called when an activity is received
- Returns a map of a video response for the given Uri
- Get an image response map
- Resize image
- Initialise Fluopper
- Launch an image library with the specified options
- Converts a timestamp to a UTC timestamp
- Retrieves a bitmap from a video
react-native-image-picker Key Features
react-native-image-picker Examples and Code Snippets
Trending Discussions on react-native-image-picker
Trending Discussions on react-native-image-picker
QUESTION
I followed some answers from here that are similar to my issues. But unfortunately, the error is not removed. That is why I asked here again.
This is an old versioned React Native
project where react-native-document-picker
version was 2.1.0
. When I upgraded the version to 8.0.0
, the error shows as the following screenshot:
The current files are as like below;
android/settings.gradle
...
include ':react-native-document-picker'
project(':react-native-document-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-document-picker/android')
...
android/app/build.gradle
dependencies {
implementation fileTree(dir: "libs", include: ["*.jar"])
...
...
implementation project(':react-native-document-picker')
}
package.json
{
"name": "awesomeproject",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"@react-native-community/datetimepicker": "^6.0.2",
"@react-navigation/drawer": "^6.3.1",
"@react-navigation/native": "^6.0.8",
"@react-navigation/stack": "^6.1.1",
"axios": "^0.26.1",
"moment": "^2.29.1",
"native-base": "^3.3.7",
"react": "17.0.2",
"react-native": "0.67.2",
"react-native-action-button": "^2.8.5",
"react-native-document-picker": "^8.0.0",
"react-native-dropdownalert": "^4.5.1",
"react-native-fcm": "^16.2.4",
"react-native-fetch-blob": "^0.10.8",
"react-native-fs": "^2.19.0",
"react-native-gesture-handler": "^2.3.2",
"react-native-image-picker": "^4.7.3",
"react-native-iphone-x-helper": "^1.3.1",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-keyboard-spacer": "^0.4.1",
"react-native-loading-spinner-overlay": "^3.0.0",
"react-native-modal-datetime-picker": "^13.1.0",
"react-native-modalbox": "^2.0.2",
"react-native-reanimated": "^2.4.1",
"react-native-safe-area-context": "^4.1.2",
"react-native-screens": "^3.13.0",
"react-native-simple-radio-button": "^2.7.4",
"react-native-simple-toast": "^1.1.3",
"react-native-svg": "^12.3.0",
"react-native-swiper": "^1.6.0",
"react-native-vector-icons": "^9.1.0",
"react-redux": "^7.2.6",
"redux": "^4.1.2",
"redux-logger": "^3.0.6",
"redux-saga": "^1.1.3"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "7.14.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.66.2",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
}
app.js
import {DocumentPicker, DocumentPickerUtil} from 'react-native-document-picker';
pressOnAttach() {
Keyboard.dismiss();
this.refs.NoticeTitle.blur();
this.refs.NoticeDescription.blur();
setTimeout(() => {
DocumentPicker.show({
filetype: [DocumentPickerUtil.allFiles()],
}, (error, res) => {
if (error === null) {
setTimeout(() => {
if (!this.checkFileExtension(res.fileName)) {
alert(AppText.VALID_EXTENSION_MESSAGE)
} else {
this.generateList(res.uri, res.fileName, res.fileSize);
}
}, 1000)
}
});
}, 1000)
}
When I console.log
the DocumentPicker
and DocumentPickerUtil
, it returns undefined
always.
Could anyone help me please to fix this issue? Thanks in advance!
ANSWER
Answered 2022-Mar-22 at 18:08The reason you are getting DocumentPicker undefined is the react-native-document-picker
version 8.0.0
has been updated since version 2.1.0
which code you've posted.
According to the library doc, you have to import the DocumentPicker differently. And the util DocumentPickerUtil is also not available to the updated version. For react-native-document-picker
version 8.0.0
you have to import in the following way
import DocumentPicker, { types } from 'react-native-document-picker';
And also DocumentPicker.show
method is no longer available you have to use the DocumentPicker.pick
method.
Ref:
QUESTION
-App dev in React Native- Hello, I have a problem with Expo Camera. Here an error is referred when you want to take a picture.
"TypeError: undefined is not an object (evaluating '_this.camera = _ref')" / Scan.js.
If the app is freshly updated with Expo, everything works. But as soon as you continue programming and another error occurs, this error appears and doesn't go away until you refresh the app again.
I have tried a lot, but I need help here.
Scan.js
import React, { Component, useState, useEffect } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
import {launchCamera, launchImageLibrary} from 'react-native-image-picker';
import {Camera, Constants} from 'expo-camera';
import * as MediaLibrary from 'expo-media-library';
import * as Haptics from 'expo-haptics';
import Images from '../assets/icon/index'
const Scan = () => {
const [hasPermission, setHasPermission] = useState(null);
const [type, setType] = useState(Camera.Constants.Type.back);
const [status, requestPermission] = MediaLibrary.usePermissions();
useEffect(() => {
(async () => {
const { status } = await Camera.requestCameraPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);
if (hasPermission === null) {
return ;
}
if (hasPermission === false) {
return No access to camera;
}
takePicture = async () => {
if (this.camera) {
let photo = await this.camera.takePictureAsync();
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
console.log(photo.uri);
MediaLibrary.saveToLibraryAsync(photo.uri);
}
};
return (
{
this.camera = ref;
}}>
{
setType(
type === Camera.Constants.Type.back
? Camera.Constants.Type.front
: Camera.Constants.Type.back
);
}}
>
Take
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
camera: {
flex: 1,
},
buttonContainer: {
flex: 1,
backgroundColor: 'transparent',
flexDirection: 'row',
margin: 20,
top: 0,
},
button: {
flex: 0.1,
alignSelf: 'flex-end',
alignItems: 'center',
},
text: {
fontSize: 18,
color: 'white',
},
icon : {
tintColor: 'white',
},
})
export default Scan; ```
ANSWER
Answered 2022-Mar-22 at 00:13Create a new camera reference and attach it to the Camera
component.
import { useRef } from 'react';
...
const cameraRef = useRef(null);
...
In your takePicture
function replace this.camera.takePictureAsync
with cameraRef.current?.takePictureAsync
QUESTION
I try to upload images to my backend server, but I'm doing something wrong the api call.
Used Packages...
"react-native-image-picker": "^4.7.3",
"form-data": "^4.0.0",
"axios": "^0.21.4",
"react-native": "0.67.3"
...
..
.
Where I pick the Images from the Gallery:
import {
launchImageLibrary,
} from 'react-native-image-picker';
import {uploadProfileImages} from '../services/apiService';
export function MyRNApp() {
let image1: any,
image2: any,
image3: any,
image4: any,
image5: any = null;
launchImageLibrary(options, response => {
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.errorCode) {
console.log('ImagePicker Error: ', response.errorCode);
} else if (response.assets) {
image1 = {
uri: response.assets[0].uri,
type: response.assets[0].type,
name: response.assets[0].fileName,
};
image2 = {
uri: response.assets[1].uri,
type: response.assets[1].type,
name: response.assets[1].fileName,
};
image3 = {
uri: response.assets[2].uri,
type: response.assets[2].type,
name: response.assets[2].fileName,
};
image4 = {
uri: response.assets[3].uri,
type: response.assets[3].type,
name: response.assets[3].fileName,
};
image5 = {
uri: response.assets[4].uri,
type: response.assets[4].type,
name: response.assets[4].fileName,
};
}
});
const registerComplete = async () => {
setLoading(true);
console.log('Before upload: ' + image1);
await uploadProfileImages(image1, image2, image3, image4, image5)
.then(async res => {
console.log('images uploaded...');
console.log('Result: ', res);
})
.finally(() => {
setLoading(false);
});
};
}
My actuall axios call:
import FormData from 'form-data';
export async function uploadProfileImages(
image1: any,
image2: any,
image3: any,
image4: any,
image5: any,
): Promise {
const formData = new FormData();
formData.append('images', image1);
formData.append('images', image2);
formData.append('images', image3);
formData.append('images', image4);
formData.append('images', image5);
return await axios({
method: 'POST',
url: `${API_URL}upload`,
data: formData,
headers: {
'Content-Type': 'multipart/form-data',
Accept: 'application/json',
'Access-Control-Allow-Origin': '*',
Authorization: AUTH_HEADER,
},
});
}
NestJs Backend:
@Post('upload')
@HttpCode(200)
@UseInterceptors(
FilesInterceptor('images', 5, {
dest: '../uploads',
fileFilter: (req, file, cb) => {
if (file.mimetype.startsWith('image')) {
cb(null, true);
} else {
cb(new Error('No supported filetype'), false);
}
},
}),
)
async uploadFile(
@UploadedFiles() images: Array,
@Request() req: any,
): Promise {
if (req.headers['authorization'] === process.env.UPLOAD_KEY) {
>there it says 'undefined' when making call from RN App 🧐
console.log('Uploaded files: ' + images[0]);
return { files: images };
} else {
return { status: 'failed' };
}
}
The Backend API works fine (Tested in Postman). But when I'm making the api call in the RN App, it seems like the actuall photo data will not be send.
ANSWER
Answered 2022-Mar-04 at 05:36I tried a another solution and that works for me:
Where I pick the Image from the Gallery:
export function RNScreen(){
let photo = {
uri: '',
type: 'image/jpeg',
name: 'image.jpg',
};
launchImageLibrary(options, response => {
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.errorCode) {
console.log('ImagePicker Error: ', response.errorCode);
} else if (response.assets) {
photo.uri =
Platform.OS === 'android'
? String(response.assets[0].uri)
: String(response.assets[0].uri).replace('file://', '');
}
});
}
Upload Progress:
let data = new FormData();
data.append('images', photo);
let config = {
Authorization: AUTH_HEADER,
'Content-Type': 'multipart/form-data',
};
axios.post(API_URL + 'upload', data, {headers: config}).then(response => {
console.log(response.data);
});
QUESTION
It was working fine before I have done nothing, no packages update, no gradle update no nothing just created new build and this error occurs. but for some team members the error occur after gradle sync.
The issue is that build is generating successfully without any error but when opens the app it suddenly gets crash (in both debug and release mode)
Error
E/AndroidRuntime: FATAL EXCEPTION: AsyncTask #3
java.lang.NoSuchMethodError: No virtual method setSkipClientToken(Z)V in class Lcom/facebook/GraphRequest; or its super classes (declaration of 'com.facebook.GraphRequest' appears in /data/app/~~aLf3pfLySq5u7zpIAr2Hlg==/com.package-name-99h4GcP3GNx2sMs76AXGvA==/base.apk)
at com.facebook.marketing.internal.RemoteConfigManager.getRemoteConfigQueryResponse(RemoteConfigManager.java:87)
at com.facebook.marketing.internal.RemoteConfigManager.access$000(RemoteConfigManager.java:43)
at com.facebook.marketing.internal.RemoteConfigManager$1.run(RemoteConfigManager.java:64)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
at java.lang.Thread.run(Thread.java:923)
gradle-wrapper.properties
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-6.9-all.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
build.gradle
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
ext {
buildToolsVersion = "30.0.2"
minSdkVersion = 21
compileSdkVersion = 30
targetSdkVersion = 30
ndkVersion = "21.4.7075529"
}
repositories {
google()
mavenCentral()
jcenter()
// maven {
// url 'https://maven.fabric.io/public'
// }
maven { url "https://www.jitpack.io" }
}
dependencies {
classpath("com.android.tools.build:gradle:4.2.2")
classpath 'com.google.gms:google-services:4.2.0' // Google Services plugin
// Add the Fabric Crashlytics plugin.
// classpath 'io.fabric.tools:gradle:1.31.2'
// firebase performance sdk
classpath 'com.google.firebase:perf-plugin:1.4.0'
classpath 'com.google.firebase:firebase-crashlytics-gradle:2.7.1'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
mavenCentral()
mavenLocal()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url("$rootDir/../node_modules/react-native/android")
}
maven {
// Android JSC is installed from npm
url("$rootDir/../node_modules/jsc-android/dist")
}
google()
jcenter()
maven { url 'https://www.jitpack.io' }
}
}
subprojects {
afterEvaluate {project ->
if (project.hasProperty("android")) {
android {
buildToolsVersion "28.0.3"
compileSdkVersion 28
}
}
}
}
subprojects {
afterEvaluate {project ->
if (project.hasProperty("android")) {
android {
compileSdkVersion 29
buildToolsVersion '29.0.3'
}
}
}
}
packages
"dependencies": {
"@eva-design/eva": "^2.1.0",
"@react-native-async-storage/async-storage": "^1.15.14",
"@react-native-community/blur": "^3.6.0",
"@react-native-community/checkbox": "^0.5.0",
"@react-native-community/netinfo": "^6.0.1",
"@react-native-community/toolbar-android": "^0.1.0-rc.2",
"@react-native-firebase/analytics": "^10.3.1",
"@react-native-firebase/app": "^10.3.0",
"@react-native-firebase/auth": "^10.3.1",
"@react-native-firebase/crashlytics": "^10.3.1",
"@react-native-firebase/dynamic-links": "^10.3.1",
"@react-native-firebase/firestore": "^10.3.1",
"@react-native-firebase/iid": "^10.3.1",
"@react-native-firebase/in-app-messaging": "^10.3.1",
"@react-native-firebase/messaging": "^10.3.1",
"@react-native-firebase/perf": "^10.3.1",
"@react-native-firebase/remote-config": "^10.3.1",
"@react-native-firebase/storage": "^10.3.1",
"@react-native-picker/picker": "^2.1.0",
"@react-navigation/bottom-tabs": "^6.0.9",
"@react-navigation/native": "^6.0.6",
"@react-navigation/stack": "^6.0.11",
"@types/react-native": "^0.65.5",
"@ui-kitten/components": "^5.1.0",
"axios": "^0.19.0",
"i18n-js": "^3.5.1",
"moment": "^2.24.0",
"native-base": "2.13.8",
"react": "17.0.2",
"react-content-loader": "^4.3.4",
"react-native": "0.66.0",
"react-native-actions-sheet": "^0.5.6",
"react-native-adjust": "^4.28.0",
"react-native-amplitude-analytics": "^0.2.7",
"react-native-animatable": "^1.3.3",
"react-native-code-push": "^7.0.4",
"react-native-config": "^1.3.3",
"react-native-contacts": "^5.0.7",
"react-native-dots-pagination": "^0.2.0",
"react-native-fbsdk-next": "^6.2.0",
"react-native-fingerprint-scanner": "^6.0.0",
"react-native-floating-action": "^1.22.0",
"react-native-geocoding": "^0.4.0",
"react-native-geolocation-service": "^5.2.0",
"react-native-gesture-handler": "^1.5.2",
"react-native-get-random-values": "^1.4.0",
"react-native-html-to-pdf-lite": "^0.11.0",
"react-native-image-base64": "^0.1.4",
"react-native-image-pan-zoom": "^2.1.11",
"react-native-image-picker": "^4.1.2",
"react-native-image-resizer": "^1.2.0",
"react-native-in-app-review": "^2.1.7",
"react-native-linear-gradient": "^2.5.6",
"react-native-loading-spinner-overlay": "^1.1.0",
"react-native-material-menu": "^1.0.0",
"react-native-material-textfield": "^0.16.1",
"react-native-modal": "^13.0.0",
"react-native-phone-call": "^1.0.9",
"react-native-ratings": "^7.3.0",
"react-native-reanimated": "^1.13.0",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.9.0",
"react-native-share": "^7.2.1",
"react-native-smooth-pincode-input": "^1.0.9",
"react-native-sms-retriever": "https://github.com/sarmad1995/react-native-sms-retriever.git",
"react-native-snap-carousel": "^3.9.1",
"react-native-splash-screen": "^3.2.0",
"react-native-svg": "^12.1.1",
"react-native-version-check": "^3.4.2",
"react-native-version-number": "^0.3.6",
"react-native-view-shot": "^3.1.2",
"react-native-walkthrough-tooltip": "^1.3.0",
"react-redux": "^7.1.3",
"redux": "^4.0.4",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"rn-fetch-blob": "^0.12.0",
"urbanairship-react-native": "^12.0.0",
"uuid": "^8.3.0"
},
ANSWER
Answered 2022-Feb-25 at 23:22We have fixed the issue by replacing
implementation 'com.facebook.android:facebook-marketing:[4,5)'
by
implementation 'com.facebook.android:facebook-marketing:latest.release'
in android/app/build.gradle
file.
Posted this so someone out there facing the same problem will find the solution easily. It took me and my team around one and a half day to figure it out as there is no clear solution out there.
Solution Ref: here
QUESTION
I am trying to install React Native Firebase Mlkit to my existing iOS React Native app. My app is already using various Firebase packages (app, auth, firestore, etc.).
I am following the instructions from the guide. I tried both automatic and manual installation. But when I run pod install
, I got this error:
[!] CocoaPods could not find compatible versions for pod "Firebase/CoreOnly":
In Podfile:
Firebase/MLVisionTextModel was resolved to 5.0.0, which depends on
Firebase/CoreOnly (= 5.0.0)
RNFBApp (from `../node_modules/@react-native-firebase/app`) was resolved to 14.3.0, which depends on
Firebase/CoreOnly (= 8.11.0)
This is my POD File:
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
platform :ios, '12.0'
target 'com.xxxxxx.xxxxxxx' do
config = use_native_modules!
use_react_native!(
:path => config[:reactNativePath],
# to enable hermes on iOS, change `false` to `true` and then install pods
:hermes_enabled => false
)
pod 'Firebase/Core'
pod 'Firebase/MLVision'
pod 'Firebase/MLVisionTextModel'
pod 'Firebase/MLVisionBarcodeModel'
target 'com.xxxxxxx.xxxxxxxxTests' do
inherit! :complete
# Pods for testing
pod 'react-native-splash-screen', :path => '../node_modules/react-native-splash-screen'
pod 'react-native-receive-sharing-intent', :path => '../node_modules/react-native-receive-sharing-intent'
pod 'RNMlKit', :path => '../node_modules/react-native-firebase-mlkit/ios'
end
# Enables Flipper.
#
# Note that if you have use_frameworks! enabled, Flipper will not work and
# you should disable the next line.
use_flipper!()
post_install do |installer|
react_native_post_install(installer)
__apply_Xcode_12_5_M1_post_install_workaround(installer)
end
end
This is my package.json:
{
"name": "xxxxxxxx",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"@dudigital/react-native-zoomable-view": "^1.1.3",
"@invertase/react-native-apple-authentication": "^2.1.5",
"@react-native-async-storage/async-storage": "^1.15.14",
"@react-native-community/cli": "^6.3.1",
"@react-native-community/clipboard": "^1.5.1",
"@react-native-firebase/app": "^14.3.0",
"@react-native-firebase/auth": "^14.3.0",
"@react-native-firebase/firestore": "^14.3.0",
"@react-native-firebase/storage": "^14.3.0",
"@react-native-google-signin/google-signin": "^7.0.3",
"@react-navigation/bottom-tabs": "^6.0.9",
"@react-navigation/native": "^6.0.6",
"@react-navigation/stack": "^6.0.11",
"i18n-js": "^3.8.0",
"react": "17.0.2",
"react-native": "0.66.4",
"react-native-document-picker": "^7.1.2",
"react-native-eject": "^0.1.2",
"react-native-firebase-mlkit": "^0.6.2",
"react-native-fs": "^2.18.0",
"react-native-gesture-handler": "^2.2.0",
"react-native-image-picker": "^4.6.0",
"react-native-material-menu": "^2.0.0",
"react-native-receive-sharing-intent": "^2.0.0",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.10.1",
"react-native-share": "^7.3.2",
"react-native-splash-screen": "^3.3.0",
"react-native-svg": "^12.1.1",
"react-native-swiper": "^1.6.0",
"react-native-vector-icons": "^9.0.0",
"react-native-vision-camera": "^2.12.0",
"react-redux": "^7.2.6",
"redux-persist": "^6.0.0"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "7.14.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.66.2",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
}
There are a lots of similiar question here, but nothing works. This is a list of various commands I tried in different orders:
- deleted Pods folder
rm -rf Podfile.lock
pod update
pod repo update
pod install --repo-update
- Remove
pod 'Firebase/Core'
from the pod file
ANSWER
Answered 2022-Feb-02 at 19:231) First off Firebase/MLVisionTextModel
is deprecated (FirebaseMLVisionTextModel has been deprecated in favor of MLKitTextRecognition). You can read the migration guide here (https://developers.google.com/ml-kit/migration)
2) If you ever have errors like was resolved to x.x.x, which depends on Firebase/CoreOnly (= x.x.x)
A lot of times you can fix this by adding this below at the very top of your PodFile to specify what version to use.
$FirebaseSDKVersion = '8.10.0'
QUESTION
I have a react-native app where I used react-native-image-picker to take image from gallery and it successfully taken and preview on image tag. But failed to submit the image on laravel API.
- Node version: 16.13.2
- npm version: 8.1.2
- react-native-cli version: 2.0.1
- react-native version: 0.66.1
react-native code for image-pick is given below:
` {
let options = {
storageOptions: {
path: 'images',
},
};
launchImageLibrary(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
alert(response.customButton);
} else {
setDocument(response.assets[0].uri)
setFromImage({
uri: response.assets[0].uri,
type: response.assets[0].type,
name: response.assets[0].fileName,
// data: response.data
data: response.assets[0].uri
})
console.log(fromImage);
}
});
}}>
Choose File
`
react-native code for Laravel API submit is given below:
` {
const url = appUrl.testImageStore;
const config = {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
'enctype': 'multipart/form-data',
},
body: JSON.stringify({
document: fromImage,
}),
};
fetch(url, config)
.then(response => response.json())
.then(responseJson => {
// console.log(responseJson)
if (responseJson.status == '2') {
Alert.alert(responseJson.message);
} else if (responseJson.status == '1') {
Alert.alert(responseJson.message);
// navigation.navigate('Home');
} else if (responseJson.status == '0') {
Alert.alert(responseJson.message);
// } else if (responseJson.status == '3') {
// setErrorMessages(responseJson.messages.toArray())
// Alert.alert(responseJson.messages);
}
})
.catch(error => {
//Alert.alert("Failed to registration 2");
});
}}>
Submit
`
Laravel API code is given below:
`public function testImageStore(Request $request){
if($request->hasFile('document')){
$image = $request->file('document');
$folder_path = 'uploads/images/documents/';
$image_new_name = Str::random(20).'-'.now()->timestamp.'.'.$image->getClientOriginalExtension();
//resize and save to server
Image::make($image->getRealPath())->save($folder_path.$image_new_name);
return response()->json([
"message"=>"file found & stored",
"status"=>"1",
]);
}
return response()->json([`enter code here`
"message"=>"file not found",
"status"=>"1",
]);
}`
After submitting image it don't found and the output screen is given attached file, please concern there.
CLICK HERE to see the output
ANSWER
Answered 2022-Jan-27 at 13:13react-native-image-picker
returns image URI reference to the device media storage not actually image data.
You have 2 options to get real image data:
- Set
includeBase64
property totrue
and uploadbase64
image data - Fetch image data as BLOB format and upload BLOB data
const blob = await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onload = function () {
resolve(xhr.response);
};
xhr.onerror = function (e) {
reject(new TypeError("Network request failed"));
};
xhr.responseType = "blob";
xhr.open("GET", localPath, true);
xhr.send(null);
});
// Code to upload to BLOB data to the server here
// We're done with the blob, close and release it
blob.close();
QUESTION
i have the Invariant Violation: Native module cannot be null error and the 2nd error down below. I found online the issue might have to do with not having an ios folder in a module directory, i looked in each of the folders in the local system and on github with them all containing the ios folder
{
"main": "index.js",
"scripts": {
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"start": "expo start --dev-client"
},
"dependencies": {
"@invertase/react-native-apple-authentication": "^2.1.5",
"@react-native-community/clipboard": "^1.5.1",
"@react-native-community/datetimepicker": "4.0.0",
"@react-native-google-signin/google-signin": "^7.0.1",
"@react-native-picker/picker": "2.2.1",
"@react-navigation/bottom-tabs": "^6.0.9",
"@react-navigation/drawer": "^6.1.8",
"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.5",
"expo": "^44.0.0",
"expo-file-system": "~13.1.0",
"expo-splash-screen": "~0.14.1",
"expo-status-bar": "~1.2.0",
"expo-updates": "~0.11.3",
"from": "^0.1.7",
"react": "^17.0.2",
"react-dom": "17.0.1",
"react-native": "^0.66.4",
"react-native-biometrics": "^2.1.4",
"react-native-canvas": "^0.1.38",
"react-native-chart-kit": "^6.11.0",
"react-native-chartjs": "^1.0.3",
"react-native-document-picker": "^7.1.1",
"react-native-fbsdk": "^3.0.0",
"react-native-file-access": "^2.1.0",
"react-native-flash-message": "^0.2.0",
"react-native-gesture-handler": "~2.1.0",
"react-native-gifted-charts": "^0.2.2",
"react-native-git-upgrade": "^0.2.7",
"react-native-haptic-feedback": "^1.13.0",
"react-native-image-picker": "^4.4.2",
"react-native-image-viewing": "^0.2.1",
"react-native-ios-context-menu": "^1.7.0",
"react-native-keyboard-accessory": "^0.1.16",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-keychain": "^8.0.0",
"react-native-linear-gradient": "^2.5.6",
"react-native-mmkv": "^1.5.4",
"react-native-paper": "^4.10.1",
"react-native-paper-dates": "^0.8.0",
"react-native-picker-select": "^8.0.4",
"react-native-qrcode-svg": "^6.1.2",
"react-native-reanimated": "~2.3.1",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.10.1",
"react-native-svg": "12.1.1",
"react-native-swipe-gestures": "^1.0.5",
"react-native-vector-icons": "^9.0.0",
"react-native-view-pdf": "^0.12.2",
"react-native-web": "0.17.1",
"react-native-webview": "11.15.0"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"babel-plugin-transform-remove-console": "^6.9.4"
},
"private": true,
"name": "MyApp",
"version": "1.0.0",
"expo": {
"autolinking": {
"exclude": [
"expo-file-system",
"expo-updates"
]
}
}
}
Invariant Violation: "main" has not been registered. This can happen if:
- Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
- A module failed to load due to an error and
AppRegistry.registerComponent
wasn't called.
I look through https://reactnative.dev/docs/libraries and stackoverflow. I did npx pod install and npx react-native run-ios but that came back with the same error.
index.js
import { registerRootComponent } from 'expo';
import App from './App';
// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in Expo Go or in a native build,
// the environment is set up appropriately
registerRootComponent(App);
any help would be appreciated
** Edit - 20/1/2022
i finally fixed it by changing
module.exports = function(api) {
api.cache(true);
return {
presets: ['module:metro-react-native-babel-preset']
};
};
to
module.exports = function(api) {
api.cache(true);
return {
presets: ['module:metro-react-native-babel-preset'],
plugins: ['react-native-reanimated/plugin']
};
};
ANSWER
Answered 2022-Jan-20 at 05:12Check the library @react-navigation/drawer
compatibility with IOS and Android respectively , link it manually sometimes autolinking doesn't work. Ensure you are running correct project , clean build and install pod and check it out.
QUESTION
I have a react native app that it worked well until upgrade packages Actually after upgrade packages this permision added (android.permission.QUERY_ALL_PACKAGES) to manifest.please help me
this is first package.json
{
"name": "mazeapp",
"version": "2.0.0",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"@gregfrench/react-native-wheel-picker": "^1.2.15",
"@miblanchard/react-native-slider": "^2.0.1",
"@react-native-community/async-storage": "1.12.1",
"@react-native-community/checkbox": "0.3.0",
"@react-native-community/netinfo": "4.6.0",
"@react-native-community/toolbar-android": "0.1.0-rc.2",
"@react-native-firebase/app": "6.7.1",
"@react-native-firebase/messaging": "6.7.1",
"@react-native-picker/picker": "^1.9.10",
"axios": "^0.19.0",
"lottie-react-native": "3.5.0",
"moment-jalaali": "^0.9.2",
"react": "16.9.0",
"react-dom": "16.9.0",
"react-native": "0.61.5",
"react-native-app-intro-slider": "4.0.4",
"react-native-awesome-alerts": "1.4.2",
"react-native-background-actions": "^2.6.4",
"react-native-background-timer": "2.4.1",
"react-native-check-box": "^2.1.7",
"react-native-confirmation-code-field": "^4.1.0",
"react-native-date-picker": "3.2.5",
"react-native-device-info": "5.6.5",
"react-native-easy-toast": "^1.2.0",
"react-native-emoji": "1.8.0",
"react-native-exit-app": "^1.1.0",
"react-native-file-picker": "0.0.19",
"react-native-fs": "^2.16.6",
"react-native-gesture-handler": "1.5.6",
"react-native-i18n": "^2.0.15",
"react-native-image-crop-picker": "^0.28.0",
"react-native-image-picker": "2.3.4",
"react-native-inappbrowser-reborn": "^3.5.1",
"react-native-item-select": "0.3.0",
"react-native-modal": "11.5.6",
"react-native-modalbox": "2.0.2",
"react-native-motion": "1.0.5",
"react-native-otp-verify": "^1.0.3",
"react-native-persian-calendar-picker": "^3.1.1",
"react-native-popup-dialog": "0.18.3",
"react-native-progress": "4.1.2",
"react-native-push-notification": "^7.3.1",
"react-native-rate": "^1.2.4",
"react-native-ratings": "^7.4.0",
"react-native-reanimated": "~1.4.0",
"react-native-root-toast": "3.2.1",
"react-native-safe-area-context": "0.6.0",
"react-native-screens": "2.0.0-alpha.12",
"react-native-sectioned-multi-select": "0.8.1",
"react-native-select-contact": "^1.5.0",
"react-native-simple-modal": "^9.0.1",
"react-native-simple-radio-button": "^2.7.4",
"react-native-snap-carousel": "^3.9.1",
"react-native-sound": "0.11.0",
"react-native-sqlite-storage": "^5.0.0",
"react-native-stars": "^1.2.2",
"react-native-step-indicator": "^1.0.3",
"react-native-svg": "9.13.3",
"react-native-svg-charts": "5.4.0",
"react-native-swiper": "^1.6.0",
"react-native-table-component": "^1.2.1",
"react-native-textinput-effects": "^0.5.1",
"react-native-typing-animation": "^0.1.7",
"react-native-uuid-generator": "^6.1.1",
"react-native-vector-icons": "6.7.0",
"react-native-view-more-text": "^2.1.0",
"react-native-web": "^0.11.7",
"react-native-webview": "^11.4.1",
"react-navigation": "4.4.3",
"react-navigation-stack": "^1.10.3",
"react-navigation-tabs": "2.10.1",
"react-number-format": "4.4.1",
"react-redux": "7.2.2",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0",
"rn-fetch-blob": "^0.12.0",
"socket.io-client": "^2.4.0",
"styled-components": "5.2.1",
"victory-native": "^33.0.1"
},
"devDependencies": {
"@babel/core": "7.12.3",
"@babel/runtime": "7.12.1",
"@react-native-community/eslint-config": "^0.0.7",
"babel-jest": "25.5.1",
"eslint": "^6.8.0",
"jest": "25.5.4",
"jetifier": "1.6.6",
"metro-react-native-babel-preset": "^0.58.0",
"react-native-bundle-visualizer": "2.2.1",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}
this is secound file package.json
{
"name": "mazeapp",
"version": "2.1.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"@miblanchard/react-native-slider": "^2.0.1",
"@react-native-community/async-storage": "1.12.1",
"@react-native-community/checkbox": "0.3.0",
"@react-native-community/netinfo": "4.6.0",
"@react-native-community/toolbar-android": "^0.2.1",
"@react-native-firebase/analytics": "^14.0.0",
"@react-native-firebase/app": "^14.0.0",
"@react-native-firebase/messaging": "^14.0.0",
"axios": "^0.19.0",
"lottie-react-native": "3.5.0",
"moment-jalaali": "^0.9.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-native": "^0.66.4",
"react-native-app-intro-slider": "4.0.4",
"react-native-awesome-alerts": "1.4.2",
"react-native-background-actions": "^2.6.4",
"react-native-background-timer": "2.4.1",
"react-native-check-box": "^2.1.7",
"react-native-confirmation-code-field": "^7.2.0",
"react-native-device-info": "5.6.5",
"react-native-emoji": "1.8.0",
"react-native-exit-app": "^1.1.0",
"react-native-file-picker": "0.0.19",
"react-native-fs": "^2.16.6",
"react-native-gesture-handler": "1.5.6",
"react-native-image-crop-picker": "^0.28.0",
"react-native-image-picker": "2.3.4",
"react-native-inappbrowser-reborn": "^3.5.1",
"react-native-item-select": "0.3.0",
"react-native-modal": "11.5.6",
"react-native-modalbox": "2.0.2",
"react-native-motion": "1.0.5",
"react-native-otp-verify": "^1.0.3",
"react-native-persian-calendar-picker": "^3.1.1",
"react-native-progress": "4.1.2",
"react-native-push-notification": "^7.3.1",
"react-native-rate": "^1.2.4",
"react-native-ratings": "^7.4.0",
"react-native-reanimated": "~1.4.0",
"react-native-root-toast": "^3.3.0",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "2.0.0-alpha.12",
"react-native-select-contact": "^1.5.0",
"react-native-simple-modal": "^9.0.1",
"react-native-simple-radio-button": "^2.7.4",
"react-native-snap-carousel": "^3.9.1",
"react-native-sound": "0.11.0",
"react-native-sqlite-storage": "^5.0.0",
"react-native-stars": "^1.2.2",
"react-native-step-indicator": "^1.0.3",
"react-native-svg": "^9.13.3",
"react-native-svg-charts": "5.4.0",
"react-native-swiper": "^1.6.0",
"react-native-textinput-effects": "^0.5.1",
"react-native-typing-animation": "^0.1.7",
"react-native-uuid-generator": "^6.1.1",
"react-native-vector-icons": "^9.0.0",
"react-native-view-more-text": "^2.1.0",
"react-native-web": "^0.11.7",
"react-native-webview": "^11.4.1",
"react-navigation": "4.4.3",
"react-navigation-stack": "^1.10.3",
"react-navigation-tabs": "^2.10.1",
"react-number-format": "4.4.1",
"react-redux": "7.2.2",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0",
"rn-fetch-blob": "^0.12.0",
"socket.io-client": "^2.4.0",
"victory-native": "^33.0.1"
},
"devDependencies": {
"@babel/core": "7.16.5",
"@babel/runtime": "7.16.5",
"@react-native-community/eslint-config": "2.0.0",
"babel-jest": "26.6.3",
"eslint": "7.14.0",
"jest": "26.6.3",
"jetifier": "1.6.6",
"metro-react-native-babel-preset": "0.66.2",
"react-native-bundle-visualizer": "2.2.1",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
}
build.gradle
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
ext {
// googlePlayServicesVersion = "4.3.3" // default: "+"
// firebaseMessagingVersion = "+" // default: "+"
buildToolsVersion = "30.0.2"
minSdkVersion = 21
compileSdkVersion = 30
targetSdkVersion = 30
supportLibVersion = "28.0.0"
}
repositories {
google()
jcenter()
}
dependencies {
classpath("com.android.tools.build:gradle:4.2.2")
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
classpath 'com.google.gms:google-services:4.3.3'
classpath 'com.google.firebase:firebase-crashlytics-gradle:2.8.1'
}
}
allprojects {
repositories {
mavenCentral()
mavenLocal()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url("$rootDir/../node_modules/react-native/android")
}
maven {
// Android JSC is installed from npm
url("$rootDir/../node_modules/jsc-android/dist")
}
google()
maven { url 'https://jitpack.io' }
}
}
ANSWER
Answered 2022-Jan-18 at 18:30It is because of target SDK updated to 30, some features (eg: Speech recognition,TTS) works in from android 11 device only after adding following code in our AndroidManifest.xml
also android:exported="true"
inside
It is mentioned in here Behavior changes: Apps targeting Android 11
QUESTION
When I execute npx react-native run-android
I have a 502 error that does not allow me to start my project.
I have read these recents topics : "React Native: Android "Received status code 502 from server: Bad Gateway" from JCenter and Bintray being discontinued" et "Could not HEAD maven-metadata.xml. Received status code 502 from server: Bad Gateway".
They mention that the breakdown is repaired. It's confirmed on the official website : Sporadic 502 Bad Gateway, 500 Internal Server Error for maven-metadata.xml resources
Sometimes I read that it can come from my cache. How to check this?
* What went wrong:
Execution failed for task ':app:checkDebugAarMetadata'.
> Could not resolve all files for configuration ':app:debugRuntimeClasspath'.
> Could not resolve com.facebook.react:react-native:+.
Required by:
project :app
project :app > project :notifee_react-native
project :app > project :react-native-async-storage_async-storage
project :app > project :react-native-community_masked-view
project :app > project :react-native-firebase_app
project :app > project :react-native-firebase_crashlytics
project :app > project :react-native-firebase_messaging
project :app > project :react-native-picker_picker
project :app > project :sayem314_react-native-keep-awake
project :app > project :react-native-background-actions
project :app > project :react-native-camera
project :app > project :react-native-fast-image
project :app > project :react-native-fbsdk-next
project :app > project :react-native-gesture-handler
project :app > project :react-native-image-picker
project :app > project :react-native-pager-view
project :app > project :react-native-photoeditorsdk
project :app > project :react-native-pinchable
project :app > project :react-native-safe-area-context
project :app > project :react-native-screens
project :app > project :react-native-svg
project :app > project :react-native-vector-icons
project :app > project :react-native-version-check
> Failed to list versions for com.facebook.react:react-native.
> Unable to load Maven meta-data from https://jcenter.bintray.com/com/facebook/react/react-native/maven-metadata.xml.
> Could not HEAD 'https://jcenter.bintray.com/com/facebook/react/react-native/maven-metadata.xml'. Received status code 502 from server: Bad Gateway
> Could not resolve com.facebook.android:facebook-android-sdk:12.+.
Required by:
project :app > project :react-native-fbsdk-next
> Skipped due to earlier error
> Could not resolve com.squareup.okio:okio:1.15.0.
Required by:
project :app > project :notifee_react-native > com.squareup.okhttp3:okhttp:3.12.13
> Skipped due to earlier error
ANSWER
Answered 2022-Jan-17 at 13:07Try this,
- Go to the android folder.
- Find build.gradle file.
- Change every "jcenter()" into "mavenCentral()".
QUESTION
I'm trying to upload an image from android using react-native-image-picker
and pre-signed URL but instead getting an image with no content and if I change the image file extension to JSON, I get the blob content in JSON format as shown below
{"_data":{"lastModified":0,"name":"rn_image_picker_lib_temp_e47f0064-c49c-439e-95e2-30ed167d1444.jpg","size":2447490,"offset":0,"type":"image/jpeg","blobId":"8d905790-3113-4cb7-b9ab-b5415e5e6b50","__collector":{}}}
Below is the code snippet for the Axios request and the component
// HTTP Requests
export const save = async (uri, data, type) =>
await axios.put(uri, data, {headers: {'Content-Type': type, Accept: "application/json"}})
.then(response => {
return response.data;
}, error => {
return error.response.data;
});
export const getImageURI = async id =>
await axios.post(URL + id)
.then(response => {
return response.data;
}, error => {
return error.response.data;
});
import React from 'react';
import { TouchableOpacity } from 'react-native';
import { launchImageLibrary } from 'react-native-image-picker';
import { getImageURI, save } from '../Services';
const UploadImage = (props) => {
const uploadImageOnS3 = async (file) => {
const res = await fetch(file.uri);
const blob = await res.blob();
let signedUriResp = await getImageURI("someId");
await save(signedUriResp.url, blob, file.type);
}
return (
launchImageLibrary({mediaType: 'photo', includeBase64: true},
(response) => uploadImageOnS3(response))}
/>
);
}
export default UploadImage;
Versions:
"react-native-image-picker": "3.2.1",
"react-native": "0.63.4",
"react": "16.13.1",
"axios": "^0.21.1",
I've given permission for Camera and Storage to the application in android. Not sure why the blob is not uploaded correctly as an image to S3. Did anyone come across a similar issue? Please let me know if there is any I missed anything.
ANSWER
Answered 2022-Jan-17 at 08:50Changing axios
to fetch
in the save image call solved the issue. Here is the snippet of the above method
export const save = async (data, uri, type) =>
await fetch(uri, {
method: 'PUT',
headers: {
Accept: 'application/json',
'Content-Type': type
},
body: data
});
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install react-native-image-picker
Support
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesExplore Kits - Develop, implement, customize Projects, Custom Functions and Applications with kandi kits
Save this library and start creating your kit
Share this Page