I'm done coding some core functionalities of an Android app, these had to be implemented in standard native Java code. Broadly speaking, it launches a Service and reads from a local DB with a SQLiteOpenHelper, but this last component will be replaced in the future for Bluetooth communication.

Now, I'd like to implement the UI using React Native; what's my best bet to combine native code with a UI made with React Native?

I have seen some options out there, but if there's any React Native expert familiarised with this, his/her tips and guidance would be of great help!

I am using ubuntu 18.04 for react-native app development, and I keep on getting the errors below.I used the following commandsexpo build: androidit first complains about watchman which I have already installed the error is below;

› Closing Expo server› Stopping Metro bundlersocket hang upError: socket hang up    at connResetException (internal/errors.js:613:14)    at Socket.socketOnEnd (_http_client.js:463:23)    at Socket.emit (events.js:327:22)    at endReadableNT (_stream_readable.js:1201:12)    at processTicksAndRejections (internal/process/task_queues.js:84:21)Building JavaScript bundle [====================================================================================                ] 84% ```how would I fix this?

I'm trying to debug my project and to deploy it as APK.I'm using only android. When I debug the project or install the signed release APK it crashes.Now I search the error with ./gradlew build --stacktrace

What I've tried:- jetify- dependencies: implementation(:react-native-screens)and many things more, but I can't tell it all.

It's blocking my work.

The exception for ./gradlew build --stacktrace is:

> Task :react-native-screens:androidJavadoc FAILED/Users/[username]/Documents/[projectfolder]/mobileapp/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderSubview.java:6: error: package com.facebook.react.bridge does not existimport com.facebook.react.bridge.ReactContext;

[...]

FAILURE: Build failed with an exception.* What went wrong:Execution failed for task ':react-native-screens:androidJavadoc'.> Javadoc generation failed. Generated Javadoc options file (useful for troubleshooting): '/Users/[username]/Documents/[projectfolder]/mobileapp/node_modules/react-native-screens/android/build/tmp/androidJavadoc/javadoc.options'* Try:Run with --info or --debug option to get more log output. Run with --scan to get full insights.* Exception is:org.gradle.api.tasks.TaskExecutionException: Execution failed for task ':react-native-screens:androidJavadoc'.        at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.lambda$executeIfValid$1(ExecuteActionsTaskExecuter.java:205)        at org.gradle.internal.Try$Failure.ifSuccessfulOrElse(Try.java:263)        at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.executeIfValid(ExecuteActionsTaskExecuter.java:203)        at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.execute(ExecuteActionsTaskExecuter.java:184)        at org.gradle.api.internal.tasks.execution.CleanupStaleOutputsExecuter.execute(CleanupStaleOutputsExecuter.java:114)        at org.gradle.api.internal.tasks.execution.FinalizePropertiesTaskExecuter.execute(FinalizePropertiesTaskExecuter.java:46)        at org.gradle.api.internal.tasks.execution.ResolveTaskExecutionModeExecuter.execute(ResolveTaskExecutionModeExecuter.java:62)        at org.gradle.api.internal.tasks.execution.SkipTaskWithNoActionsExecuter.execute(SkipTaskWithNoActionsExecuter.java:57)        at org.gradle.api.internal.tasks.execution.SkipOnlyIfTaskExecuter.execute(SkipOnlyIfTaskExecuter.java:56)        at org.gradle.api.internal.tasks.execution.CatchExceptionTaskExecuter.execute(CatchExceptionTaskExecuter.java:36)        at org.gradle.api.internal.tasks.execution.EventFiringTaskExecuter$1.executeTask(EventFiringTaskExecuter.java:77)        at org.gradle.api.internal.tasks.execution.EventFiringTaskExecuter$1.call(EventFiringTaskExecuter.java:55)        at org.gradle.api.internal.tasks.execution.EventFiringTaskExecuter$1.call(EventFiringTaskExecuter.java:52)        at org.gradle.internal.operations.DefaultBuildOperationExecutor$CallableBuildOperationWorker.execute(DefaultBuildOperationExecutor.java:416)        at org.gradle.internal.operations.DefaultBuildOperationExecutor$CallableBuildOperationWorker.execute(DefaultBuildOperationExecutor.java:406)        at org.gradle.internal.operations.DefaultBuildOperationExecutor$1.execute(DefaultBuildOperationExecutor.java:165)        at org.gradle.internal.operations.DefaultBuildOperationExecutor.execute(DefaultBuildOperationExecutor.java:250)        at org.gradle.internal.operations.DefaultBuildOperationExecutor.execute(DefaultBuildOperationExecutor.java:158)        at org.gradle.internal.operations.DefaultBuildOperationExecutor.call(DefaultBuildOperationExecutor.java:102)        at org.gradle.internal.operations.DelegatingBuildOperationExecutor.call(DelegatingBuildOperationExecutor.java:36)        at org.gradle.api.internal.tasks.execution.EventFiringTaskExecuter.execute(EventFiringTaskExecuter.java:52)        at org.gradle.execution.plan.LocalTaskNodeExecutor.execute(LocalTaskNodeExecutor.java:41)        at org.gradle.execution.taskgraph.DefaultTaskExecutionGraph$InvokeNodeExecutorsAction.execute(DefaultTaskExecutionGraph.java:372)        at org.gradle.execution.taskgraph.DefaultTaskExecutionGraph$InvokeNodeExecutorsAction.execute(DefaultTaskExecutionGraph.java:359)        at org.gradle.execution.taskgraph.DefaultTaskExecutionGraph$BuildOperationAwareExecutionAction.execute(DefaultTaskExecutionGraph.java:352)        at org.gradle.execution.taskgraph.DefaultTaskExecutionGraph$BuildOperationAwareExecutionAction.execute(DefaultTaskExecutionGraph.java:338)        at org.gradle.execution.plan.DefaultPlanExecutor$ExecutorWorker.lambda$run$0(DefaultPlanExecutor.java:127)        at org.gradle.execution.plan.DefaultPlanExecutor$ExecutorWorker.execute(DefaultPlanExecutor.java:191)        at org.gradle.execution.plan.DefaultPlanExecutor$ExecutorWorker.executeNextNode(DefaultPlanExecutor.java:182)        at org.gradle.execution.plan.DefaultPlanExecutor$ExecutorWorker.run(DefaultPlanExecutor.java:124)        at org.gradle.internal.concurrent.ExecutorPolicy$CatchAndRecordFailures.onExecute(ExecutorPolicy.java:64)        at org.gradle.internal.concurrent.ManagedExecutorImpl$1.run(ManagedExecutorImpl.java:48)        at org.gradle.internal.concurrent.ThreadFactoryImpl$ManagedThreadRunnable.run(ThreadFactoryImpl.java:56)Caused by: org.gradle.api.GradleException: Javadoc generation failed. Generated Javadoc options file (useful for troubleshooting): '/Users/[username]/Documents/[projectfolder]/mobileapp/node_modules/react-native-screens/android/build/tmp/androidJavadoc/javadoc.options'        at org.gradle.api.tasks.javadoc.internal.JavadocGenerator.execute(JavadocGenerator.java:58)        at org.gradle.api.tasks.javadoc.internal.JavadocGenerator.execute(JavadocGenerator.java:31)        at org.gradle.api.tasks.javadoc.Javadoc.executeExternalJavadoc(Javadoc.java:164)        at org.gradle.api.tasks.javadoc.Javadoc.generate(Javadoc.java:152)        at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)        at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)        at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)        at org.gradle.internal.reflect.JavaMethod.invoke(JavaMethod.java:104)        at org.gradle.api.internal.project.taskfactory.StandardTaskAction.doExecute(StandardTaskAction.java:49)        at org.gradle.api.internal.project.taskfactory.StandardTaskAction.execute(StandardTaskAction.java:42)        at org.gradle.api.internal.project.taskfactory.StandardTaskAction.execute(StandardTaskAction.java:28)        at org.gradle.api.internal.AbstractTask$TaskActionWrapper.execute(AbstractTask.java:727)        at org.gradle.api.internal.AbstractTask$TaskActionWrapper.execute(AbstractTask.java:694)        at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter$3.run(ExecuteActionsTaskExecuter.java:568)        at org.gradle.internal.operations.DefaultBuildOperationExecutor$RunnableBuildOperationWorker.execute(DefaultBuildOperationExecutor.java:402)        at org.gradle.internal.operations.DefaultBuildOperationExecutor$RunnableBuildOperationWorker.execute(DefaultBuildOperationExecutor.java:394)        at org.gradle.internal.operations.DefaultBuildOperationExecutor$1.execute(DefaultBuildOperationExecutor.java:165)        at org.gradle.internal.operations.DefaultBuildOperationExecutor.execute(DefaultBuildOperationExecutor.java:250)        at org.gradle.internal.operations.DefaultBuildOperationExecutor.execute(DefaultBuildOperationExecutor.java:158)        at org.gradle.internal.operations.DefaultBuildOperationExecutor.run(DefaultBuildOperationExecutor.java:92)        at org.gradle.internal.operations.DelegatingBuildOperationExecutor.run(DelegatingBuildOperationExecutor.java:31)        at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.executeAction(ExecuteActionsTaskExecuter.java:553)        at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.executeActions(ExecuteActionsTaskExecuter.java:536)        at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.access$300(ExecuteActionsTaskExecuter.java:109)        at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter$TaskExecution.executeWithPreviousOutputFiles(ExecuteActionsTaskExecuter.java:276)        at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter$TaskExecution.execute(ExecuteActionsTaskExecuter.java:265)        at org.gradle.internal.execution.steps.ExecuteStep.lambda$execute$1(ExecuteStep.java:33)        at org.gradle.internal.execution.steps.ExecuteStep.execute(ExecuteStep.java:33)        at org.gradle.internal.execution.steps.ExecuteStep.execute(ExecuteStep.java:26)        at org.gradle.internal.execution.steps.CleanupOutputsStep.execute(CleanupOutputsStep.java:67)        at org.gradle.internal.execution.steps.CleanupOutputsStep.execute(CleanupOutputsStep.java:36)        at org.gradle.internal.execution.steps.ResolveInputChangesStep.execute(ResolveInputChangesStep.java:49)        at org.gradle.internal.execution.steps.ResolveInputChangesStep.execute(ResolveInputChangesStep.java:34)        at org.gradle.internal.execution.steps.CancelExecutionStep.execute(CancelExecutionStep.java:43)        at org.gradle.internal.execution.steps.TimeoutStep.executeWithoutTimeout(TimeoutStep.java:73)        at org.gradle.internal.execution.steps.TimeoutStep.execute(TimeoutStep.java:54)        at org.gradle.internal.execution.steps.CatchExceptionStep.execute(CatchExceptionStep.java:34)        at org.gradle.internal.execution.steps.CreateOutputsStep.execute(CreateOutputsStep.java:44)        at org.gradle.internal.execution.steps.SnapshotOutputsStep.execute(SnapshotOutputsStep.java:54)        at org.gradle.internal.execution.steps.SnapshotOutputsStep.execute(SnapshotOutputsStep.java:38)        at org.gradle.internal.execution.steps.BroadcastChangingOutputsStep.execute(BroadcastChangingOutputsStep.java:49)        at org.gradle.internal.execution.steps.CacheStep.executeWithoutCache(CacheStep.java:159)        at org.gradle.internal.execution.steps.CacheStep.execute(CacheStep.java:72)        at org.gradle.internal.execution.steps.CacheStep.execute(CacheStep.java:43)        at org.gradle.internal.execution.steps.StoreExecutionStateStep.execute(StoreExecutionStateStep.java:44)        at org.gradle.internal.execution.steps.StoreExecutionStateStep.execute(StoreExecutionStateStep.java:33)        at org.gradle.internal.execution.steps.RecordOutputsStep.execute(RecordOutputsStep.java:38)        at org.gradle.internal.execution.steps.RecordOutputsStep.execute(RecordOutputsStep.java:24)        at org.gradle.internal.execution.steps.SkipUpToDateStep.executeBecause(SkipUpToDateStep.java:92)        at org.gradle.internal.execution.steps.SkipUpToDateStep.lambda$execute$0(SkipUpToDateStep.java:85)        at org.gradle.internal.execution.steps.SkipUpToDateStep.execute(SkipUpToDateStep.java:55)        at org.gradle.internal.execution.steps.SkipUpToDateStep.execute(SkipUpToDateStep.java:39)        at org.gradle.internal.execution.steps.ResolveChangesStep.execute(ResolveChangesStep.java:76)        at org.gradle.internal.execution.steps.ResolveChangesStep.execute(ResolveChangesStep.java:37)        at org.gradle.internal.execution.steps.legacy.MarkSnapshottingInputsFinishedStep.execute(MarkSnapshottingInputsFinishedStep.java:36)        at org.gradle.internal.execution.steps.legacy.MarkSnapshottingInputsFinishedStep.execute(MarkSnapshottingInputsFinishedStep.java:26)        at org.gradle.internal.execution.steps.ResolveCachingStateStep.execute(ResolveCachingStateStep.java:94)        at org.gradle.internal.execution.steps.ResolveCachingStateStep.execute(ResolveCachingStateStep.java:49)        at org.gradle.internal.execution.steps.CaptureStateBeforeExecutionStep.execute(CaptureStateBeforeExecutionStep.java:79)        at org.gradle.internal.execution.steps.CaptureStateBeforeExecutionStep.execute(CaptureStateBeforeExecutionStep.java:53)        at org.gradle.internal.execution.steps.ValidateStep.execute(ValidateStep.java:74)        at org.gradle.internal.execution.steps.SkipEmptyWorkStep.lambda$execute$2(SkipEmptyWorkStep.java:78)        at org.gradle.internal.execution.steps.SkipEmptyWorkStep.execute(SkipEmptyWorkStep.java:78)        at org.gradle.internal.execution.steps.SkipEmptyWorkStep.execute(SkipEmptyWorkStep.java:34)        at org.gradle.internal.execution.steps.legacy.MarkSnapshottingInputsStartedStep.execute(MarkSnapshottingInputsStartedStep.java:39)        at org.gradle.internal.execution.steps.LoadExecutionStateStep.execute(LoadExecutionStateStep.java:40)        at org.gradle.internal.execution.steps.LoadExecutionStateStep.execute(LoadExecutionStateStep.java:28)        at org.gradle.internal.execution.impl.DefaultWorkExecutor.execute(DefaultWorkExecutor.java:33)        at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.executeIfValid(ExecuteActionsTaskExecuter.java:192)        ... 30 moreCaused by: org.gradle.process.internal.ExecException: Process 'command '/Library/Java/JavaVirtualMachines/jdk-14.jdk/Contents/Home/bin/javadoc'' finished with non-zero exit value 1        at org.gradle.process.internal.DefaultExecHandle$ExecResultImpl.assertNormalExitValue(DefaultExecHandle.java:417)        at org.gradle.process.internal.DefaultExecAction.execute(DefaultExecAction.java:38)        at org.gradle.api.tasks.javadoc.internal.JavadocGenerator.execute(JavadocGenerator.java:53)        ... 98 more

package.json

{"name": "HumanHelps","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": {"@eva-design/eva": "^1.4.0","@react-native-community/masked-view": "^0.1.8","@react-native-firebase/app": "6.4.0","@react-native-firebase/auth": "6.4.0","@react-native-firebase/firestore": "6.4.0","@react-navigation/native": "^5.1.5","@react-navigation/stack": "^5.2.10","@ui-kitten/components": "^4.4.1","@ui-kitten/eva-icons": "^5.0.0-alpha.1","jetifier": "^1.6.5","react": "16.11.0","react-native": "0.62.0","react-native-gesture-handler": "^1.6.1","react-native-keyboard-aware-scroll-view": "^0.9.1","react-native-safe-area-context": "^0.7.3","react-native-screens": "^2.5.0","react-native-simple-toast": "^1.1.0","react-native-svg": "^12.1.0"  },"devDependencies": {"@babel/core": "^7.9.0","@babel/runtime": "^7.9.2","@react-native-community/eslint-config": "^1.0.0","babel-jest": "^25.2.4","eslint": "^6.8.0","jest": "^25.2.4","metro-react-native-babel-preset": "^0.59.0","react-test-renderer": "16.11.0"  },"jest": {"preset": "react-native"  }}

android/build.gradle

// Top-level build file where you can add configuration options common to all sub-projects/modules.buildscript {    ext {        buildToolsVersion = "28.0.3"        minSdkVersion = 21        compileSdkVersion = 28        targetSdkVersion = 28    }    repositories {        google()        jcenter()    }    dependencies {        classpath("com.android.tools.build:gradle:3.5.2")        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 {        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' }    }}

android/app/build.gradle

apply plugin: "com.android.application"import com.android.build.OutputFileproject.ext.react = [    enableHermes: false,  // clean and rebuild if changing]apply from: "../../node_modules/react-native/react.gradle"def enableHermes = project.ext.react.get("enableHermes", false);android {    compileSdkVersion rootProject.ext.compileSdkVersion    compileOptions {        sourceCompatibility JavaVersion.VERSION_1_8        targetCompatibility JavaVersion.VERSION_1_8    }    defaultConfig {        applicationId "de.neufeldstudios.humanhelps"        minSdkVersion rootProject.ext.minSdkVersion        targetSdkVersion rootProject.ext.targetSdkVersion        versionCode 1        versionName "1.0"        multiDexEnabled true    }    splits {        abi {            reset()            enable enableSeparateBuildPerCPUArchitecture            universalApk false  // If true, also generate a universal APK            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"        }    }    signingConfigs {        debug {            storeFile file('debug.keystore')            storePassword 'android'            keyAlias 'androiddebugkey'            keyPassword 'android'        }        release {            if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {                storeFile file(MYAPP_UPLOAD_STORE_FILE)                storePassword MYAPP_UPLOAD_STORE_PASSWORD                keyAlias MYAPP_UPLOAD_KEY_ALIAS                keyPassword MYAPP_UPLOAD_KEY_PASSWORD            }        }    }    buildTypes {        debug {            signingConfig signingConfigs.debug        }        release {            // Caution! In production, you need to generate your own keystore file.            // see https://facebook.github.io/react-native/docs/signed-apk-android.            //signingConfig signingConfigs.debug            minifyEnabled enableProguardInReleaseBuilds            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"            signingConfig signingConfigs.release        }    }    packagingOptions {        pickFirst "lib/armeabi-v7a/libc++_shared.so"        pickFirst "lib/arm64-v8a/libc++_shared.so"        pickFirst "lib/x86/libc++_shared.so"        pickFirst "lib/x86_64/libc++_shared.so"    }    // applicationVariants are e.g. debug, release    applicationVariants.all { variant ->        variant.outputs.each { output ->            // For each separate APK per architecture, set a unique version code as described here:            // https://developer.android.com/studio/build/configure-apk-splits.html            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            }        }    }}dependencies {    implementation project(':react-native-screens')    implementation fileTree(dir: "libs", include: ["*.jar"])    //noinspection GradleDynamicVersion    implementation "com.facebook.react:react-native:+"  // From node_modules    implementation 'androidx.multidex:multidex:2.0.1'    implementation 'androidx.appcompat:appcompat:1.1.0-rc01'    implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02"    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {      exclude group:'com.facebook.fbjni'    }    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {        exclude group:'com.facebook.flipper'    }    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {        exclude group:'com.facebook.flipper'    }    if (enableHermes) {        def hermesPath = "../../node_modules/hermes-engine/android/";        debugImplementation files(hermesPath +"hermes-debug.aar")        releaseImplementation files(hermesPath +"hermes-release.aar")    } else {        implementation jscFlavor    }}// Run this once to be able to run the application with BUCK// puts all compile dependencies into folder libs for BUCK to usetask copyDownloadableDepsToLibs(type: Copy) {    from configurations.compile    into 'libs'}apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)apply plugin: 'com.google.gms.google-services'

node-modules/react-native-screens/android/build.gradle

buildscript {    repositories {        google()        jcenter()    }    dependencies {       classpath 'com.android.tools.build:gradle:3.3.1'    }}apply plugin: 'com.android.library'apply plugin: 'maven'def safeExtGet(prop, fallback) {    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback}android {    compileSdkVersion safeExtGet('compileSdkVersion', 28)    buildToolsVersion safeExtGet('buildToolsVersion', '28.0.3')    defaultConfig {        minSdkVersion safeExtGet('minSdkVersion', 21)        targetSdkVersion safeExtGet('targetSdkVersion', 28)        versionCode 1        versionName "1.0"    }    lintOptions {        abortOnError false    }}repositories {    maven {        // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm        // Matches the RN Hello World template        // https://github.com/facebook/react-native/blob/1e8f3b11027fe0a7514b4fc97d0798d3c64bc895/local-cli/templates/HelloWorld/android/build.gradle#L21        url "$projectDir/../node_modules/react-native/android"    }    mavenCentral()    mavenLocal()    google()    jcenter()}dependencies {    implementation 'com.facebook.react:react-native:+'    implementation 'androidx.appcompat:appcompat:1.1.0'    implementation 'androidx.fragment:fragment:1.2.1'    implementation 'androidx.coordinatorlayout:coordinatorlayout:1.1.0'    implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.0.0'    implementation 'com.google.android.material:material:1.1.0'}def configureReactNativePom(def pom) {    def packageJson = new groovy.json.JsonSlurper().parseText(file('../package.json').text)    pom.project {        name packageJson.title        artifactId packageJson.name        version = packageJson.version        group = "com.swmansion.rnscreens"        description packageJson.description        url packageJson.repository.baseUrl        licenses {            license {                name packageJson.license                url packageJson.repository.baseUrl +'/blob/master/'+ packageJson.licenseFilename                distribution 'repo'            }        }        developers {            developer {                id packageJson.author.username                name packageJson.author.name            }        }    }}afterEvaluate { project ->    task androidJavadoc(type: Javadoc) {        source = android.sourceSets.main.java.srcDirs        classpath += files(android.bootClasspath)        classpath += files(project.getConfigurations().getByName('compile').asList())        include '**/*.java'    }    task androidJavadocJar(type: Jar, dependsOn: androidJavadoc) {        classifier = 'javadoc'        from androidJavadoc.destinationDir    }    task androidSourcesJar(type: Jar) {        classifier = 'sources'        from android.sourceSets.main.java.srcDirs        include '**/*.java'    }    android.libraryVariants.all { variant ->        def name = variant.name.capitalize()        task "jar${name}"(type: Jar, dependsOn: variant.javaCompileProvider.get()) {            from variant.javaCompileProvider.get().destinationDir        }    }    artifacts {        archives androidSourcesJar        archives androidJavadocJar    }    task installArchives(type: Upload) {        configuration = configurations.archives        repositories.mavenDeployer {            // Deploy to react-native-event-bridge/maven, ready to publish to npm            repository url: "file://${projectDir}/../android/maven"            configureReactNativePom pom        }    }}

In follow you see, that is all in androidx.

node-modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/Lifecyclepackage com.swmansion.rnscreens;

import android.view.View;import android.view.ViewParent;import androidx.fragment.app.Fragment;import androidx.lifecycle.Lifecycle;import androidx.lifecycle.LifecycleObserver;import java.util.HashMap;import java.util.Map;import javax.annotation.Nullable;

I tried to do a to-do app using react-native but this error came I tried a lot of ways but I don't know how to fix it please help me to solve it. I used firebase as a database.

I tried to do a to-do app using react-native but this error came I tried lot of ways but I don't know how to fix it please help me to solve it. I used firebase as a database.

import { StyleSheet, Text, View, Alert, Button, ScrollView, TextInput } from 'react-native';import * as firebase from 'firebase';import "firebase/database";import CheckBox from 'react-native-check-box';const firebaseConfig = {  apiKey: "AIzaSyCsGDNm-4J6P18hIGdlMFIIIIaVHzg9gig",  authDomain: "psss-1b4b6.firebaseapp.com",  databaseURL: "https://psss-1b4b6.firebaseio.com",  projectId: "psss-1b4b6",  storageBucket: "psss-1b4b6.appspot.com",  messagingSenderId: "614005604871",  appId: "1:614005604871:web:3926c52f08ffc37dcc20a2"};// Initialize Firebasefirebase.initializeApp(firebaseConfig);export const db = app.database();const ToDoItem = ({todoItem: {todoItem: name, done}, id}) => {  const [doneState, setDone] = useState(done);  const onCheck = () => {    setDone(!doneState);    db.ref('/todos').update({      [id]: {        todoItem: name,        done: !doneState,      },    });  };  return (<View style={styles.todoItem}><CheckBox        checkBoxColor="skyblue"        onClick={onCheck}        isChecked={doneState}        disabled={doneState}      /><Text style={[styles.todoText, {opacity: doneState ? 0.2 : 1}]}>        {name}</Text></View>  );};const [doneState, setDone] = useState(false);const onCheck = () => {  setDone(!doneState);};class App extends React.Component {  constructor() {    super();    this.state = {      todos: {},      presentToDo: '',    };  }  componentDidMount() {    db.ref('/todos').on('value', querySnapShot => {      let data = querySnapShot.val() ? querySnapShot.val() : {};      let todoItems = {...data};      this.setState({        todos: todoItems,      });    });  }  addNewTodo() {    db.ref('/todos').push({      done: false,      todoItem: this.state.presentToDo,    });    Alert.alert('Action!', 'A new To-do item was created');    this.setState({      presentToDo: '',    });  }  clearTodos() {    db.ref('/todos').remove();  }  render() {    let todosKeys = Object.keys(this.state.todos);    return (<ScrollView        style={styles.container}        contentContainerStyle={styles.contentContainerStyle}><View>          {/*Empty view: will contain to-do items soon*/}</View><TextInput          placeholder="Add new Todo"          value={this.state.presentToDo}          style={styles.textInput}          onChangeText={e => {            this.setState({              presentToDo: e,            });          }}          onSubmitEditing = {this.addNewTodo}        /><Button          title="Add new To do item"          onPress={this.addNewTodo}          color="lightgreen"        /><View style={{marginTop: 20}}><Button title="Clear todos" onPress={this.clearTodos} color="red" /></View><View>          {todosKeys.length > 0 ? (            todosKeys.map(key => (<ToDoItem                  key={key}                  id={key}                  todoItem={this.state.todos[key]}            />          ))      ) : (<Text>No todo item</Text>          )}</View></ScrollView>    );  }}export default App;const styles = StyleSheet.create({  container: {    flex: 1,    backgroundColor: 'white',  },  contentContainerStyle: {    alignItems: 'center',  },  textInput: {    borderWidth: 1,    borderColor: '#afafaf',    width: '80%',    borderRadius: 5,    paddingHorizontal: 10,    marginVertical: 20,    fontSize: 20,  },  todoItem: {    flexDirection: 'row',    marginVertical: 10,    alignItems: 'center',  },  todoText: {    borderColor: '#afafaf',    paddingHorizontal: 5,    paddingVertical: 7,    borderWidth: 1,    borderRadius: 5,    marginRight: 10,    minWidth: '50%',    textAlign: 'center',  },});

This screen works fine when testing using Expo, but crashes the app when it is bundled to apk

I'm not sure whats causing the crash here, but it works on Expo.This has been tested on both emulators and real android devices, which have the same behavior.

This is the error log from the device when visiting the screen:

04-22 10:14:11.713  7008  7008 E unknown:ReactNative: Tried to remove non-existent frame callback04-22 10:14:11.778  1731  7439 E ResolverController: No valid NAT64 prefix (101, <unspecified>/0)04-22 10:14:11.786  7008  7065 E GraphResponse: {HttpStatus: 400, errorCode: 100, subErrorCode: 33, errorType: GraphMethodException, errorMessage: Unsupported get request. Please read the Graph API documentation at https://developers.facebook.com/docs/graph-api}04-22 10:14:11.963  7008  7008 E c       : java.lang.RuntimeException: A TaskDescription's primary color should be opaque04-22 10:14:11.963  7008  7008 E CrashlyticsCore: Crashlytics must be initialized by calling Fabric.with(Context) prior to logging exceptions.04-22 10:14:12.023  1731  7449 E ResolverController: No valid NAT64 prefix (101, <unspecified>/0

And this is the respective screen:

import React, { Component } from 'react'import { View } from 'react-native'import MapView from 'react-native-maps'import { Appbar } from 'react-native-paper'import Database from './components/Database'const db = new Database()import styles from './components/allStyles'export default class MapScreen extends Component {  state = {    emergencies: [],  };  componentDidMount() {    db.mapOn(emergencies => {        this.setState(previousState => ({            emergencies: previousState.emergencies.concat(emergencies),        }))    })  }  render() {    k = 0    return (<View style={styles.absoluteFillView}><MapView          style={styles.absoluteFillView}          mapType={"satellite"}          showsUserLocation={true}          region={{            latitude: 39.625083,            longitude:  -79.956796,            latitudeDelta: 0.0025,            longitudeDelta: 0.0025,          }}>          {this.state.emergencies.map(emergency => {            if(k + 1 == this.state.emergencies.length){              color = 'red';            }            else {              color = 'orange';            }            return (<MapView.Marker                 key = {k++}                title={emergency.title}                description={emergency.description}                coordinate={{                  latitude: emergency.latitude,                  longitude: emergency.longitude,                }}                pinColor={color}              />            );          })}</MapView><Appbar.Header          dark = {true}          style={{backgroundColor:'#bdbdbd'}}><Appbar.Action           icon = 'arrow-left'          size = {24}            onPress={() =>{              this.props.navigation.navigate('Home')            }}        /></Appbar.Header></View>    );  }  componentWillUnmount(){    db.mapOff()  }}

Here are the event listener functions used in the componentDidMount() and componentWillUnmount():

mapOn = callback => {    firebase.database().ref('alerts/emergency/').on('child_added', snapshot => {        callback(this.edit(snapshot))    })}mapOff = () => {    firebase.database().ref('alerts/emergency/').off()}edit = snapshot => {    const { name, description } = snapshot.val()    const { longitude, latitude } = snapshot.val().location    const emergency = { title: name, description, longitude, latitude}    return emergency}Any help into what may be causing the issue would be very helpful.

So, I have been trying to find the solution and solve this for the whole day since the afternoon and it's already 10:52 PM here.

Here is the code and it is from the official docs except that I changed the part of logging into the console:

useEffect(() => {getMoviesFromApi();}, []);function getMoviesFromApi() {return fetch('https://reactnative.dev/movies.json')  .then(response => response.json())  .then(json => {    console.log(json.movies);  })  .catch(error => {    console.error(error);  });}

The code was partiallyworking in the afternoon, although it may get errors in 4 or 5 refreshes. I have found solutions for requesting data from localhost. Do I need to change the IP address needed to connect to that API and if so, how do I do that? Since, I am pretty new to these, although I try to research many solutions from google, none of them suits me.

I want to create a voice, video call app in react-native, but actually I dont know where to start from?I found react-native-webrtc package to buggy and also the maintainer is to busy and cant help us, therefor I decided to develop my own, but now I need to know where to start from and how can I bring webrtc support to my react-native app, to support both android and ios.

Please help me in way of creating my own and not using react-native-webrtc, because I already was using it, but is not responding as well and have a lot of bugs. and also it is hard to me to edit and existed code..

I'm working on a React Native app using Expo.Trying to load a WebView using "react-native-webview".

this is the WebView element:

<WebView style={styles.container}            source={{ uri: "https://www.google.com/" }}            ref={ref => (this.webview = ref)}            cacheEnabled={false}    />

I'm running the app on devices, on iOS it works well, but on Android it doesn't load the site and I'm getting an Error.

Encountered an error loading page, Object {"canGoBack": false,"canGoForward": false,"code": -1,"description": "net::ERR_CACHE_MISS","loading": false,"target": 25,"title": "","url": "https://www.google.com/",}

Expo version - 3.19.2

Android version - 5.0

Couldn't find a working solution, does anyone know what is missing?

I am new to React Native and I'm sorry for my english if i make mistakes!

I'm trying to create a smartphone app with reactnative and nativebase.

I have one page for the settings with a switch and I have a function called Base in one other js file, with the layout for multiple cooking recipes, but my problem is:

I would like that by activating the switch, my measurements in ml become in ozbut I can't even import the state of the switch ...

how can I import the status of the switch?

Thank you!

Settings.js

class Settings extends Component {constructor(props) {    super(props);state = {     switchValue: false}toggleSwitch = (value) => {    this.setState({ switchValue: value })}render() {    return (<Container style={styles.container}><Header><Left><Button                        transparent                        onPress={() => this.props.navigation.openDrawer()}><Icon name="menu" /></Button></Left><Body><Title>Settings</Title></Body><Right /></Header><Content><List><ListItem><Left><Text>Impostare le misurazioni come ml</Text></Left><Right><Switch                        style={{ marginTop: 30 }}                        onValueChange={this.toggleSwitch}                        value={this.state.switchValue}/></Right></ListItem></List></Content></Container>    );}}export default Settings;

Base.js

 export function Base(props) {  return (<Container style={styles.container}><Header style={{backgroundColor:props.headercolor}}><Left><Button transparent><Icon name="arrow-back" /></Button></Left><Body style={{ flex: 1.2 }}><Title>{props.title}</Title></Body><Right><Text>e</Text></Right></Header><Grid><Row size={25}><Image        style={{ flex: 1, height: null, resizeMode: 'contain', width: null}}        source={path_pageimage[props.title]}      /></Row><Row size={75}><Col size={35}><Row size={5}><Body><Title style={styles.title}>Preparations</Title></Body></Row><Row size={15} style={{ borderBottomColor: "gainsboro", borderBottomWidth: 1 }}><Col size={35}><View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}><Text>Glass:</Text></View></Col><Col size={65}><View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}><View style={{ height: "80%" }}><Image                  style={{ flex: 1, height: null, resizeMode: 'contain', width: null }}                  source={path_glass[props.glass]}                /></View><View style={{ alignItems: "center" }}><Text style={{ fontSize: 12 }}>{props.glass}</Text></View></View></Col></Row><Row size={7}><Body><Text style={{ fontWeight: "bold" }}>{props.preparation}</Text></Body></Row><Row size={73}><Image            style={{ marginTop: 0, flex: 1, height: null, resizeMode: 'contain', width: null }}            source={path_preparation[props.preparation]}          /></Row></Col><Col size={65} style={{ borderLeftColor: "gainsboro", borderLeftWidth: 1 }}><Row size={5}><Body><Title style={styles.title}>Ingredients</Title></Body></Row><Row size={55} style={{ marginBottom: 5, borderBottomColor: "gainsboro", borderBottomWidth: 1 }}><FlatList            style={{ marginLeft: 10 }}            horizontal={false}            numColumns={2}            data={props.utlizatedingr}            keyExtractor={(item, index) => index.toString()}            renderItem={({ item }) => (<TouchableOpacity                onPress={() => this.props.navigation.navigate(item.l)}><View><Liquor l={item.l} q={item.q}/></View></TouchableOpacity>            )}          /></Row><Row size={5}><Body><Title style={styles.title}>Curiosity</Title></Body></Row><Row size={35} style={{ marginLeft: 20 }}><ScrollView> <Text>{props.curiosity}</Text></ScrollView></Row></Col></Row></Grid></Container>  );}function Liquor(props) { //.l = liquor, .q = quantity   return (<View style={{ flex: 1, flexDirection: 'row' }}><View style={{ width: "25%", margin: 5 }}><Image source={path_ingredients[props.l]} style={{ height: 80, width: 40 }} /></View><View style={{ marginLeft: 10, marginTop: 5, justifyContent: "space-evenly" }}><Text style={{ fontWeight: "bold" }}>{props.l}</Text><Text>{props.q} oz</Text></View></View>  );    }

Example Recipes: Mojito.js

import { Base } from "../constructor_recipes/base"const title = "Mojito"const headercolor = "green"const buttoncolor = "blue"const utlizatedingr = [{  l: "Rum",  q: "4"},{  l: "Vodka",  q: "2" }, {  l: "Vodka",  q: "5"}] const glass = "Double Rock" const preparation = "Shake & Pour" const curiosity = "Lorem ipsum dolor sit" class Mojito extends Component {   render() {return (<Base    title={title}    headercolor = {headercolor}    buttoncolor = {buttoncolor}    utlizatedingr={utlizatedingr}    glass={glass}    preparation={preparation}    curiosity={curiosity}></Base>   );  } }  export default Mojito;

So I asked a question before here about setting up react native environment for windows. But I got error about android licensing so someone suggested me to run npx react-native doctor which resulted in one error which is

Here is the list of SDK installedPlease help me what does this error means

Im using React Native 61.5 and sometimes the whole app will restart when switching from the background to foreground after minimizing, showing a white screen while the js bundle loads, while I need the app to keep its state. Theres no error shown at all but I can see js bundle is loading. Any reason this could be happening?

Any people met the issue Could not resolve all artifacts for configuration ':react-native-fast-image:classpath' and can not find com.android.tools.build:gradle:3.6.3 ? I try open the project structure and see the gradle plugin tool is 3.6.3 and the gradle version is 5.4.6 but i dont know what happen now

The build.gradle file :

// Top-level build file where you can add configuration options common to all sub-projects/modules.buildscript {    /*ext {        buildToolsVersion = "28.0.2"        minSdkVersion = 16        compileSdkVersion = 28        targetSdkVersion = 27        supportLibVersion = "28.0.0"    }*/    repositories {        jcenter()        google()        maven {            url 'https://maven.google.com/'            name 'Google'        }        mavenCentral()    }    dependencies {        classpath 'com.android.tools.build:gradle:3.5.0'        classpath 'com.google.gms:google-services:4.0.1'        // NOTE: Do not place your application dependencies here; they belong        // in the individual module build.gradle files    }}allprojects {    repositories {        configurations.all {            resolutionStrategy.eachDependency { details ->                def requested = details.requested                if (requested.group == 'com.google.android.gms') {                    details.useVersion '12.0.1'                }                if (requested.group == 'com.google.firebase') {                    details.useVersion '12.0.1'                }            }        }        mavenLocal()        mavenCentral()        google()        jcenter()        maven {            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm            url "$rootDir/../node_modules/react-native/android"        }        maven {            url 'https://maven.google.com/'            name 'Google'        }    }}subprojects {    project.configurations.all {        resolutionStrategy.eachDependency { details ->            if (details.requested.group == 'com.android.support'&& !details.requested.name.contains('multidex') ) {                details.useVersion "27.1.1"            }        }    }}ext {    buildToolsVersion = "28.0.3"    minSdkVersion = 16    compileSdkVersion = 28    targetSdkVersion = 28    supportLibVersion = "28.0.0"    googlePlayServicesVersion = "15.0.1"    androidMapsUtilsVersion = "0.5+"}project.ext {    excludeAppGlideModule = true}/*task wrapper(type: Wrapper) {    gradleVersion = '4.7'    distributionUrl = distributionUrl.replace("bin", "all")}*/

I have came across few solutions specific for ios and Android to prevent screen-capturing and taking screenshots. But how do i disable screen-capturing in react native?

I have a screen with many horizontal FlatLists inside a ScrollView, the structure is likes this:

<ScrollView><View><FlatList horizontal={true} .../></View><View><FlatList horizontal={true} .../></View><View><FlatList horizontal={true} .../></View></ScrollView>

Horizontal scrolling on each FlatList sometimes work, but most of the times happens a swipe to the next screen:

Am using react native 0.61.2, react-navigation 4.0.10. Previously on react native 0.60.x works good. It only happens on android.

I already tried:

• put nestedScrollEnabled={true} on <ScrollView>
• put ScrollView inside a <View> with flex:1
• put nestedScrollEnabled={true} on <ScrollView> and on each FlatList

but it's not working, What more else can I do? Thanks in advance

When i installed React Native WebView

After installation when i run react-native run-android showing error

Task :app:transformDexArchiveWithDexMergerForDebug FAILED

Deprecated Gradle features were used in this build, making it incompatible with Gradle 6.0.Use '--warning-mode all' to show the individual deprecation warnings.See https://docs.gradle.org/5.5/userguide/command_line_interface.html#sec:command_line_warnings163 actionable tasks: 28 executed, 135 up-to-date

Package.json

"@react-native-community/async-storage": "^1.8.1","@react-native-community/masked-view": "^0.1.7","@react-navigation/native": "^5.1.3","native-base": "^2.13.12","npm-check-updates": "^4.1.0","react": "16.13.1","react-native": "0.62.0","react-native-gesture-handler": "^1.6.1","react-native-media-controls": "^1.1.1","react-native-paper": "^3.6.0","react-native-reanimated": "^1.7.1","react-native-safe-area-context": "^0.7.3","react-native-screens": "^2.4.0","react-native-track-player": "^1.2.2","react-native-video": "^5.1.0-alpha6","react-native-webview": "^9.0.2","react-navigation": "^4.3.5","react-navigation-drawer": "^2.4.9","react-navigation-stack": "^2.3.9","react-navigation-tabs": "^2.8.9","react-redux": "^7.2.0","redux": "^4.0.5","redux-persist": "^6.0.0"

When i run react-native run-android , it will working proper

Then i needs apk

I run react-native run-android --variant=release

Then while i run apk showing Network request failed

I get these yellow warning boxes on the bottom of my AVD. How do I turn that off, because it is really annoying.

Image of an error:

I've got a really annoying bug for some time now.. and it's that animations doesn't work in the debug mode of a React-Native App properly. It takes about 5s until they get executed.In normal mode everything works fine. I don't know what the reason is and there is nothing useful about this bug on the internet, yet. So I decided to ask you ^^

Note

• If you want to see how the bug looks like.. I have uploaded a short videohttps://www.youtube.com/watch?v=qxpOyIHeyQg

Used

• react-native 0.62

• chormedebugger (also tested with react-native-debugger)

• android (ios not tested yet)

Thank you ^^

I have an app on react-native with two themes: light and dark. And it looks not so nice when the keyboard in the light colours appears in the dark theme. I need to change the theme of the keyboard depends on my app theme. On IOS it is possible to make with keyboardAppearance(enum('default', 'light', 'dark')) property from TextInput https://reactnative.dev/docs/textinput. But on Android it is not working. Does somebody know a good way to do it?

I have a flatlist which contains some list of images (Inside touchableopacity) and on each image focus i'm scaling the image to 1.3. Here the next row is always overlapping the first row image when scaled.

<FlatList          style={[styles.flatlist, styles.outline]}          decelerationRate="fast"          data={this.props.posters}          contentContainerStyle={{            flexDirection: 'column',            paddingTop: perfectSize(50),            paddingLeft: perfectSize(40),            paddingRight: perfectSize(40),            paddingBottom: perfectSize(50),          }}          numColumns={7}          horizontal={false}          ref={ref => (this.scroller = ref)}                        scrollEventThrottle={400}          renderItem={({item, index}) => (<Poster              key={index + 1}              defaultFocus={this.state.posterNum}              onFocus={this.handleAccessible}              handleClick={this._onPosterClick}              onLayout={this.handleScroller}              data={item}              index={index + 1}            />          )}          keyExtractor={item => item.id}        />

Poster component code is below

<TouchableHighlight    ref={itemRef => {      this.refers[`${each.id}_${i}_pos`] = itemRef;    }}            accessible={true}    hasTVPreferredFocus={defaultFocus}    style={[styles.poster_box_small]}    onFocus={() => this._onPosterFocus(`${each.id}_${i}`, i)}    onPress={() => this._onPosterClick(each, i)}    onBlur={() => this._onPosterBlur(`${each.id}_${i}`)}><LinearGradient      colors={['#BF55DE', '#080808', '#00BDE6']}      start={{x: 0, y: 1}}      end={{x: 1, y: 0}}      ref={itemRef => (this.refers[`${each.id}_${i}_lg`] = itemRef)}>      {/* Poster :: Background Image */}<ImageBackground        style={styles.poster_banner}        resizeMode="cover"        source={{uri: each.image}}>        {/* Bottom Left Flag :: Collected/UnCollected score */}        {this.getScoreUI(each)}        {/* Center Dots :: Show only during file load */}<View style={styles.poster_center_view}><Text style={styles.poster_center_circle}>. . .</Text></View>        {/* Top Right Flag :: TV Collection */}        {this.getTVFlag(each)}</ImageBackground></LinearGradient></TouchableHighlight>

onFocus and onBlur i'm just swapping the class

// Poster Focus :: scale it and show border_onPosterFocus = (key, i) => {  this.props.onFocus && this.props.onFocus(i);  this.refers[`${key}_pos`].setNativeProps({    style: styles.poster_box_large,  });  this.refers[`${key}_lg`].setNativeProps({    style: styles.poster_gradient_large,  });};// Poster Blur :: Remove scaling and remove border_onPosterBlur = key => {  this.refers[`${key}_pos`].setNativeProps({style: styles.poster_box_small});  this.refers[`${key}_lg`].setNativeProps({    style: styles.poster_gradient_small,  });};

Css of poster component

poster_gradient_large: {    padding: perfectSize(3),},poster_gradient_small: {    padding: perfectSize(0),},poster_box_small: {    width: perfectSize(235),    height: perfectSize(334),    margin: perfectSize(6),    transform: null,    zIndex: -1,},poster_box_large: {    width: perfectSize(235),    height: perfectSize(334),    margin: perfectSize(6),    transform: [{scale: (1.1, 1.3)}],    zIndex: 1,},poster_banner: {    width: '100%',    height: '100%',    backgroundColor: 'rgba(51,50,59,1)',    zIndex: 1,},

Problem is like this, the next row in flatlist is overlapping the scaled image but the top rows are not overlapping. This is happening for all images.