react-native-camera | A Camera component for React Native | Camera library

by react-native-camera Java Version: v4.2.1 License: Non-SPDX

Download this library from

kandi X-RAY | react-native-camera Summary

react-native-camera is a Java library typically used in Video, Camera, React Native applications. react-native-camera has no bugs, it has no vulnerabilities and it has medium support. However react-native-camera build file is not available and it has a Non-SPDX License. You can download it from GitHub.

A Camera component for React Native. Also supports barcode scanning!

Support

Quality

Security

License

Reuse

kandi-support Support

react-native-camera has a medium active ecosystem.
It has 9549 star(s) with 3148 fork(s). There are 186 watchers for this library.
There were 6 major release(s) in the last 12 months.
There are 35 open issues and 2304 have been closed. On average issues are closed in 116 days. There are 50 open pull requests and 0 closed requests.
It has a neutral sentiment in the developer community.
The latest version of react-native-camera is v4.2.1

react-native-camera Support

Best in #Camera

Average in #Camera

react-native-camera Support

Best in #Camera

Average in #Camera

quality kandi Quality

react-native-camera has 0 bugs and 0 code smells.

react-native-camera Quality

Best in #Camera

Average in #Camera

react-native-camera Quality

Best in #Camera

Average in #Camera

security Security

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

react-native-camera Security

Best in #Camera

Average in #Camera

react-native-camera Security

Best in #Camera

Average in #Camera

license License

react-native-camera has a Non-SPDX License.
Non-SPDX licenses can be open source with a non SPDX compliant license, or non open source licenses, and you need to review them closely before use.

react-native-camera License

Best in #Camera

Average in #Camera

react-native-camera License

Best in #Camera

Average in #Camera

build Reuse

react-native-camera releases are available to install and integrate.
react-native-camera 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 11702 lines of code, 917 functions and 210 files.
It has high code complexity. Code complexity directly impacts maintainability of the code.

react-native-camera Reuse

Best in #Camera

Average in #Camera

react-native-camera Reuse

Best in #Camera

Average in #Camera

Top functions reviewed by kandi - BETA

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

Process the image for the given options .
Internal method used to capture camera parameters .
Choose the camera id from the camera .
Starts the camera .
region > measure
Rotate the bitmap .
Adjusts the size of the preview of the camera s preview .
Compute the focus area from a motion event .
Checks if media is valid .
Returns the names of RNFaceDetectants .

react-native-camera Key Features

A Camera component for React Native. Also supports barcode scanning!

react-native-camera Examples and Code Snippets

See all related Code Snippets

Example import

Copy

Download

import { RNCamera, FaceDetector } from 'react-native-camera';

Contributing

Copy

Download

  &lt;uses-permission android:name="android.permission.CAMERA" /&gt;

Undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[5], "expo-camera").Camera')

Copy

Download

npx install-expo-modules

{
  ...
  devDependencies:{
    "expo-camera": "~12.0.3"
  }
  ...
}

{
  ...
  dependencies:{
    "expo-camera": "~12.0.3"
  }
  ...
}

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

npx install-expo-modules

{
  ...
  devDependencies:{
    "expo-camera": "~12.0.3"
  }
  ...
}

{
  ...
  dependencies:{
    "expo-camera": "~12.0.3"
  }
  ...
}

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

npx install-expo-modules

{
  ...
  devDependencies:{
    "expo-camera": "~12.0.3"
  }
  ...
}

{
  ...
  dependencies:{
    "expo-camera": "~12.0.3"
  }
  ...
}

react native typescript screen test returning Test suite failed to run AsyncStorage is null

Copy

Download

npm uninstall @react-native-community/async-storage
npm install @react-native-async-storage/async-storage

Invalid hook call. Hooks can only be called inside of the body of a function component. in react native

Copy

Download

import React, {useState} from 'react';
import {StyleSheet, View, Text} from 'react-native';
import AppBtn from '../../components/AppButton';
import CustomText from '../../components/CustomText';
import AppScreen from '../../components/AppScreen';
import TextField from '../../components/TextField';
import Colors from '../../config/Colors';
import {useValidation} from 'react-native-form-validator';


function Register({navigation}) {
    const [name, setName] = useState('Enter Name');
    const [email, setEmail] = useState('Enter Mail');
    const [newPassword, setNewPassword] = useState('Enter password');
    const [confirmPassword, setConfirmPassword] = useState('Confirm password');
    const {validate, isFieldInError, getErrorsInField, getErrorMessages} =
    useValidation({
            state: {name, email, number, newPassword, confirmPassword},
        });
    const fieldError = ({field}) => {
    {
        isFieldInError(field) &&
            getErrorsInField(field).map(errorMessage => (
                <Text style={styles.text}>{errorMessage}</Text>
            ));
    }
    };
    const onPressButton = () => {
        validate({
            name: {minlength: 3, maxlength: 30, required: true},
            email: {email: true},
            newPassword: {minlength: 6, required: true},
            confirmPassword: {equalPassword: newPassword},
        });
    };
    return (
        <AppScreen style={{alignItems: 'center'}}>
            <CustomText
                text="Sign Up"
                style="bold head"
                otherStyle={{marginTop: 100}}
            />
            <View style={styles.hairline} />
            <TextField
                data="user name"
                other="name"
                onChangeText={setName}
                value={name}
            />
            {fieldError('name')}
            <TextField data="mail" onChangeText={setEmail} value={email} />
            {fieldError('email')}
            <TextField
                data="password"
                onChangeText={setNewPassword}
                value={newPassword}
            />
            {fieldError('newPassword')}
            <TextField
                data="confirm password"
                onChangeText={setConfirmPassword}
                value={confirmPassword}
            />
            {fieldError('confirmPassword')}
            <AppBtn text="Register" onPress={onPressButton} />
            <AppBtn
                text="Return back"
                style={{
                    backgroundColor: Colors.primary,
                    width: '30%',
                    marginTop: 100,
                }}
                onPress={() => navigation.navigate('PreAuth')}
            />
            <Text>{getErrorMessages()}</Text>
        </AppScreen>
    );
}
const styles = StyleSheet.create({
    container: {},
    hairline: {
        backgroundColor: Colors.secondary,
        marginTop: 10,
        height: 2,
        width: '50%',
        marginBottom: 70,
    },
    text: {
        margin: 10,
    },
});

export default Register;

React Native: Java heap space

Copy

Download

org.gradle.jvmargs=-Xmx2g -XX\:MaxHeapSize\=4g

Proptypes function react native Typescript

Copy

Download

interface propTypes {
  isVisible : boolean,
  scanCallback: (_data: string, _type: string) => void,
  OnCloseModal: () => void
}

Alternative for MediaScanner scanFile / CameraRoll on Android 29/Q

Copy

Download

import RNFS from 'react-native-fs'
const { PNModule } = ReactNative.NativeModules

try {
    if (Platform.OS === 'android' && Platform.Version >= 29) {
        // Google ask that the requestLegacyExternalStorage is no longer used when targeting android 11, and use
        // the scoped storage or the new global permission, see https://gitlab.inria.fr/floristic/pn-mobile-test/-/issues/417
        // Solution here, custom module which use the MediaStore API and copy the file to the DCIM folders.
        const segments = path.split('/')
        const fileName = segments[segments.length - 1]

        const fileUriPath = await PNModule.moveToMediaStore(path.replace('file://', ''), fileName)
        if (!fileUriPath) {
            return null
        }
        const scanResult = await RNFS.scanFile(fileUriPath)
        if (fileUriPath.startsWith('file:///')) {
            return fileUriPath
        }
        return `file://${fileUriPath}`
    }
    return await CameraRoll.save(path)
} catch (error) {
    console.error(error)
}

    @ReactMethod
    public void moveToMediaStore(String filePath, String fileName, Promise promise) {
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.Q) {
            promise.resolve(null);
            return;
        }
        ContentValues values = new ContentValues();
        values.put(MediaStore.Images.Media.DISPLAY_NAME, fileName);
        values.put(MediaStore.Images.Media.MIME_TYPE, "image/jpeg");

        values.put(MediaStore.MediaColumns.RELATIVE_PATH, Environment.DIRECTORY_DCIM + "/APPNAME");
        values.put(MediaStore.MediaColumns.IS_PENDING, 1);

        ContentResolver resolver = getReactApplicationContext().getContentResolver();
        Uri imageUri = resolver.insert(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, values);

        try {
            OutputStream fos = resolver.openOutputStream(imageUri);
            copy(new File(filePath), fos);
            values.clear();
            values.put(MediaStore.Video.Media.IS_PENDING, 0);
            resolver.update(imageUri, values, null, null);
            promise.resolve(getNameFromContentUri(getReactApplicationContext(), imageUri));
        } catch (Exception e) {
            e.printStackTrace();
            promise.reject(e);
        }
    }

    @RequiresApi(api = Build.VERSION_CODES.Q)
    public static void copy(File src, OutputStream out) throws IOException {
        try (InputStream in = new FileInputStream(src)) {
            FileUtils.copy(in, out);
        }
    }

    // From https://stackoverflow.com/a/64359655/1377145
    public static String getNameFromContentUri(Context context, Uri contentUri){
        ContentResolver contentResolver = context.getContentResolver();
        Cursor cursor = contentResolver.query(contentUri, null, null, null, null);
        cursor.moveToFirst();
        String document_id = cursor.getString(0);
        document_id = document_id.substring(document_id.lastIndexOf(":") + 1);
        cursor.close();

        cursor = contentResolver.query(
            android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI,
            null, MediaStore.Images.Media._ID + " = ? ", new String[]{document_id}, null);
        cursor.moveToFirst();
        String path = cursor.getString(cursor.getColumnIndex(MediaStore.Images.Media.DATA));
        cursor.close();
        return path;
    }

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

import RNFS from 'react-native-fs'
const { PNModule } = ReactNative.NativeModules

try {
    if (Platform.OS === 'android' && Platform.Version >= 29) {
        // Google ask that the requestLegacyExternalStorage is no longer used when targeting android 11, and use
        // the scoped storage or the new global permission, see https://gitlab.inria.fr/floristic/pn-mobile-test/-/issues/417
        // Solution here, custom module which use the MediaStore API and copy the file to the DCIM folders.
        const segments = path.split('/')
        const fileName = segments[segments.length - 1]

        const fileUriPath = await PNModule.moveToMediaStore(path.replace('file://', ''), fileName)
        if (!fileUriPath) {
            return null
        }
        const scanResult = await RNFS.scanFile(fileUriPath)
        if (fileUriPath.startsWith('file:///')) {
            return fileUriPath
        }
        return `file://${fileUriPath}`
    }
    return await CameraRoll.save(path)
} catch (error) {
    console.error(error)
}

    @ReactMethod
    public void moveToMediaStore(String filePath, String fileName, Promise promise) {
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.Q) {
            promise.resolve(null);
            return;
        }
        ContentValues values = new ContentValues();
        values.put(MediaStore.Images.Media.DISPLAY_NAME, fileName);
        values.put(MediaStore.Images.Media.MIME_TYPE, "image/jpeg");

        values.put(MediaStore.MediaColumns.RELATIVE_PATH, Environment.DIRECTORY_DCIM + "/APPNAME");
        values.put(MediaStore.MediaColumns.IS_PENDING, 1);

        ContentResolver resolver = getReactApplicationContext().getContentResolver();
        Uri imageUri = resolver.insert(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, values);

        try {
            OutputStream fos = resolver.openOutputStream(imageUri);
            copy(new File(filePath), fos);
            values.clear();
            values.put(MediaStore.Video.Media.IS_PENDING, 0);
            resolver.update(imageUri, values, null, null);
            promise.resolve(getNameFromContentUri(getReactApplicationContext(), imageUri));
        } catch (Exception e) {
            e.printStackTrace();
            promise.reject(e);
        }
    }

    @RequiresApi(api = Build.VERSION_CODES.Q)
    public static void copy(File src, OutputStream out) throws IOException {
        try (InputStream in = new FileInputStream(src)) {
            FileUtils.copy(in, out);
        }
    }

    // From https://stackoverflow.com/a/64359655/1377145
    public static String getNameFromContentUri(Context context, Uri contentUri){
        ContentResolver contentResolver = context.getContentResolver();
        Cursor cursor = contentResolver.query(contentUri, null, null, null, null);
        cursor.moveToFirst();
        String document_id = cursor.getString(0);
        document_id = document_id.substring(document_id.lastIndexOf(":") + 1);
        cursor.close();

        cursor = contentResolver.query(
            android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI,
            null, MediaStore.Images.Media._ID + " = ? ", new String[]{document_id}, null);
        cursor.moveToFirst();
        String path = cursor.getString(cursor.getColumnIndex(MediaStore.Images.Media.DATA));
        cursor.close();
        return path;
    }

Which component should I use class or functional?

Copy

Download

this.state = {
      token: this.props.route.params.token,
      is_camera: 0,
      is_loading: 0,
      barcodes: [],
      camera: {
        type: RNCamera.Constants.Type.back,
        flashMode: RNCamera.Constants.FlashMode.auto,
      },
    };
  }

react-native-camera: Android app crashing without error

Copy

Download

03-31 21:51:16.152 13039 13039 E unknown:ViewManager: Error while updating prop playSoundOnCapture
03-31 21:51:16.152 13039 13039 E unknown:ViewManager: java.lang.reflect.InvocationTargetException
... a bunch of traceback lines
03-31 21:51:16.152 13039 13039 E unknown:ViewManager: Caused by: java.lang.NoSuchMethodError: No virtual method setPlaySoundOnCapture(Z)V in class Lorg/reactnative/camera/RNCameraView; or its super classes (declaration of 'org.reactnative.camera.RNCameraView' appears in /data/app/~~2TIdBhLTuyzCkV7CYFT2Mg==/com.chowtime-uS9KR34-elnZ0EmL_ovT3w==/base.apk!classes4.dex)

Text Recognition with RNCamera

Copy

Download

onTextRecognized={({textBlocks})=>{console.log(textBlocks)}}

Error: Element type is invalid with Check the render method in React Native

Copy

Download

import {Ionicons} from 'react-native-vector-icons/Ionicons';

import Ionicons from 'react-native-vector-icons/Ionicons';

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

import {Ionicons} from 'react-native-vector-icons/Ionicons';

import Ionicons from 'react-native-vector-icons/Ionicons';

See all related Code Snippets

Community Discussions

Trending Discussions on react-native-camera

Could not find com.google.android:flexbox:1.0.0 react-native-intercom
react-native "Export statement may only appear at top level" was working fine until cleaning project how do I find out the issue?
Undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[5], "expo-camera").Camera')
Start React Native : Error 502 from maven-metadata.xml
How to add camera permission in react native
react native typescript screen test returning Test suite failed to run AsyncStorage is null
Expo Managed Workflow - Modify CocoaPods Podfile
React Native CameraRoll being undefined
Native Camera with full functionalities on Flutter or React Native?
iOS disable "select more photos" alert

Trending Discussions on react-native-camera

QUESTION

Could not find com.google.android:flexbox:1.0.0 react-native-intercom

Asked 2022-Feb-25 at 18:17

I have a react-native project. After the bitnary (jcenter) shutted down I started to replace it. Currently I'm using mavenCentral(). Also I'm using the react-native-intercom (wrapper for intercom). When I'm trying to build gradlew assembleRelease. Its throws me an error.

Could not determine the dependencies of task ':app:compileReleaseJavaWithJavac'.
> Could not resolve all task dependencies for configuration ':app:releaseCompileClasspath'.
   > Could not find com.google.android:flexbox:1.0.0.
     Required by:
         project :app > io.intercom.android:intercom-sdk-base:5.5.1

I saw the solution, but it didn't help. this one

My files: (if you need more information let me know <3)

build.gradle(app):

apply plugin: "com.android.application"

import com.android.build.OutputFile
import com.sun.org.apache.xalan.internal.xsltc.compiler.Copy


instead
project.ext.react = [
        entryFile: "index.js",
        enableHermes: false,  // clean and rebuild if changing
        bundleInBeta: true,
        bundleInStaging: true,
        devDisabledInBeta: true,
        devDisabledInStaging: true,
        extraPackagerArgs: ["--max-workers=1"]
]

apply from: "../../node_modules/react-native/react.gradle"
def enableSeparateBuildPerCPUArchitecture = false
def enableProguardInReleaseBuilds = false
def jscFlavor = 'org.webkit:android-jsc:+'

def enableHermes = project.ext.react.get("enableHermes", false);

android {
    compileSdkVersion rootProject.ext.compileSdkVersion
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    buildToolsVersion '29.0.2'

    defaultConfig {
        applicationId "se.welcomeapp.android"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 5955
        versionName "5.9.55"

        multiDexEnabled true
        vectorDrawables.useSupportLibrary = true
        missingDimensionStrategy 'react-native-camera', 'general'
    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
        }
    }
    signingConfigs {
        release {
            storeFile file("welcome_keystore.jks")
            storePassword "DjU@y!@6C^qYqYaGyQCo"
            keyAlias "live"
            keyPassword "mX7!&@RZiD2^5ZaWkKAV"
        }
    }
    buildTypes {
        debug {
            applicationIdSuffix ".debug"
            manifestPlaceholders = [isDebug:true]
        }
        beta {
            manifestPlaceholders = [isDebug:false]
            applicationIdSuffix ".beta"
            matchingFallbacks = [ 'release']
            signingConfig signingConfigs.release
        }
        staging {
            manifestPlaceholders = [isDebug:false]
            applicationIdSuffix ".staging"
            matchingFallbacks = [ 'release']
            signingConfig signingConfigs.release
        }
        release {
            manifestPlaceholders = [isDebug:false]
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
            signingConfig signingConfigs.release
        }
    }
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            def versionCodes = ["armeabi-v7a":1, "x86":2, "arm64-v8a": 3, "x86_64": 4]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
            }
        }
    }

    dexOptions {
        preDexLibraries false
        javaMaxHeapSize "3g"
    }

    packagingOptions {
        pickFirst '**/libjsc.so'
        pickFirst '**/libc++_shared.so'
        pickFirst '**/armeabi-v7a/libc++_shared.so'
        pickFirst '**/x86/libc++_shared.so'
        pickFirst '**/arm64-v8a/libc++_shared.so'
        pickFirst '**/x86_64/libc++_shared.so'
        pickFirst '**/x86/libjsc.so'
        pickFirst '**/armeabi-v7a/libjsc.so'
    }
}

buildscript {
    repositories {
        maven { url 'https://maven.fabric.io/public' }
    }

    dependencies {
        classpath 'io.fabric.tools:gradle:1.28.1'
    }
}

apply plugin: 'io.fabric'

repositories {
    maven { url 'https://maven.fabric.io/public' }
}

