react-native-image-picker | React Native module that allows you to use native UI | iOS library

by react-native-image-picker Java Version: v4.7.3 License: MIT

Download this library from

kandi X-RAY | react-native-image-picker Summary

react-native-image-picker is a Java library typically used in Telecommunications, Media, Media, Entertainment, Mobile, iOS, React Native, React applications. react-native-image-picker has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. However react-native-image-picker build file is not available. You can install using 'npm i react-native-image-picker' or download it from GitHub, npm.

A React Native module that allows you to select a photo/video from the device library or camera.

Support

Quality

Security

License

Reuse

kandi-support Support

react-native-image-picker has a medium active ecosystem.
It has 7468 star(s) with 1872 fork(s). There are 112 watchers for this library.
There were 10 major release(s) in the last 12 months.
There are 94 open issues and 1321 have been closed. On average issues are closed in 190 days. There are 7 open pull requests and 0 closed requests.
It has a neutral sentiment in the developer community.
The latest version of react-native-image-picker is v4.7.3

This Library - Support

Best in #iOS

Average in #iOS

This Library - Support

Best in #iOS

Average in #iOS

quality kandi Quality

react-native-image-picker has 0 bugs and 0 code smells.

This Library - Quality

Best in #iOS

Average in #iOS

This Library - Quality

Best in #iOS

Average in #iOS

security Security

react-native-image-picker has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
react-native-image-picker code analysis shows 0 unresolved vulnerabilities.
There are 0 security hotspots that need review.

This Library - Security

Best in #iOS

Average in #iOS

This Library - Security

Best in #iOS

Average in #iOS

license License

react-native-image-picker is licensed under the MIT License. This license is Permissive.
Permissive licenses have the least restrictions, and you can use them in most projects.

This Library - License

Best in #iOS

Average in #iOS

This Library - License

Best in #iOS

Average in #iOS

build Reuse

react-native-image-picker releases are available to install and integrate.
Deployable package is available in npm.
react-native-image-picker has no build file. You will be need to create the build yourself to build the component from source.
Installation instructions are not available. Examples and code snippets are available.
It has 902 lines of code, 62 functions and 28 files.
It has medium code complexity. Code complexity directly impacts maintainability of the code.

This Library - Reuse

Best in #iOS

Average in #iOS

This Library - Reuse

Best in #iOS

Average in #iOS

Top functions reviewed by kandi - BETA

kandi has reviewed react-native-image-picker and discovered the below as its top functions. This is intended to give you an instant insight into react-native-image-picker implemented functionality, and help decide if they suit your requirements.

Launch camera .
Launch an image library .
Resizes an image .
Returns an image response map .
Initialize Flipper
Parses a date time value to UTC .
Retrieves the bitmap from the given Uri .
Creates the native module and adds them to the image picker .
Initialize
Returns the main component name .

react-native-image-picker Key Features

:sunrise_over_mountains: A React Native module that allows you to use native UI to select media from the device library or directly from the camera.

react-native-image-picker Examples and Code Snippets

See all related Code Snippets

Install

Copy

Download

yarn add react-native-image-picker

# RN &gt;= 0.60
cd ios &amp;&amp; pod install

# RN &lt; 0.60
react-native link react-native-image-picker

Methods

Copy

Download

import {launchCamera, launchImageLibrary} from 'react-native-image-picker';

TypeError: undefined is not an object (evaluating '_this.camera = _ref')

Copy

Download

import { useRef } from 'react';
...
const cameraRef = useRef<Camera>(null);
...
<Camera ref={cameraRef} ... />

React Native: Backend retrieves 'undefined' when uploading images

Copy

Download

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://', '');
              }
            });
}


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);
      });

-----------------------

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://', '');
              }
            });
}


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);
      });

java.lang.NoSuchMethodError: No virtual method setSkipClientToken(Z)V in class Lcom/facebook/GraphRequest;

Copy

Download

implementation 'com.facebook.android:facebook-marketing:[4,5)'

implementation 'com.facebook.android:facebook-marketing:latest.release'

-----------------------

implementation 'com.facebook.android:facebook-marketing:[4,5)'

implementation 'com.facebook.android:facebook-marketing:latest.release'

CocoaPods could not find compatible versions for pod "Firebase/CoreOnly" on React Native ios

Copy

Download

$FirebaseSDKVersion = '8.10.0'

After taking image using react-native-image-picker but Failed to submit via Laravel API

Copy

Download

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();

this permision (android.permission.QUERY_ALL_PACKAGES) was automatically added to Manifest

Copy

Download

<uses-permission android:name="android.permission.QUERY_ALL_PACKAGES"
        tools:node="remove" tools:ignore="QueryAllPackagesPermission" />

react-native android getting Blob JSON instead of image file in S3 pre-signed URL

Copy

Download

export const save = async (data, uri, type) =>
  await fetch(uri, {
    method: 'PUT',
    headers: {
      Accept: 'application/json',
      'Content-Type': type
    },
    body: data
  });

React Native Error: Project with path ':expo-modules-core' could not be found in project ':react-native-reanimated'

Copy

Download

npx install-expo-modules

react-native-image-picker getting reverse height and width

Copy

Download

import ImagePicker from 'react-native-image-crop-picker';

ImagePicker.openCamera({
  width: 768,
  height: 1024,
  cropping: false,
}).then(image => {
  console.log(image)
})

how can i convert image uri to base64?

Copy

Download

import RNFS from 'react-native-fs';

//base64 res
var data = await RNFS.readFile( "file://path-to-file", 'base64').then(res => { return res });

See all related Code Snippets

Community Discussions

Trending Discussions on react-native-image-picker

