I have installed react-native-firebase package using yarn. I've setup the code in the build.gradle, settings.gradle as well as the AndroidManifest as well. Added multiDexEnabled as true and also added the implementation line in the code, but it is still not working.

build.gradle (App Level)

apply plugin: "com.android.application"import com.android.build.OutputFile/** * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets * and bundleReleaseJsAndAssets). * These basically call `react-native bundle` with the correct arguments during the Android build * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the * bundle directly from the development server. Below you can see all the possible configurations * and their defaults. If you decide to add a configuration block, make sure to add it before the * `apply from: "../../node_modules/react-native/react.gradle"` line. * * project.ext.react = [ *   // the name of the generated asset file containing your JS bundle *   bundleAssetName: "index.android.bundle", * *   // the entry file for bundle generation. If none specified and *   // "index.android.js" exists, it will be used. Otherwise "index.js" is *   // default. Can be overridden with ENTRY_FILE environment variable. *   entryFile: "index.android.js", * *   // https://facebook.github.io/react-native/docs/performance#enable-the-ram-format *   bundleCommand: "ram-bundle", * *   // whether to bundle JS and assets in debug mode *   bundleInDebug: false, * *   // whether to bundle JS and assets in release mode *   bundleInRelease: true, * *   // whether to bundle JS and assets in another build variant (if configured). *   // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants *   // The configuration property can be in the following formats *   //         'bundleIn${productFlavor}${buildType}' *   //         'bundleIn${buildType}' *   // bundleInFreeDebug: true, *   // bundleInPaidRelease: true, *   // bundleInBeta: true, * *   // whether to disable dev mode in custom build variants (by default only disabled in release) *   // for example: to disable dev mode in the staging build type (if configured) *   devDisabledInStaging: true, *   // The configuration property can be in the following formats *   //         'devDisabledIn${productFlavor}${buildType}' *   //         'devDisabledIn${buildType}' * *   // the root of your project, i.e. where "package.json" lives *   root: "../../", * *   // where to put the JS bundle asset in debug mode *   jsBundleDirDebug: "$buildDir/intermediates/assets/debug", * *   // where to put the JS bundle asset in release mode *   jsBundleDirRelease: "$buildDir/intermediates/assets/release", * *   // where to put drawable resources / React Native assets, e.g. the ones you use via *   // require('./image.png')), in debug mode *   resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", * *   // where to put drawable resources / React Native assets, e.g. the ones you use via *   // require('./image.png')), in release mode *   resourcesDirRelease: "$buildDir/intermediates/res/merged/release", * *   // by default the gradle tasks are skipped if none of the JS files or assets change; this means *   // that we don't look at files in android/ or ios/ to determine whether the tasks are up to *   // date; if you have any other folders that you want to ignore for performance reasons (gradle *   // indexes the entire tree), add them here. Alternatively, if you have JS files in android/ *   // for example, you might want to remove it from here. *   inputExcludes: ["android/**", "ios/**"], * *   // override which node gets called and with what additional arguments *   nodeExecutableAndArgs: ["node"], * *   // supply additional arguments to the packager *   extraPackagerArgs: [] * ] */project.ext.react = [    enableHermes: false,  // clean and rebuild if changing]apply from: "../../node_modules/react-native/react.gradle"/** * Set this to true to create two separate APKs instead of one: *   - An APK that only works on ARM devices *   - An APK that only works on x86 devices * The advantage is the size of the APK is reduced by about 4MB. * Upload all the APKs to the Play Store and people will download * the correct one based on the CPU architecture of their device. */def enableSeparateBuildPerCPUArchitecture = false/** * Run Proguard to shrink the Java bytecode in release builds. */def enableProguardInReleaseBuilds = false/** * The preferred build flavor of JavaScriptCore. * * For example, to use the international variant, you can use: * `def jscFlavor = 'org.webkit:android-jsc-intl:+'` * * The international variant includes ICU i18n library and necessary data * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that * give correct results when using with locales other than en-US.  Note that * this variant is about 6MiB larger per architecture than default. */def jscFlavor = 'org.webkit:android-jsc:+'/** * Whether to enable the Hermes VM. * * This should be set on project.ext.react and mirrored here.  If it is not set * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode * and the benefits of using Hermes will therefore be sharply reduced. */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 "com.safetravel_100"        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'        }    }    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"        }    }    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 fileTree(dir: "libs", include: ["*.jar"])    //noinspection GradleDynamicVersion    implementation "com.facebook.react:react-native:+"  // From node_modules    implementation project(':react-native-geocoder')    implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"    implementation 'androidx.multidex:multidex:2.0.0'    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'

build.gradle (Project Level)

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

I want to modify the user agent string in a WebView so that on the server side I can detect that the request has come from my react-native app. I want to do this using the source prop in the WebView.

How do I do this for IOS and Android?

I'm trying to clone BlueWallet from this github source
I try to run react native run android

error message on node

error message on Android Emulator

I used react-native-vector-icons in my react native project and start app with npm start.

Icons are displaying normally in iOS, but won't show in android.

Things I tried:

• three method in the doc of react-native-vector-icons (finally I can see *.tff files in the fonts folder)
• use react-native run-android to start app. Icon shows normal but what I want is integrating react native with my existing android app, not a totally RN app.
• use jsbundle file instead of debug server in my app

None of above works

So, should I add something to my existing android app?

I don't know how to solve this problem

react@15.2.0

react-native@0.30.0

react-native-vector-icons@2.0.3

node v5.10.1

npm v3.8.3

I get that problem after the app have successfuly run on my device. I don't understand whats the problem. Here is the error

 bundling failed: TypeError: Cannot read property 'map' of undefinedat resolveDependencies (D:\Projects\twitterBot\node_modules\metro\src\DeltaBundler\traverseDependencies.js:423:18)at D:\Projects\twitterBot\node_modules\metro\src\DeltaBundler\traverseDependencies.js:275:33at Generator.next (<anonymous>)at asyncGeneratorStep (D:\Projects\twitterBot\node_modules\metro\src\DeltaBundler\traverseDependencies.js:87:24)at _next (D:\Projects\twitterBot\node_modules\metro\src\DeltaBundler\traverseDependencies.js:107:9)at process._tickCallback (internal/process/next_tick.js:68:7)

As a developer who came to React Native from a web development background (HTML, CSS, Typescript), I have no understanding of files located inside android and ios directories. After a couple of years, I realized that I need to have a full understanding of files inside these directories, and more importantly, the code inside them. (I hate it when I just copy and paste Java code from Github to solve issues without understanding a single line of it). For example, codes like

public class MainActivity extends ReactActivity {    @Override    protected String getMainComponentName() {        return "MyApp";    }       @Override    protected void onCreate(Bundle savedInstanceState) {        SplashScreen.show(this);        super.onCreate(savedInstanceState);    }}

in the MainActivity.java make no sense to me. (same for AppDelegate.m for ios, etc.)

My background:

• 0% Java programing language
• 0% native Android or ios development

I did a search but could not find a guideline/ roadmap for my problem. (posts like this was not useful regarding my background)

What new knowledge (and in what order) should I acquire to be able to fully understand the "native" code in react native? (Does not matter how long it will take, and how difficult it will be)

Please feel free to provide me with tutorials, articles, etc. This is an open question and all answers are correct.

I am using expo and having a expo react-native-webview inside a scrollview, below is the return of component that is returning webview .what i am doing is creating screen in that i want to parse my html and show on screen in containers.The design of containers is in parent screens in which this component is called .Question 1: I have tried multiple solutions for getting scroll inside webview in android devices but nothing is working .below code is working perfect with IOS devices.

Question 2: Can we restrict webview to show only 5 lines on view and turncate rest to (... ) ?can some one help ?

  return (<View style={{ flex: 1 }}><WebView        originWhitelist={["*"]}        source={{ html: htmlContent }}        style={styles.WebViewStyle}      /></View>  );const styles = StyleSheet.create({  WebViewStyle: {    flex: 1,    marginLeft: 5,    height: 150,    width: '100%',  }});

I am using BackgroundTimer from react-native-background-timer in a React native project for Android.

I want a user to be able to record audio after a set duration (e.g. record for 5 minutes after 30 minutes).

The issue I have is that it works "sometimes". It seems the OS is often killing the process - especially if the time to execute is longer.

Code extract:

import BackgroundTimer from 'react-native-background-timer';...// Start a timer that runs once after X millisecondsconst timeout1 = BackgroundTimer.setTimeout(() => {    // Should work when when app is the the background    this.onStartRecord();    const timeout2 = BackgroundTimer.setTimeout(() => {        this.onStopRecord();        BackgroundTimer.clearTimeout(timeout2);    }, millisRecording);    // Clear first timeout    BackgroundTimer.clearTimeout(timeout1);}, millisUntilRecordMoment);

Thes rest of the code is here: https://github.com/bentaly/listen/blob/master/App.tsx

I have also tried building this in Expo previously which didn't work.

Is there anyway to guarantee this operation will work?

I'm trying to clone BlueWallet from this github source
I try to run react native run android

I want to develop an android app that is based on server-client system. I want to develop both backend and android client. It's 2020 and there has already many frameworks developed to provide server side missions to programs.

My question is

What are the trending backend technologies in android world (from database to REST API frameworks), with reasons? For now, I have 2 framework/library on my mind. Spring and Node.js. Google Firebase are also in that list.

I also have another question

Suppose that I made a backend project and want to deploy it on a real server (development made on localhost). What choices should be made ? For example, I made my development on Mysql and Springboot framework, should that server provide support for MySql and Java ? What is the procedure to deploy both database and backend application ?

Thanks.

I am using rapid api and it is working fine in postman but not working in react-native app.

 fetch("https://community-manga-eden.p.rapidapi.com/list/0", {"method": "GET","headers": {        Accept: "application/json","Content-Type": "application/json","x-rapidapi-host": "community-manga-eden.p.rapidapi.com","x-rapidapi-key": "55e095e2damshd8dd8bedc0fbde4p169b25jsn6898d56b4038"    }   })   .then(res => res.json())   .then(response => {    console.log(response);      this.setState({        data: response      })   })   .catch(err => {    console.log(err);   });

I've been developing an android app using React Native & Expo.I was trying to make the app fit a lot of devices and I was using their hardware profiles (screen sizes and resolutions) to check if they fit correctly.I have recieved a bunch of messages that some of the devices I checked show the app differently than what I've seen on the emulator (text shows bigger and breaks to new line, etc.)To test those devices I used their screen sizes in inches and resolutions (also the android version) but on real devices it just shows wrong.

How can I test if my app fits to all devices and why does it show differently on emulator and on real device?

I want to include a modal so people can give links to one another and open them within my app, but I am not sure if this will violate any copyright laws. These links will likely be news articles. So does anyone know if this is legal?

Thanks

I'm using react-native-firebase to manage notifications on React-native app.I try to handle FCM message on the background when application is off without display the notification.

I’m using react-native-firebase to manage notifications on React-native app.When my app is off, I try to catch FCM messages and wake up my app without displaying any notification, just as described here https://rnfirebase.io/docs/v4.2.x/messaging/introduction#Data-only-messages1.

In React Native Firebase doc, they say :

You will need to specify the FCM message priority as high for this functionality to work. If this isn’t set, the app is not given permission to launch the background message handler.

Where I must specify this priority ? I don’t understand how this works.

Edit 1 : I tried to set priority : "high"on FCM message but it's still not working. I have the same problem related to this issue : https://github.com/invertase/react-native-firebase/issues/500

I am using android 8.1 simulator to debug my React Native (0.62) app with VS code on Win10. After firing up the app with react-native run-android, Ctrl+m brings up the dev menu:

But there is no option of Debug JS remotely in the menu. How can I bring up the option of Debug JS Remotely?

I'm tring to use https://github.com/react-native-webrtc/react-native-webrtc in my project. I started by using the example in the documentation and the result is that the front cam "appear" but is seems the image is duplicated multiples times.

The code is pretty much the same as the doc except somme modifications to show the RTCView:

  let isFront = true;  useEffect(() => {    const configuration = {iceServers: [{url: 'stun:stun.l.google.com:19302'}]};    const pc = new RTCPeerConnection(configuration);    mediaDevices.enumerateDevices().then((sourceInfos) => {      let videoSourceId;      console.log(sourceInfos);      for (let i = 0; i < sourceInfos.length; i++) {        const sourceInfo = sourceInfos[i];        if (          sourceInfo.kind == 'videoinput'&&          sourceInfo.facing == (isFront ? 'front' : 'environment')        ) {          videoSourceId = sourceInfo.deviceId;        }      }      mediaDevices        .getUserMedia({          audio: true,          video: {            mandatory: {              minWidth: 500, // Provide your own width, height and frame rate here              minHeight: 300,            },          },        })        .then((stream) => {          setStream(stream);          console.log('set stream');          // Got stream!        })        .catch((error) => {          console.log('error', error);          // Log error        });    });    pc.createOffer().then((desc) => {      pc.setLocalDescription(desc).then(() => {        // Send pc.localDescription to peer      });    });    pc.onicecandidate = function (event) {      // send event.candidate to peer    };  }, [isFront]);   const styles = {    wrapper: {      flex: 1,      justifyContent: 'flex-end',    },    buttonWrapper: {      width: '100%',      height: '20%',      alignItems: 'center',      justifyContent: 'center',    },  } as React.CSSProperties;  return (<View style={styles.wrapper}><View style={{width: '100%', height: '70%', backgroundColor: 'red'}}>        {stream != null ? (<RTCView            style={{flex: 1, height: 150, margin: 10}}            streamURL={stream.toURL()}          />        ) : (<Text>No RTC</Text>        )}</View><View style={styles.buttonWrapper}><NitaButton          title="Contact Help"          onPress={() => navigation.navigate('WaitingRoom')}        /></View></View>  );

I can't seem to find similar problem online. Am I missing something? Thanks!

I'm using a huawei P30 pro, react-native: 0.62.2 and react-native-webrtc: 1.75.3

I'm trying build my react native project for android with CircleCI but getting memory limitations.

In their reference to 'Common Android memory issues', it's recommended to run Gradle with --no-daemon due to high memory usage by daemon.

However this flag is being ignored since it's forking a new JVM with message:

'To honour the JVM settings for this build a new JVM will be forked. Please consider using the daemon: https://docs.gradle.org/6.0.1/userguide/gradle_daemon.html.Daemon will be stopped at the end of the build stopping after processing'

How do we prevent this flag from being ignored?

I'm actually developing an app with react native and i'm testing with my one plus 6 and it has a notch. The SafeAreaView is a solution for the iPhone X but for Android, it seems there is no solution.

Did someone heard about anything to solve this kinf of issue ?

i have a problem when i show the image from raw html. I have an image one the image can be show fully and another one the image can't be show full. here's i give the output.

in the first image can't be show fully, and the second image can show full. How to make first image can be show like the second image? in here i use library react-native-render-html. here's my ful

import React, { Component } from 'react';import { View, Text, StyleSheet, ScrollView, Dimensions } from 'react-native';import WebView from 'react-native-webview'import {Container, Content, Header, Footer, Button} from 'native-base'const API_URL = "https://api.bintangpelajar.com/api"const API_TEST = "http://unnamed48.ccug.gunadarma.ac.id:9091/api"import HTMLView from 'react-native-htmlview'import HTML from 'react-native-render-html';const htmlContent = `<h1>This HTML snippet is now rendered with native components !</h1><h2>Enjoy a webview-free and blazing fast application</h2><img src="https://i.imgur.com/dHLmxfO.jpg?2" width="114" height="124" /><em style="textAlign: center;">Look at how happy this native cat is</em>`;export default class API extends Component {  constructor(props) {    super(props);    this.state = {        coba : `<p><img src="https://simteg.bintangpelajar.net/assets/fileuser/lampiran_soal/file_1582624704.PNG" alt=""></p>`,        coba2 : `<p><img src="https://simteg.bintangpelajar.net/assets/fileuser/lampiran_soal/file_1582624996.PNG" alt=""></p>`,        coba3 : `<p><img src="https://bpjuara.bintangpelajar.com/assets/fileuser/lampiran_soal/file_1591348570.JPG" alt=""  width="55" height="92"></p>`,        coba4 : `<p><img src="https://bpjuara.bintangpelajar.com/assets/fileuser/lampiran_soal/file_1591348570.JPG" alt=""></p>`    };  }  render() {    // const htmlContent = `<p><a href="http://jsdf.co">&hearts; nice job!</a></p>`;    return (<View><HTML html={this.state.coba3} style={styles}/>          {/* <HTML html={this.state.coba2} imagesMaxWidth={Dimensions.get('window').width}/><HTML html={this.state.coba}/> */}<HTML html={this.state.coba4} imagesMaxWidth={Dimensions.get('window').width}/>          {/* <HTMLView value={this.state.coba2}/> */}</View>      // <HTMLView      //   value={htmlContent}      //   stylesheet={styles}      // />    );  }}const styles = StyleSheet.create({  img: {    resizeMode:'stretch'  },});

I have been trying to make a simple test app using react native but I am getting this

Sometimes the app runs without any error but again after sometime this error pops up so cam someone please help me. Thank You!!

This is my console output:

image

And this is what I am getting in android studio logcat:

12-04 18:19:42.856 4147-4163/com.album E/unknown:ReactNative: Unable to download JS bundle                                                          com.facebook.react.common.DebugServerException: The development server returned response error code: 500                                                          URL: http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false                                                          Body:                                                          {"type":"InternalError","errors":[],"message":"Metro Bundler has encountered an internal error, please check your terminal error output for more details"}                                                              at com.facebook.react.devsupport.BundleDownloader.processBundleResult(BundleDownloader.java:225)                                                              at com.facebook.react.devsupport.BundleDownloader.access$100(BundleDownloader.java:40)                                                              at com.facebook.react.devsupport.BundleDownloader$1.onResponse(BundleDownloader.java:192)                                                              at okhttp3.RealCall$AsyncCall.execute(RealCall.java:135)                                                              at okhttp3.internal.NamedRunnable.run(NamedRunnable.java:32)                                                              at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1113)                                                              at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:588)                                                              at java.lang.Thread.run(Thread.java:818)12-04 18:19:42.899 4147-4164/com.album E/Surface: getSlotFromBufferLocked: unknown buffer: 0xb407eec012-04 18:19:42.902 4147-4147/com.album E/unknown:ReactNative: Exception in native call                                                          com.facebook.react.common.DebugServerException: The development server returned response error code: 500                                                          URL: http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false                                                          Body:                                                          {"type":"InternalError","errors":[],"message":"Metro Bundler has encountered an internal error, please check your terminal error output for more details"}                                                              at com.facebook.react.devsupport.BundleDownloader.processBundleResult(BundleDownloader.java:225)                                                              at com.facebook.react.devsupport.BundleDownloader.access$100(BundleDownloader.java:40)                                                              at com.facebook.react.devsupport.BundleDownloader$1.onResponse(BundleDownloader.java:192)                                                              at okhttp3.RealCall$AsyncCall.execute(RealCall.java:135)                                                              at okhttp3.internal.NamedRunnable.run(NamedRunnable.java:32)                                                              at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1113)                                                              at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:588)                                                              at java.lang.Thread.run(Thread.java:818)