dependencies {
    implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
    implementation "com.facebook.react:react-native:+"
    implementation project(':react-native-amplitude-analytics')
    implementation project(':react-native-color-matrix-image-filters')
    implementation project(':react-native-pdf')
    implementation project(':rn-fetch-blob')
    implementation project(':react-native-document-picker')
    implementation project(':react-native-sound')
    implementation project(':react-native-audio')
    implementation project(':react-native-branch')
    implementation "org.webkit:android-jsc:r241213"
    implementation project(':@react-native-community_async-storage')
    implementation project(':react-native-svg')
    implementation project(':react-native-webview')
    implementation project(':@react-native-community_netinfo')
    implementation project(':react-native-keychain')
    implementation project(':react-native-share')
    implementation project(':react-native-intercom')
    implementation(project(':react-native-firebase')) {
        transitive = false
    }
    implementation(project(':react-native-maps')){
        exclude group: 'com.google.android.gms', module: 'play-services-base'
        exclude group: 'com.google.android.gms', module: 'play-services-maps'
    }
    implementation 'com.google.android.gms:play-services-maps:17.0.0'
    implementation(project(':react-native-geolocation-service')) {
        exclude group: 'com.google.android.gms', module: 'play-services-location'
    }
    implementation 'com.google.android.gms:play-services-location:17.0.0'

    implementation project(':react-native-image-crop-picker')
    implementation project(':react-native-fs')
    implementation project(':react-native-open-settings')
    implementation project(':react-native-linear-gradient')
    implementation project(':bugsnag-react-native')
    implementation project(':react-native-device-info')
    implementation project(':react-native-push-notification')
    implementation project(':react-native-geocoder')
    implementation project(':react-native-vector-icons')
    implementation project(':react-native-i18n')
    implementation project(':react-native-fbsdk')
    implementation project(':react-native-camera')
    provided fileTree(dir: 'libs', include: ['*.jar'])

    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'com.google.android.material:material:1.2.1'
    implementation "com.android.support:appcompat-v7:28.0.0"
    implementation "com.android.support:design:28.0.0"

    implementation("com.facebook.react:react-native:0.60.4") {
        // enforce version to fix https://github.com/facebook/react-native/issues/19259
        // if someone send a version of react-native to jcenter, it will use the one
        // from jcenter first before node_modules
        force = true
    }

    if (enableHermes) {
        def hermesPath = "../../node_modules/hermesvm/android/";
        debugImplementation files(hermesPath + "hermes-debug.aar")
        releaseImplementation files(hermesPath + "hermes-release.aar")
    } else {
        implementation jscFlavor
    }

    implementation 'io.github.inflationx:calligraphy3:3.1.1'
    implementation 'io.github.inflationx:viewpump:2.0.3'
    implementation('com.crashlytics.sdk.android:crashlytics:2.6.8@aar') {
        transitive = true;
    }

    // Firebase dependencies
    implementation "com.google.android.gms:play-services-base:17.0.0"
    implementation "com.google.firebase:firebase-core:17.0.1"
    implementation "com.google.firebase:firebase-messaging:20.2.4"
    implementation "com.google.firebase:firebase-analytics:17.0.1"

    // Intercom with Firebase dependencies
    implementation 'io.intercom.android:intercom-sdk-base:5.5.1'
    implementation 'io.intercom.android:intercom-sdk-fcm:5.+'

    // If your app supports Android versions before Ice Cream Sandwich (API level 14)
    // TODO: upgrade these to 1.3.0 and test if it solves the crash on samsung for animated gifs
    implementation 'com.facebook.fresco:animated-base-support:1.0.1'  // For animated GIF support
    implementation 'com.facebook.fresco:animated-webp:1.0.1'
    implementation 'com.facebook.fresco:animated-gif:1.0.1'
    implementation 'com.facebook.fresco:webpsupport:1.0.1'
    implementation 'com.android.support:multidex:1.0.3'

}

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

task wrapper(type: Wrapper) {
    gradleVersion = '5.4.1'
}

apply plugin: 'com.google.gms.google-services'

build.gradle (android):

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
        ext {
                buildToolsVersion = "29.0.2"
                minSdkVersion = 16
                compileSdkVersion = 29
                targetSdkVersion = 29
        }
        repositories {
                google()
                mavenCentral()
        }
        dependencies {
                classpath 'com.android.tools.build:gradle:3.5.3'
                classpath 'com.google.gms:google-services:4.2.0'

            // NOTE: Do not place your application dependencies here; they belong
            // in the individual module build.gradle files
        }
}

allprojects {
        repositories {
                google()
                mavenCentral()
                maven { url "$rootDir/../node_modules/react-native/android" }
//              maven { url 'https://maven.google.com' }
                maven {
                    url "https://jitpack.io"
                    credentials { username authToken }
                }
                maven { url "$rootDir/../node_modules/jsc-android/dist" }
        }
}

subprojects {
    afterEvaluate {project ->
        if (project.hasProperty("android")) {
            android {
                compileSdkVersion 29
                buildToolsVersion "29.0.2"
            }
        }
    }
    project.configurations.all {
        resolutionStrategy {
            eachDependency { details ->
                if (requested.group == 'com.android.support') {
                    if (requested.name.startsWith("support-v4")) {
                        details.useVersion '29.0.0'
                    }
                }
            }
        }
    }
}

ANSWER

Answered 2022-Jan-23 at 12:38

I solved it. If you are using the react-native-intercom wrapper. You need to update it, after update everything works fine

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

QUESTION

react-native "Export statement may only appear at top level" was working fine until cleaning project how do I find out the issue?

Asked 2022-Feb-09 at 06:34

I'm only seeing mention of changes in babelrc etc. online for this message. I've tried to remove the dependency that gives me this error and it appears that then next dependency evaluated returns the same message.

The error is coming from any/all of my node_modules folder and the code is correct. I'm guessing something has changed w/ versions of something in my dev dependencies but not sure how to track it down...

I'm using RN 61.5 old I know but this is a production env and can't update atm. Any help on where to look to find the issue please?

    "dependencies": {
        "@nartc/react-native-barcode-mask": "1.1.5",
        "@react-native-community/async-storage": "1.7.1",
        "@react-native-community/masked-view": "0.1.5",
        "@react-native-community/netinfo": "6.0.2",
        "@react-native-community/picker": "1.6.5",
        "@reduxjs/toolkit": "1.2.3",
        "clone": "2.1.2",
        "expo-keep-awake": "8.0.0",
        "expo-linear-gradient": "8.0.0",
        "lodash": "4.17.19",
        "moment": "2.24.0",
        "react": "16.9.0",
        "react-native": "0.61.5",
        "react-native-ble-manager": "git+https:/react-native-ble-manager.git#mergeUpstreamv750",
        "react-native-camera": "3.15.1",
        "react-native-date-picker": "2.7.12",
        "react-native-device-battery": "2.0.0",
        "react-native-device-info": "5.5.1",
        "react-native-elements": "^3.4.2",
        "react-native-exception-handler": "^2.10.10",
        "react-native-fs": "2.16.4",
        "react-native-gesture-handler": "1.5.3",
        "react-native-json-tree": "^1.3.0",
        "react-native-lock-task": "1.0.8",
        "react-native-masked-text": "1.13.0",
        "react-native-modal": "11.5.4",
        "react-native-reanimated": "1.4.0",
        "react-native-restart": "0.0.17",
        "react-native-safe-area-context": "0.6.2",
        "react-native-screens": "2.0.0-alpha.23",
        "react-native-svg": "12.0.3",
        "react-native-unimodules": "0.7.0",
        "react-native-vector-icons": "6.6.0",
        "react-native-version-number": "0.3.6",
        "react-navigation": "4.1.1",
        "react-navigation-animated-switch": "0.5.5",
        "react-navigation-header-buttons": "3.0.5",
        "react-navigation-hooks": "1.1.0",
        "react-navigation-stack": "2.0.13",
        "react-redux": "7.1.3",
        "redux": "4.0.5",
        "redux-saga": "1.1.3",
        "redux-storage": "4.1.2",
        "redux-storage-engine-reactnativeasyncstorage": "1.0.7",
        "reselect": "4.0.0",
        "sedcommon": "git+https://sedcommon.git#p2.3.6",
        "semver": "7.3.2",
        "socket.io-client": "4.1.3",
        "styled-components": "5.0.0",
        "ts-optchain": "0.1.8"
    },
    "devDependencies": {
        "@babel/core": "^7.7.7",
        "@babel/runtime": "^7.7.7",
        "@carimus/metro-symlinked-deps": "^1.1.0",
        "@react-native-community/eslint-config": "^0.0.6",
        "@types/jest": "~26.0.13",
        "@types/lodash": "^4.14.153",
        "@types/node": "^14.0.6",
        "@types/react": "^16.9.17",
        "@types/react-native": "^0.60.30",
        "@types/react-navigation": "^3.4.0",
        "@types/react-redux": "^7.1.7",
        "@types/react-test-renderer": "^16.9.1",
        "@types/socket.io": "^2.1.4",
        "@types/styled-components": "^4.4.2",
        "@typescript-eslint/eslint-plugin": "^2.26.0",
        "@typescript-eslint/parser": "^2.26.0",
        "apk-parser": "^0.1.7",
        "babel-jest": "^24.9.0",
        "babel-plugin-dynamic-import-node": "^2.3.0",
        "babel-plugin-module-resolver": "^4.0.0",
        "eslint": "^6.8.0",
        "eslint-config-prettier": "^6.10.1",
        "eslint-plugin-prettier": "^3.1.2",
        "eslint-plugin-react": "^7.19.0",
        "husky": "^4.2.3",
        "jest": "^26.4.2",
        "js-yaml": "^4.1.0",
        "jshint": "^2.11.0-rc1",
        "metro-react-native-babel-preset": "^0.56.4",
        "node-apk-parser": "^0.2.3",
        "prettier": "^2.0.5",
        "prettier-eslint": "^9.0.1",
        "react-native-typescript-transformer": "^1.2.13",
        "react-test-renderer": "16.9.0",
        "redux-devtools-extension": "^2.13.8",
        "redux-perf-middleware": "1.2.2",
        "simple-git": "^2.44.0",
        "ts-jest": "^26.3.0",
        "ts-node": "^10.2.0",
        "typescript": "^4.4.4"
    },

My current babel.conig.js

module.exports = (api) => {
    api.cache.using(() => process.env.NODE_ENV);

    const presets = ['module:metro-react-native-babel-preset'];
    const plugins = [
        ['dynamic-import-node'],
        [
            'module-resolver',
            {
                root: ['./src'],
                extensions: ['.js', '.ts', '.tsx', '.ios.js', '.android.js'],
                alias: {
                    // when changed here also change in tsconfig.json
                    actions: './src/actions',
                    components: './src/components',
                    constants: './src/constants',
                    images: './src/images',
                    lib: './src/lib',
                    reducers: './src/reducers',
                    sagas: './src/sagas',
                    screens: './src/screens',
                    utils: './src/utils',
                    types: './src/types',
                },
            },
        ],
    ];

    return {
        presets,
        plugins,
    };
};

ANSWER

Answered 2022-Feb-09 at 06:34

we decided to take the big plunge. upgrade the project from rn 61.5 to 67! it only took 2 days ;) wish we would have started there...

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

QUESTION

Undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[5], "expo-camera").Camera')

Asked 2022-Feb-06 at 17:49

I am trying to install the expo camera on my device, but I keep running into problems. I only did 3 things

expo install expo-camera.
copy the example code to my project.
add expo camera to package.json.

I followed this tutorial: https://docs.expo.dev/versions/latest/sdk/camera/

I think the problem might be: In managed apps, Camera requires Permissions.CAMERA. Video recording requires Permissions.AUDIO_RECORDING.

I have no clue what to do with that.

Good to know:

I also tried to install the react native camera https://react-native-camera.github.io/react-native-camera/docs/installation . with no succes ofcourse :(

Package.json:

{
  "name": "untitled",
  "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": "17.0.2",
    "react-native": "0.67.2"
  },
  "devDependencies": {
    "@babel/core": "^7.16.12",
    "@babel/runtime": "^7.16.7",
    "@react-native-community/eslint-config": "^3.0.1",
    "babel-jest": "^27.4.6",
    "eslint": "^7.32.0",
    "jest": "^27.4.7",
    "metro-react-native-babel-preset": "^0.67.0",
    "react-test-renderer": "17.0.2",
    "expo-camera": "~12.0.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

Camera.js

import React, {useState, useEffect} from 'react';
import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import {Camera} from 'expo-camera';

export default function App() {
  const [hasPermission, setHasPermission] = useState(null);
  const [type, setType] = useState(Camera.Constants.Type.back);

  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>;
  }
  return (
    <View style={styles.container}>
      <Camera style={styles.camera} type={type}>
        <View style={styles.buttonContainer}>
          <TouchableOpacity
            style={styles.button}
            onPress={() => {
              setType(
                type === Camera.Constants.Type.back
                  ? Camera.Constants.Type.front
                  : Camera.Constants.Type.back,
              );
            }}>
            <Text style={styles.text}> Flip </Text>
          </TouchableOpacity>
        </View>
      </Camera>
    </View>
  );
}

const styles = StyleSheet.create({});

Errors:

ANSWER

Answered 2022-Feb-06 at 17:49

Update

If you want to use any of the expo modules easily, you would need to install "Expo Modules".

If you are migrating from react-native-unimodules see this: https://expo.fyi/expo-modules-migration/

To Install Expo Modules in your project, run the following command:

npx install-expo-modules

If there is an error follow the manual installation: https://docs.expo.dev/bare/installing-expo-modules/#manual-installation

Old

I think the problem might be that you have the expo-camera dependency as a development dependency.

You could try moving the

{
  ...
  devDependencies:{
    "expo-camera": "~12.0.3"
  }
  ...
}

{
  ...
  dependencies:{
    "expo-camera": "~12.0.3"
  }
  ...
}

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

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 typescript screen test returning Test suite failed to run AsyncStorage is null

Asked 2021-Dec-06 at 15:23

I am experiencing difficulty writing tests for react-native typescript screen using instructions from the URL below https://react-native-async-storage.github.io/async-storage/docs/advanced/jest/

I keep getting the below error

FAIL app/screens/login/login-screen.test.tsx ● Test suite failed to run

[@RNC/AsyncStorage]: NativeModule: AsyncStorage is null.

To fix this issue try these steps:

  • Run `react-native link @react-native-community/async-storage` in the project root.

  • Rebuild and restart the app.

  • Run the packager with `--reset-cache` flag.

  • If you are using CocoaPods on iOS, run `pod install` in the `ios` directory and then rebuild and re-run the app.

  • If this happens while testing with Jest, check out docs how to integrate AsyncStorage with it: https://react-native-community.github.io/async-storage/docs/advanced/jest

If none of these fix the issue, please open an issue on the Github repository: https://github.com/react-native-community/react-native-async-storage/issues

  at Object.<anonymous> (node_modules/@react-native-community/async-storage/lib/commonjs/AsyncStorage.native.js:17:9)
  at Object.<anonymous> (node_modules/@react-native-community/async-storage/lib/commonjs/index.js:6:1)

See the login screen test file content below

import AsyncStorage from "@react-native-community/async-storage"
import { render } from "@testing-library/react-native"
import React from "react"
import { LoginScreen } from ".."

it("renders correctly", async () => {

  const { getAllByText } = await render(<LoginScreen navigation={undefined} route={undefined} />)
  expect(getAllByText("Login").length).toBe(1)

  expect(AsyncStorage.getItem).toBeCalledWith("myKey")

})

test\setup.ts

// we always make sure 'react-native' gets included first
import "react-native"

// libraries to mock
import "./mock-react-native-image"
import "./mock-async-storage"
import "./mock-i18n"
import "./mock-reactotron"

jest.useFakeTimers()
declare global {
  let __TEST__
}

and test\mock-async-storage.ts

import mockAsyncStorage from "@react-native-async-storage/async-storage/jest/async-storage-mock"

jest.mock("@react-native-async-storage/async-storage", () => mockAsyncStorage)

my package.json

{
  "name": "special-project",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "ios": "react-native run-ios",
    "android": "react-native run-android",
    "test:e2e": "detox test -c ios.sim.debug",
    "build:e2e": "detox build -c ios.sim.debug",
    "ci:test:e2e": "detox test -c ios.sim.release -l verbose --cleanup",
    "ci:build:e2e": "detox build -c ios.sim.release",
    "compile": "tsc --noEmit -p . --pretty",
    "format": "npm-run-all format:*",
    "format:js": "prettier --write \"app/**/*.js\"",
    "format:json": "prettier --write \"app/**/*.json\"",
    "format:md": "prettier --write \"**/*.md\"",
    "format:ts": "prettier --write \"app/**/*.ts{,x}\"",
    "lint": "eslint index.js app storybook test --fix --ext .js,.ts,.tsx && yarn format",
    "patch": "patch-package",
    "storybook": "start-storybook -p 9001 -c ./storybook",
    "test": "jest",
    "adb": "adb reverse tcp:9090 tcp:9090 && adb reverse tcp:3000 tcp:3000 && adb reverse tcp:9001 tcp:9001 && adb reverse tcp:8081 tcp:8081",
    "postinstall": "node ./bin/postInstall",
    "build-ios": "react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios",
    "build-android": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",
    "clean": "react-native-clean-project",
    "clean-all": "npx react-native clean-project-auto"
  },
  "dependencies": {
    "@react-native-community/async-storage": "^1.12.1",
    "@react-native-community/checkbox": "^0.5.9",
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/drawer": "^6.1.8",
    "@react-navigation/material-top-tabs": "^6.0.6",
    "@react-navigation/native": "~6.0.1",
    "@react-navigation/native-stack": "^6.0.2",
    "@react-navigation/stack": "~6.0.1",
    "@reduxjs/toolkit": "^1.6.2",
    "@unimodules/core": "6.0.0",
    "apisauce": "2.0.0",
    "axios": "^0.24.0",
    "expo-linear-gradient": "^9.2.0",
    "expo-localization": "9.1.0",
    "i18n-js": "3.8.0",
    "mobx": "6.1.8",
    "mobx-react-lite": "3.2.0",
    "mobx-state-tree": "5.0.1",
    "node-fetch": "^3.1.0",
    "react": "17.0.1",
    "react-native": "0.64.2",
    "react-native-appearance": "^0.3.4",
    "react-native-camera": "^4.2.1",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-image-crop-picker": "^0.36.4",
    "react-native-keychain": "6.2.0",
    "react-native-material-menu": "^2.0.0",
    "react-native-pager-view": "^5.4.8",
    "react-native-paper": "^4.10.1",
    "react-native-permissions": "^3.1.0",
    "react-native-qrcode-scanner": "^1.5.4",
    "react-native-radio-buttons-group": "^2.2.7",
    "react-native-reanimated": "^2.2.3",
    "react-native-safe-area-context": "3.1.8",
    "react-native-screens": "3.4.0",
    "react-native-tab-view": "^3.1.1",
    "react-native-unimodules": "0.12.0",
    "react-redux": "^7.2.6",
    "reactotron-mst": "3.1.3",
    "reactotron-react-js": "^3.3.7",
    "redux": "^4.1.2",
    "redux-logger": "^3.0.6",
    "redux-persist": "^6.0.0",
    "redux-saga": "^1.1.3",
    "validate.js": "0.13.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/plugin-proposal-decorators": "7.12.1",
    "@babel/plugin-proposal-optional-catch-binding": "7.12.1",
    "@babel/runtime": "^7.12.5",
    "@storybook/addon-storyshots": "6.1.10",
    "@storybook/react-native": "5.3.23",
    "@storybook/react-native-server": "5.3.23",
    "@testing-library/react-native": "^8.0.0",
    "@types/i18n-js": "3.0.3",
    "@types/jest": "26.0.19",
    "@types/react": "16.14.0",
    "@types/react-native": "0.63.40",
    "@types/react-test-renderer": "16.9.4",
    "@typescript-eslint/eslint-plugin": "4.10.0",
    "@typescript-eslint/parser": "4.10.0",
    "babel-jest": "26.6.3",
    "babel-loader": "8.2.2",
    "detox": "17.14.5",
    "eslint": "7.15.0",
    "eslint-config-prettier": "7.0.0",
    "eslint-config-standard": "16.0.2",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-node": "11.1.0",
    "eslint-plugin-promise": "4.2.1",
    "eslint-plugin-react": "7.21.5",
    "eslint-plugin-react-native": "3.10.0",
    "fbjs-scripts": "3.0.0",
    "jest": "^25.5.4",
    "jest-circus": "25.5.4",
    "jest-expo": "^40.0.1",
    "jetifier": "1.6.6",
    "npm-run-all": "4.1.5",
    "patch-package": "6.2.2",
    "postinstall-prepare": "1.0.1",
    "prettier": "2.2.1",
    "react-devtools-core": "4.10.1",
    "react-dom": "^17.0.2",
    "react-native-clean-project": "^3.6.3",
    "react-native-web": "^0.16.3",
    "react-powerplug": "1.0.0",
    "reactotron-react-native": "^5.0.0",
    "solidarity": "2.3.1",
    "typescript": "4.2.3"
  },
  "jest": {
    "preset": "jest-expo",
    "setupFiles": [
      "<rootDir>/test/setup.ts"
    ],
    "testPathIgnorePatterns": [
      "/node_modules/",
      "/e2e"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|expo-linear-gradient|@react-native|@react-native-async-storage|@react-navigation|@storybook|@react-native-community|expo-localization|@unimodules)"
    ]
  },
  "prettier": {
    "printWidth": 100,
    "semi": false,
    "singleQuote": false,
    "trailingComma": "all"
  },
  "detox": {
    "test-runner": "jest",
    "configurations": {
      "ios.sim.debug": {
        "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/special-project.app",
        "build": "xcodebuild -workspace ios/special-project.xcworkspace -scheme special-project -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build -destination 'name=iPhone 11'",
        "type": "ios.simulator",
        "device": {
          "name": "iPhone 11",
          "os": "iOS 13.2"
        }
      },
      "ios.sim.release": {
        "binaryPath": "ios/build/Build/Products/Release-iphonesimulator/special-project.app",
        "build": "xcodebuild -workspace ios/special-project.xcworkspace -scheme special-project -configuration Release -sdk iphonesimulator -derivedDataPath ios/build -destination 'name=iPhone 11'",
        "type": "ios.simulator",
        "device": {
          "name": "iPhone 11",
          "os": "iOS 13.2"
        }
      }
    }
  },
  "eslintConfig": {
    "root": true,
    "parser": "@typescript-eslint/parser",
    "extends": [
      "plugin:@typescript-eslint/recommended",
      "plugin:react/recommended",
      "plugin:react-native/all",
      "standard",
      "prettier",
      "prettier/@typescript-eslint"
    ],
    "plugins": [
      "@typescript-eslint",
      "react",
      "react-native"
    ],
    "parserOptions": {
      "ecmaFeatures": {
        "jsx": true
      },
      "project": "./tsconfig.json"
    },
    "settings": {
      "react": {
        "pragma": "React",
        "version": "detect"
      }
    },
    "globals": {
      "__DEV__": false,
      "jasmine": false,
      "beforeAll": false,
      "afterAll": false,
      "beforeEach": false,
      "afterEach": false,
      "test": false,
      "expect": false,
      "describe": false,
      "jest": false,
      "it": false
    },
    "rules": {
      "@typescript-eslint/ban-ts-ignore": 0,
      "@typescript-eslint/explicit-function-return-type": 0,
      "@typescript-eslint/explicit-member-accessibility": 0,
      "@typescript-eslint/explicit-module-boundary-types": 0,
      "@typescript-eslint/indent": 0,
      "@typescript-eslint/member-delimiter-style": 0,
      "@typescript-eslint/no-empty-interface": 0,
      "@typescript-eslint/no-explicit-any": 0,
      "@typescript-eslint/no-object-literal-type-assertion": 0,
      "@typescript-eslint/no-var-requires": 0,
      "comma-dangle": 0,
      "multiline-ternary": 0,
      "no-undef": 0,
      "no-unused-vars": 0,
      "no-use-before-define": "off",
      "quotes": 0,
      "react-native/no-raw-text": 0,
      "react/no-unescaped-entities": 0,
      "react/prop-types": "off",
      "space-before-function-paren": 0
    }
  }
}