Cannot Read Property Show of Undefined When Using DocumentPicker.show() in React Native
TypeError: undefined is not an object (evaluating '_this.camera = _ref')
React Native: Backend retrieves 'undefined' when uploading images
java.lang.NoSuchMethodError: No virtual method setSkipClientToken(Z)V in class Lcom/facebook/GraphRequest;
CocoaPods could not find compatible versions for pod "Firebase/CoreOnly" on React Native ios
After taking image using react-native-image-picker but Failed to submit via Laravel API
Invariant Violation: Native module cannot be null.only IOS not android
this permision (android.permission.QUERY_ALL_PACKAGES) was automatically added to Manifest
Start React Native : Error 502 from maven-metadata.xml
react-native android getting Blob JSON instead of image file in S3 pre-signed URL

Trending Discussions on react-native-image-picker

QUESTION

Cannot Read Property Show of Undefined When Using DocumentPicker.show() in React Native

Asked 2022-Mar-22 at 18:08

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:08

The 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:

Source https://stackoverflow.com/questions/71575875

QUESTION

TypeError: undefined is not an object (evaluating '_this.camera = _ref')

Asked 2022-Mar-22 at 00:13

-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 <View/>;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }
  
  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 (
    <View style={styles.container}>
      <Camera style={styles.camera}
        type={type}
        ref={ref => {
          this.camera = ref;
        }}>
        <View style={styles.buttonContainer}>
          <TouchableOpacity
            style={styles.button}
            onPress={() => {
              setType(
                type === Camera.Constants.Type.back
                  ? Camera.Constants.Type.front
                  : Camera.Constants.Type.back
              );
            }}
            >
            <Image source={Images.camera} style={styles.icon}></Image>
          </TouchableOpacity>
          <TouchableOpacity
          style={styles.button}
          onPress={takePicture}
          >
            <Text style={styles.text}>Take</Text>
          </TouchableOpacity>
        </View>
      </Camera>
    </View>
  );
}

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:13

Create a new camera reference and attach it to the Camera component.

import { useRef } from 'react';
...
const cameraRef = useRef<Camera>(null);
...
<Camera ref={cameraRef} ... />

In your takePicture function replace this.camera.takePictureAsync with cameraRef.current?.takePictureAsync

Source https://stackoverflow.com/questions/71459069

QUESTION

React Native: Backend retrieves 'undefined' when uploading images

Asked 2022-Mar-04 at 05:36

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<any> {
  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<Express.Multer.File>,
    @Request() req: any,
  ): Promise<any> {
    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:36

I 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);
      });

Source https://stackoverflow.com/questions/71342391

QUESTION

java.lang.NoSuchMethodError: No virtual method setSkipClientToken(Z)V in class Lcom/facebook/GraphRequest;

Asked 2022-Feb-25 at 23:22

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:22

We have fixed the issue by replacing

implementation 'com.facebook.android:facebook-marketing:[4,5)'

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

Source https://stackoverflow.com/questions/71256006

QUESTION

CocoaPods could not find compatible versions for pod "Firebase/CoreOnly" on React Native ios

Asked 2022-Feb-02 at 19:23

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:23

1) 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'

Source https://stackoverflow.com/questions/70959945

QUESTION

After taking image using react-native-image-picker but Failed to submit via Laravel API

Asked 2022-Jan-27 at 13:13

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:

       `<TouchableOpacity
          style={styles.fileInput}
          onPress={() => {
            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);

            }
            });
          }}>
          <Text style={{textAlign: 'center', color: '#00549F', fontSize: 16,fontWeight: 'bold',}}>
          <Icon name='file' type='font-awesome' color='#00549F' /> Choose File
          </Text>
        </TouchableOpacity>`

react-native code for Laravel API submit is given below:

`<TouchableOpacity style={styles.button} onPress={() => {

    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");
      });

  }}>
  <Text style={{textAlign: 'center', color: 'white', fontSize: 16}}>
    Submit
  </Text>
</TouchableOpacity>`

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:13

react-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 to true and upload base64 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();

Source https://stackoverflow.com/questions/70878765

QUESTION

Invariant Violation: Native module cannot be null.only IOS not android

Asked 2022-Jan-20 at 05:12

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']
  };

};

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:12

Check 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.

Source https://stackoverflow.com/questions/70764363

QUESTION

this permision (android.permission.QUERY_ALL_PACKAGES) was automatically added to Manifest

Asked 2022-Jan-18 at 18:30

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:30

It 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

<uses-permission android:name="android.permission.QUERY_ALL_PACKAGES"
        tools:node="remove" tools:ignore="QueryAllPackagesPermission" />

also android:exported="true" inside <activity>

It is mentioned in here Behavior changes: Apps targeting Android 11

Source https://stackoverflow.com/questions/70757094

QUESTION

Start React Native : Error 502 from maven-metadata.xml

Asked 2022-Jan-17 at 13:07

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:07

Try this,

Go to the android folder.
Find build.gradle file.
Change every "jcenter()" into "mavenCentral()".

Source https://stackoverflow.com/questions/70729106

QUESTION

react-native android getting Blob JSON instead of image file in S3 pre-signed URL

Asked 2022-Jan-17 at 08:50

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 (
     <TouchableOpacity  onPress={() =>  
          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:50

Changing 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
  });

Source https://stackoverflow.com/questions/70725268

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install react-native-image-picker

You can install using 'npm i react-native-image-picker' or download it from GitHub, npm.
You can use react-native-image-picker like any standard Java library. Please include the the jar files in your classpath. You can also use any IDE and you can run and debug the react-native-image-picker component as you would do with any other Java program. Best practice is to use a build tool that supports dependency management such as Maven or Gradle. For Maven installation, please refer maven.apache.org. For Gradle installation, please refer gradle.org .

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .