I am facing issues with my react-native app. It was working fine before the re-installation of windows after I have re-setup everything from android studio, whenever I try to run "react-native run-android"this shows up

$ react-native run-androidinfo Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.Jetifier found 1041 file(s) to forward-jetify. Using 2 workers...info Starting JS server...info Installing the app...Starting a Gradle Daemon, 2 busy and 2 incompatible and 1 stopped Daemons could not be reused, use --status for detailsFAILURE: Build failed with an exception.* Where:Script 'C:\Users\Robin\Documents\IntoNovus\node_modules\@react-native-community\cli-platform-android\native_modules.gradle' line:307* What went wrong:A problem occurred evaluating project ':app'.> native_modules_8hkbashcmevmu4l7wc13mmhka$_run_closure2$_closure4$_closure6$_closure7$_closure8* Try:Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan toget full insights.* Get more help at https://help.gradle.orgBUILD FAILED in 3m 12serror Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment.Run CLI with --verbose flag for more details.Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081FAILURE: Build failed with an exception.* Where:Script 'C:\Users\Robin\Documents\IntoNovus\node_modules\@react-native-community\cli-platform-android\native_modules.gradle' line:307* What went wrong:A problem occurred evaluating project ':app'.> native_modules_8hkbashcmevmu4l7wc13mmhka$_run_closure2$_closure4$_closure6$_closure7$_closure8* Try:Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan toget full insights.* Get more help at https://help.gradle.orgBUILD FAILED in 3m 12s    at checkExecSyncError (child_process.js:621:11)    at execFileSync (child_process.js:639:15)    at runOnAllDevices (C:\Users\Robin\Documents\IntoNovus\node_modules\react-native\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:94:39)    at buildAndRun (C:\Users\Robin\Documents\IntoNovus\node_modules\react-native\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\index.js:179:41)    at C:\Users\Robin\Documents\IntoNovus\node_modules\react-native\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\index.js:133:12    at processTicksAndRejections (internal/process/task_queues.js:93:5)    at async Command.handleAction (C:\Users\Robin\Documents\IntoNovus\node_modules\react-native\node_modules\@react-native-community\cli\build\index.js:182:9)

Things done so far:updating npm to the latest using npm install npm@latestdeleted node_modulesand run npm install

Well, I'm developing an app for android and IOS platform, inside my app I'm fecthing data from an API. I realised that my app can't fetch data in some android versions. I tested in andoroid 4.1, 4.4 and 5.1. These versions do not fecth data. But Android 7, fetch and I do not have problems.

I was looking for the solution, I found that androids versions using minSdkVersion 16, they do not have TLS 1.1 and 1.2 enable by default. (This is implemented from 20 sdkVersion) And to enable them, I will have to do with Java. I'm just working with react-native 3 months ago and I'm not a java programmer. So the stuffs i'm seeing around, do not tell me exactly what I'll have to do. Can any one tell me steps to enable TLS 1.1 and TLS 2.2 in a react-native android app. I just see exemples that give the code to add, they do not explain or tell the steps. And I also read a comment that says by enabling the TLS 1.1 and 1.2 the app can't be uploaded in play store.

I am trying to access Remote HTTP Api on my local machine. The API is working perfectly on Postman as well as on Chrome in my local machine. But When making Fetch call using Expo React Native Fetch I am getting the following error:

Network request failed

node_modules\whatwg-fetch\dist\fetch.umd.js:473:29 in xhr.onerror node_modules\event-target-shim\dist\event-target-shim.js:818:39 in EventTarget.prototype.dispatchEvent
node_modules\react-native\Libraries\Network\XMLHttpRequest.js:574:29 in setReadyState
node_modules\react-native\Libraries\Network\XMLHttpRequest.js:388:25 in __didCompleteResponse
node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:190:12 in emit
node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:436:47 in __callFunction
node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:26 in __guard$argument_0
node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:110:17 in __guard$argument_0
[native code]:null in callFunctionReturnFlushedQueue**

For your information I am trying to run the app on a Latest Android Device using expo client.

Code :

componentDidMount() {  const url = (Remote Http URL);  this.setState({    loading: true  });  fetch(url)    .then(res => res.json())    .then(res => {      this.setState({        loading: false,        error: res.error || null,        data1: res      }, () => {        console.log(res);      });    })    .catch(error => {      this.setState({        error,        loading: false      }, () => {        console.log(error);      });    });}

Please help me to resolve this issue. Thanks.

Below html tag not showing properly in android but in iOS its work fine.

"<p><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><mn>6</mn><msqrt><mn>79</mn></msqrt><mo>&#160;</mo><mo>+</mo><msup><mn>88</mn><mn>87</mn></msup><mo>&#160;</mo><mo>=</mo><mo>?</mo></math></p>\r\n\r\n<p>Testing</p>\r\n"

My Source Code:

const htmlText = "<p><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><mn>6</mn><msqrt><mn>79</mn></msqrt><mo>&#160;</mo><mo>+</mo><msup><mn>88</mn><mn>87</mn></msup><mo>&#160;</mo><mo>=</mo><mo>?</mo></math></p>\r\n\r\n<p>Testing</p>\r\n"<WebView          style={{            width: Dimensions.get('window').width,          }}          scrollEnabled={false}          scalesPageToFit={true}          source={html: htmlText}          viewportContent={"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"}      />

Expected Result :

Trying to create a react-native project on Android 4.4.2 I get this error screen

and couldn't find any way to resolve it. I tried restarting packager, reconnecting device, even reinstalling react native and starting new project. On 6.0.0 and later versions it works just fine.

I'm trying to utilize Google Places API in Android app.I'm using React Native and the following package:https://github.com/FaridSafi/react-native-google-places-autocomplete

1. API key in Google console created
2. Restriction set to Android app (SHA1 fingerprint + package name)
3. SHA1 fingerprint and package name values checked with:
   • aapt dump badging app-release.apk
   • unzip -p app-release.apk META-INF/CERT.RSA | keytool -printcert
4. API key don't have any API usage restriction (can be used with any service)
5. Places API enabled
6. Maps JavaScript API enabled
7. Maps SDK for Android enabled

   ---

A) When Android app restriction is set (point 2). I'm getting error:

"google places autocomplete: This IP, site or mobile application is not authorized to use this API key. Request received from IP address xxx.xxx.xxx.xxx, with referrer: undefined"

B) When Android app restriction removed (restriction set to None) everything works fine.

Any ideas?

I am building a react native project and I need to give the user the option to import a .csv file from their local device, and that file will be sent to the server, how can I do that?

I built an android app using React Native, it got built successfully but when I run the app in my Android Virtual Device it shows up a full red screen with the following error:

I have not done native app development ever before neither do I have any knowledge of Java so I have no idea what this error means and how to fix this.

I use Android Version 5.0.2

In my React Native, I use the bellow code

import React, { Component } from 'react';import { WebView } from 'react-native-webview';class google extends Component {   render() {      return (<WebView            source={{uri: 'https://www.google.com/'}}            style={{marginTop: 20}}             ref={ref => { this.webView = ref; }}             // onError={ ()=>{ this.webView.reload(); } }          />      );   }}export default google;

when I run on iOS, the output is perfect but in Android device it gives error:

[

How to fix this error so that I can run my app on every device?

Hi I just started mobile development few weeks ago. I am having one problem when I am trying to install the application to my phone(Huawei phone) with "adb install app/build/outputs/apk/newApk.apk". The first time I run this command, I get this error:

Performing Streamed Installadb: failed to install app/build/outputs/apk/newApk.apk: (my branch)

When I try again, it is stuck at Performing Streamed Install.I am not sure if the problem is with my phone model or adb. I tried "adb (deviceId) install app/build/outputs/apk/newApk.apk" with options like -t, -r and still without success. I also do not have the application installed on my phone.

I have to make the loops spin.

So I have degree = 0 which must gradually reach degree = 360, and then start from 0 and return to 360 and so on.

I tried this way but it's not working, where am I doing wrong?

 const grado = React.useRef(new Animated.Value(0)).current;  React.useEffect(() => {    /*Animated.loop(      Animated.timing(grado, {        toValue: 1,        duration: 300,        easing: Easing.linear,      })    ).start();*/    Animated.loop(      Animated.spring(grado, {        toValue: 1,        friction: 1,      }),      { iterations: 1000 }    ).start();  }, []);  const spinT = grado.interpolate({    inputRange: [0, 1],    outputRange: [0, 360],  });

Link: snack

import React, { useState } from 'react';import { StyleSheet, View, Animated, Text, Easing } from 'react-native';import Svg, { Circle, G } from 'react-native-svg';const AnimatedCircle = Animated.createAnimatedComponent(Circle);export default ({  image,  width,  height,  innerCircle = false,  innerCircleRadius = 13,  innerCircleFillPercentage = 25,  innerCircleStroke = '#143c5b',  innerCircleStrokeAnimated = '#02ac8a',  outerCircle = false,  outerCircleRadius = 18,  outerCircleFillPercentage = 50,  outerCircleStroke = '#1f4a42',  outerCircleStrokeAnimated = '#028cfe',  degree,}) => {  const innerCirclePerimeter = 2 * Math.PI * innerCircleRadius;  const innerCircleStrokeDashOffset =    innerCirclePerimeter -    (innerCirclePerimeter * innerCircleFillPercentage) / 100;  const outerCirclePerimeter = 2 * Math.PI * outerCircleRadius;  const outerCircleStrokeDashOffset =    outerCirclePerimeter -    (outerCirclePerimeter * outerCircleFillPercentage) / 100;  const [springValue] = useState(new Animated.Value(1.3));  const [innerCircleInitialFill] = useState(    new Animated.Value(innerCirclePerimeter)  );  const [outerCircleInitialFill] = useState(    new Animated.Value(outerCirclePerimeter)  );  React.useEffect(() => {    Animated.parallel([      Animated.timing(innerCircleInitialFill, {        toValue: innerCircleStrokeDashOffset,        duration: 1000,      }),      Animated.timing(outerCircleInitialFill, {        toValue: outerCircleStrokeDashOffset,        duration: 2000,      }),      Animated.spring(springValue, {        toValue: 1,        friction: 1,      }),    ]).start();  }, [    innerCircleInitialFill,    outerCircleInitialFill,    springValue,    innerCircleStrokeDashOffset,    outerCircleStrokeDashOffset,  ]);  const outer = () => {    return (      outerCircle && (<><Circle            cx="25"            cy="25"            r={outerCircleRadius}            fill="transparent"            stroke={outerCircleStroke}            strokeDasharray="10, 1"            strokeDashoffset="30"            strokeWidth={0.5}          /><AnimatedCircle            cx="25"            cy="25"            r={outerCircleRadius}            fill="transparent"            stroke={innerCircleStrokeAnimated}            strokeDasharray={outerCirclePerimeter}            strokeDashoffset={outerCircleInitialFill}            strokeLinecap={'round'}          /></>      )    );  };  const inner = () => {    return (      innerCircle && (<><Circle            cx="25"            cy="25"            r={innerCircleRadius}            fill="transparent"            stroke={innerCircleStroke}            strokeDasharray="1"            strokeWidth={0.5}          /><AnimatedCircle            cx="25"            cy="25"            r={innerCircleRadius}            fill="transparent"            stroke={outerCircleStrokeAnimated}            strokeDasharray={innerCirclePerimeter}            strokeDashoffset={innerCircleInitialFill}            strokeLinecap={'round'}          /></>      )    );  };  const Image = () => (<View      style={{        position: 'absolute',        justifyContent: 'center',        alignItems: 'center',        top: 0,        left: 0,        right: 0,        bottom: 0,      }}><Animated.Image        source={image}        style={[          styles.image,          {            width,            height,            borderRadius: width * 0.5,            transform: [{ scale: springValue }],          },        ]}      /></View>  );  //console.log(degree, height * Math.cos(degree), width * Math.sin(degree));  const grado = React.useRef(new Animated.Value(0)).current;  React.useEffect(() => {    /*Animated.loop(      Animated.timing(grado, {        toValue: 1,        duration: 300,        easing: Easing.linear,      })    ).start();*/    Animated.loop(      Animated.spring(grado, {        toValue: 1,        friction: 1,      }),      { iterations: 1000 }    ).start();  }, []);  const spinT = grado.interpolate({    inputRange: [0, 1],    outputRange: [0, 360],  });  console.log('c', grado, spinT);  const spin = 45;  return (<View      style={[        styles.container,        {          //width: width * 1.5,          //height: height * 1.5,          //borderRadius: 2 * Math.PI * outerCircleRadius,          backgroundColor: '#cccccca1',        },      ]}><View><Svg          viewBox={`0 0 50 50`}          width={width * 2.5}          height={height * 2.5}          style={{            transform: [{ rotateZ: '-90deg' }],          }}><G>            {outer()}            {inner()}</G></Svg>        {Image()}<Text          style={{            fontSize: width * 0.12,            fontWeight: 'bold',            color: '#ffffff',            position: 'absolute',            justifyContent: 'center',            alignItems: 'center',            textAlign: 'center',            display: 'flex',            top:              height -              height * Math.cos((spinT * Math.PI) / 180) +              (height * 0.2) / 2,            left:              width +              width * Math.sin((spinT * Math.PI) / 180) +              (width * 0.2) / 2,            backgroundColor: '#1393DB',            borderRadius: 10,            width: width * 0.2,            height: height * 0.2,            shadowColor: '#000',            shadowOffset: {              width: 0,              height: 2,            },            shadowOpacity: 0.25,            shadowRadius: 3.84,            elevation: 5,          }}>          21</Text></View></View>  );};const styles = StyleSheet.create({  container: {    justifyContent: 'center',    alignItems: 'center',    //backgroundColor: 'rgba(168, 152, 50, 0.5)',  },});

I am making a calling app where users may or may not use headphones / a headset. On an incoming video call I am using react-native-incall-manager to turn the speaker on / allow speaker phone. The basic InCallManager.start({ media: 'video' }); method works and allows detection of a new audio device being plugged in such as headphones, and if this happens, the headphone and mic plugged in work as expected.

The problem comes in the case that headphones are already plugged in to the device before a call starts, because the InCallManager.setSpeakerphoneOn(true); method is called at that time. InCallManager.start({ media: 'video' }); doesn't account for devices already connected and the headphones do not work, the normal speaker does even though headphones are plugged in.

react-native-incall-manager recommends using DeviceEventEmitter from react-native to detect native events such as changes in connected audio devices, but this module is deprecated.

Here it is recommended to use NativeEventEmitter, but this seems very complex and seems to require the native Java (Android) modules to be written and used in conjunction with it.

How can I detect changes in connected audio devices in Android in React Native?

I've been doing a few searches on google trying to find a way to run foreground services in react native but I haven't found much about it.

Is anyone aware of how to accomplish this?This is what I mean by foreground service: https://developer.android.com/guide/components/services.html#Foreground

I have the following code in my ./src/index.js:

import React from 'react';import MapView from 'react-native-maps';import {View} from 'react-native';const App = () => (<View style={{flex: 1}}><MapView      style={{flex: 1}}      region={{        latitude: -27.210753,        longitude: -49.644183,        latitudeDelta: 0.00143,        longitudeDelta: 0.00035,      }}      showsUserLocation={true}      showsMyLocationButton={true}      loadingEnabled    /></View>);export default App;

I can't see showsUserLocation, showsMyLocationButton. Otherwise, I can see map and my place with coordinates that I put.

Please, need I do something else?

I am working on a face recognition app where the picture is taken and sent to server for recognition.

I have to add a validation that user should capture picture of real person and of another picture. I have tried a feature of eye blink and in which the camera waits for eye blink and captures as soon as eye is blinked, but that is not working out because it detects as eye blink if mobile is shaken during capture.

Would like to ask for help here, is there any way that we can detect if user is capturing picture of another picture. Any ideas would help.

I am using react native to build both Android and iOS apps.

Thanks in advance.

Hi im trying to do this:

1- i have a basic webview app, when i press back button i should get back to last page but if im on login page and press back button or back gesture on my android my app should exit, but is not working it stays open when i press back button it refresh the webview again and again here my code:

const styles = StyleSheet.create({  flexContainer: {    flex: 1  }})export default class App extends Component {  webView = {    canGoBack: false,    ref: null,  }  onAndroidBackPress = () => {    if (this.webView.canGoBack && this.webView.ref) {      this.webView.ref.goBack();      return true;    }    return false;  }  componentWillMount() {    if (Platform.OS === 'android') {      BackHandler.addEventListener('hardwareBackPress', this.onAndroidBackPress);    }    setTimeout(() => {      SplashScreen.hide();  }, 1800);  }  componentWillUnmount() {    if (Platform.OS === 'android') {      BackHandler.removeEventListener('hardwareBackPress');    }  }  render() {    return (<SafeAreaView style={styles.flexContainer}><WebView        source={{uri: 'https://clientes.dbsnetwork.net'}}        startInLoadingState={true}        allowsBackForwardNavigationGestures        renderLoading={() => (<ActivityIndicator            color='black'            size='large'            style={styles.flexContainer}          />        )}        style={{marginTop: 0}}        ref={(webView) => { this.webView.ref = webView; }}        onNavigationStateChange={(navState) => { this.webView.canGoBack = navState.canGoBack; }}      /></SafeAreaView>    );  }}

there is anything else i should do?

thank you.

I have just created a project with react-native init on Manjaro Linux and opened it with Android Studio . I then ran react-native start on a terminal and then ran the app on an existing emulator which opened to a red screen stating:

The development server returned response error code: 500Metro Bundler has encountered an internal error, please check your terminal error output for more details

On my terminal window, it gave me the following error:

error: bundling failed: Error: EACCES: permission denied, open '/tmp/metro-cache/52/45f310fea946062ca0c3c6122dec6592f224f34ee755285a39fd0922f1d4c6739388c3'    at Object.openSync (fs.js:443:3)    at Object.writeFileSync (fs.js:1163:35)    at FileStore.set (/home/user/ReactNativeProjects/albums/node_modules/metro-cache/src/stores/FileStore.js:43:8)    at Cache.set (/home/user/ReactNativeProjects/albums/node_modules/metro-cache/src/Cache.js:96:31)    at /home/user/ReactNativeProjects/albums/node_modules/metro/src/Bundler.js:287:13    at Generator.next (<anonymous>)    at step (/home/user/ReactNativeProjects/albums/node_modules/metro/src/Bundler.js:11:657)    at /home/us/ReactNativeProjects/albums/node_modules/metro/src/Bundler.js:11:817    at process._tickCallback (internal/process/next_tick.js:68:7) BUNDLE  [android, dev] ./index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.

I checked the /tmp/metro-cache/52 folder but did not find the mentioned file. Does anybody know what may be causing this error? Note that when I run it on my physical device with $ react-native run-android, I get the same error.

I'm currently building a simple app in React Native 0.62.2 for Android. I've been having some trouble with axios 0.19.2 (or even the fetch API) when trying to upload images to my API (which is written in node.js/express). The POST request is formulated as follows:

// UserService.jsexport const postNewUser = async (newUser) => {    try {        const photo = {            uri: newUser.avatar.uri,            type: 'image/jpg',            name: newUser.avatar.fileName,        };        const formData = new FormData();        Object.keys(newUser).forEach(key => formData.append(key, newUser[key]));        formData.append('avatar', photo);        const response = await api.post('/users', formData);        return response.data;    } catch (err) {        console.log('TRACE error posting user: ', err);        return;    }}

Here, the property newUser.avatar.uri is set by means of an image picker library, namely @react-native-image-picker 1.6.1. It gives me a NetworkError whenever I append the photo variable into the FormData. Setting the URI manually with some random image from the web results in the same error. Debbuging it from the Browser, it prints out some sort of stack trace like this one:

TRACE error posting user:  Error: Network Error    at createError (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\axios\lib\core\createError.js:16)    at EventTarget.handleError (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\axios\lib\adapters\xhr.js:83)    at EventTarget.dispatchEvent (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\event-target-shim\dist\event-target-shim.js:818)    at EventTarget.setReadyState (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:575)    at EventTarget.__didCompleteResponse (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:389)    at C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:502    at RCTDeviceEventEmitter.emit (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:189)    at MessageQueue.__callFunction (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:425)    at C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112    at MessageQueue.__guard (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:373)

If I, for example, comment out the line formData.append('avatar', photo); it works perfectly, i.e., my API receives the request accordingly. So I think this might not be a CORS-related issue. Also, other requests, such as GETs and even other POSTs are working just fine.

I know there's a bunch of other related posts here in SO and also in GitHub, some of them related to the exact same issue. But none of the solutions I found worked out for me.

In case someone wants to check out how the routes in my API are implemented just hit me up and I will provide the code here.

Thanks in advance for any help you might give me!

When I run android bundle in react-native I get this gradle task error

:react-native-community_async-storage:checkDebugManifest

Is anybody know, How can i fix this issue ?

"@react-native-community/async-storage": "^1.9.0","react": "16.11.0","react-native": "0.62.2"

Development platform ubuntu.

If I run this Snack on Expo on my Android device, it shows the image fine: https://snack.expo.io/@kovek/58126e

If I run that same code serving from my React 62 packager, with the bundle running on my Android device, the image does not show.

The issue is specifically with this URI: https://c.tile.openstreetmap.org/5/5/12.png (and other configurations of tiles from that server.)

For example, this JPG works fine: http://placekitten.com/300/300 (a kitten) , and this PNG works fine: https://i.dlpng.com/static/png/357627_preview.png (it's a galaxy)

It also didn't show on the Android emulator on Linux