The actual login screen file

import React, { FC, useState } from "react"
import {
  View,
  SafeAreaView,
  TouchableOpacity,
  ScrollView,
  TextInput,
  ImageBackground,
  KeyboardAvoidingView,
  Alert,
} from "react-native"
import { StackScreenProps } from "@react-navigation/stack"
import { observer } from "mobx-react-lite"
import { Button, Text, AutoImage as Image } from "../../components"
import { NavigatorParamList } from "../../navigators"
import { Images } from "../../config"
import { setIsLoggedIn } from "../../reducers/loginReducer"
import { useDispatch } from "react-redux"
import { setTokenValue } from "../../reducers/tokenReducer"
import { LOGIN_URL, showErrorAlert } from "../../utils/constants"
import axios from "axios"
import { setSalesAgentIdValue } from "../../reducers/salesAgentIdReducer"
import {
  BLUESIGNUP_TEXT,
  BOTTOM_HALF,
  CONTINUE,
  CONTINUE_TEXT,
  FOOTER_CONTENT,
  FULL,
  HOME_LOGO,
  KEYBOARD_AVOID_VIEW,
  LABEL,
  LOGO_TEXT,
  RED_ACTION_LINK,
  RED_TEXT,
  REGULAR_TEXT,
  SUBJECT,
  TEXT_INPUT,
  TEXT_INPUT_END,
} from "./loginscreen-styles"
import { setRefreshTokenValue } from "../../reducers/refreshTokenReducer"

export const LoginScreen: FC<StackScreenProps<NavigatorParamList, "login">> = observer(
  ({ navigation }) => {
    const dispatch = useDispatch()

    const [email, setEmail] = useState("")
    const [password, setPassword] = useState("")
    const [errortext] = useState("")

    let tokenValue: any
    let refreshTokenValue: any
    let salesAgenIdValue: any

    const api = axios.create({
      baseURL: LOGIN_URL,
    })

    const onLogin = async () => {
      if (!email) {
        showErrorAlert("Your Email")
        return
      }

      if (!password) {
        showErrorAlert("Your Password")
        return
      }
      console.log("<<< inside onlogin >>>>>")
      const dataToSend = {
        email: email,
        password: password,
      }
      try {
        console.log("<<<<<<< BEFORE RESPONSE FOR LOGIN >>>>>>>>>")

        const res = await api.post("/", dataToSend)
        console.log("Res >> ", res)
        console.log("<<<<<<<AFTER RESPONSE FOR LOGIN >>>>>>>>>")

        // eslint-disable-next-line no-prototype-builtins
        if (res.hasOwnProperty("data")) {
          tokenValue = res.data.data.userToken
          refreshTokenValue = res.data.data.refreshToken

          console.log("<<<<<<<TOKEN>>>>>>>>>")
          console.log(JSON.stringify(tokenValue))
          console.log("<<<<<<<TOKEN>>>>>>>>>")

          console.log("<<<<<<< REFRESH TOKEN>>>>>>>>>")
          console.log(JSON.stringify(refreshTokenValue))
          console.log("<<<<<<< REFRESH TOKEN>>>>>>>>>")

          dispatch(setTokenValue(tokenValue))
          dispatch(setRefreshTokenValue(refreshTokenValue))
          dispatch(setIsLoggedIn(true))

          salesAgenIdValue = res.data.data.userId
          console.log("<<<<<<<salesAgenIdValue>>>>>>>>>")
          console.log(JSON.stringify(salesAgenIdValue))
          console.log("<<<<<<<salesAgenIdValue>>>>>>>>>")
          dispatch(setSalesAgentIdValue(salesAgenIdValue))

          setTimeout(() => {
            navigation.navigate("drawer")
          }, 1000)
        } else {
          console.log("<<<<<<< ERRRRRROR >>>>>>>>>")
        }
      } catch (err) {
        console.log(err)
        Alert.alert("An Error occurred " + err)
      }
    }
    return (
      <ImageBackground source={Images.bg} style={FULL}>
        <Image source={Images.wragbyLogo} style={HOME_LOGO} />
        <View style={LOGO_TEXT}>
          <Text>Special App</Text>
        </View>

        <View style={BOTTOM_HALF}>
          <SafeAreaView>
            <View>
              <Text style={RED_TEXT}>{errortext}</Text>
            </View>
            <ScrollView showsVerticalScrollIndicator={false}>
              <KeyboardAvoidingView
                style={KEYBOARD_AVOID_VIEW}
              >
                <Text style={SUBJECT}>Login</Text>
                <Text style={LABEL}>Email</Text>

                <TextInput
                  style={TEXT_INPUT}
                  placeholderTextColor="#707070"
                  onChangeText={(email) => setEmail(email)}
                  placeholder=""
                  autoCapitalize="none"
                  value={email}
                />
                <Text style={LABEL}>Password</Text>

                <TextInput
                  style={TEXT_INPUT_END}
                  placeholderTextColor="#707070"
                  onChangeText={(password) => setPassword(password)}
                  secureTextEntry={true}
                  placeholder=""
                  autoCapitalize="none"
                  value={password}
                />

                <View style={RED_ACTION_LINK}>
                  <TouchableOpacity onPress={() => navigation.navigate("resetpassword")}>
                    <Text style={RED_TEXT}>Forgot password?</Text>
                  </TouchableOpacity>
                </View>

                <View style={FOOTER_CONTENT}>
                  <Button
                    testID="next-screen-button"
                    style={CONTINUE}
                    textStyle={CONTINUE_TEXT}
                    tx="welcomeScreen.signIn"
                    // onPress={showDashboard}
                    onPress={onLogin}
                  />
                  <TouchableOpacity onPress={() => navigation.navigate("signup")}>
                    <Text style={REGULAR_TEXT}>
                      Don't have an Account yet? <Text style={BLUESIGNUP_TEXT}>Sign up</Text>
                    </Text>
                  </TouchableOpacity>
                </View>
              </KeyboardAvoidingView>
            </ScrollView>
          </SafeAreaView>
        </View>
      </ImageBackground>
    )
  },
)

I have been battling with this issue for almost a week Please advise me with the right syntax to use in writing proper tests or at least tell me how to resolve the async storage problem

ANSWER

Answered 2021-Dec-06 at 15:23

Based on your package.json dependencies you dont have the @react-native-async-storage dependency, you have @react-native-community/async-storage, which is the old organisation namespace.

Try doing

npm uninstall @react-native-community/async-storage
npm install @react-native-async-storage/async-storage

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

QUESTION

React Native CameraRoll being undefined

Asked 2021-Oct-15 at 07:59

This is my function component using react native community camera roll. It's mostly copied from the examples in the readme from github: https://github.com/react-native-cameraroll/react-native-cameraroll

I do use the expo app on my android 11 phone to test and debug the rn app.

import * as React from 'react';
import {PermissionsAndroid, Platform, ScrollView, Image} from 'react-native';
import {Text, View} from "./Themed";
import CameraRoll, {PhotoIdentifier} from '@react-native-community/cameraroll';
import {useState} from 'react';

type CameraRollButtonProps = {}

export default function CameraRollButton({}: CameraRollButtonProps) {
    const [photos, setPhotos] = useState<PhotoIdentifier[]>([]);

    async function hasAndroidPermission() {
        const permission = PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE;

        const hasPermission = await PermissionsAndroid.check(permission);
        if (hasPermission) {
            return true;
        }

        const status = await PermissionsAndroid.request(permission);
        return status === 'granted';
    }

    const onPress = async () => {
        if (Platform.OS === "android" && !(await hasAndroidPermission())) {
            return;
        }

        CameraRoll.getPhotos({
            first: 20,
            assetType: 'Photos',
        })
            .then(r => {
                setPhotos(r.edges);
            })
            .catch((err) => {
                console.log("error catched: " + err);
            })
    };

    return (
        <View>
            <Text onPress={onPress}>
                Camera Roll
            </Text>
            <ScrollView>
                {photos.map((p, i) =>
                    <Image
                        key={i}
                        style={{
                            width: 300,
                            height: 100,
                        }}
                        source={{uri: p.node.image.uri}}
                    />
                )}
            </ScrollView>
        </View>
    );
}

When I pressed the button first, I got the permission prompt on which i clicked allow. Then I got this error:

[Unhandled promise rejection: TypeError: Cannot read properties of undefined (reading 'getPhotos')] at node_modules/@react-native-community/cameraroll/js/CameraRoll.js:205:32 in saveToCameraRoll at components/CameraRollButton.tsx:34:19 in onPress

I installed the module via sudo npm i @react-native-community/cameraroll --save. I also tried to execute this line from the readme later: react-native link @react-native-community/cameraroll && npx pod-install. It didn't seem to do anything and as I understood I don't need it as there is auto linking.

I also deleted node_modules and reinstalled everything. Still the same error. I also tried installing the module via expo install.

ANSWER

Answered 2021-Oct-15 at 07:59

I'm still not sure what the problem was, but I guess using expo might be a problem. I forgot that expo comes with a lot of modules so I ended up using https://docs.expo.dev/versions/v42.0.0/sdk/media-library/ without any problems.

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

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

Vulnerabilities

No vulnerabilities reported

Install react-native-camera

You can download it from GitHub.
You can use react-native-camera 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-camera 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 .