I'm using React native for developing an android application. With this fetch request I'm getting the error TypeError: network request failed:

fetch('https://pixabay.com/api/?key=MY_KEY&q='+ this.props.jsondata.city.name +'&lang=en&image_type=photo&orientation=horizontal&category=travel&safesearch=true')        .then(response => {            console.dir(response);            if (!response.ok) {                throw Error(data.statusText);            }            return response.json();        })        .then(json => {            console.log(json.hits[0].largeImageURL)            this.setState(() => {                return {backImage: json.hits[0].largeImageURL};            });        })        .catch(err => {            console.log('Unable to search image! '+ err);        });

I've already searched online but this problem appears only with localhost addresses or http, that is not my case. The request is inside the componentDidMount() function. I've made a similar request (with the same structure) in an another place of the application but there is no error there. I'm using a real android device to testing the app with the react-native app compiled in android native code.

i was trying to integrate Realm db to my project

Model File : export const CHAT_LIST_SCHEMA = {  name: 'ImList',  properties: {    name: 'string',    rid: 'string',    lastMessage: 'string',    time: 'string',  },};

Code : init = async () => {    try {      Realm.open({ schema: CHAT_LIST_SCHEMA }).then((realm) => {        let cachedData = realm.objects('ImList');        console.log('Cached Data', cachedData);        if (cachedData === '') {          console.log('called123');          this.setState({ data: cachedData });        } else {          console.log('called');        const result = await RocketChat.getIMlist(); // API Call        const data = await RocketChat.getRoomsList(result); // Filtering          realm.write(() => {            data.map((items) => {              realm.create('ImList', {                name: items.name,                rid: items.rid,                lastMessage: items.lastMessage,                time: items.time,              });            });          });        }      });    } catch (error) {      console.log(error);    }  };

But it shows I cant call await outside an async function, but I only need to get data from the API, if the DB is empty. What to do?

When i click on the cross icon first time, it lowers the keyboard and on the second tab it clears the text in the search bar. I have tried other solutions as well but nothing worked. How can i clear the text on the first click?

I am using react-native and currently started using redux and created one app but when I am running that app on the emulator it is working fine. Then I connected my mobile with android 6 through USB on that also it is working. But in other devices of Android 8 it is not working then I have changed targetSdkVersion to 28 then also it not working I am not getting what is the problem.

Following is my package.json

{"name": "Demo","version": "0.0.1","private": true,"scripts": {"start": "node node_modules/react-native/local-cli/cli.js start","test": "jest"  },"dependencies": {"react": "16.6.3","react-native": "^0.57.8","react-native-flash-message": "^0.1.10","react-native-linear-gradient": "^2.5.3","react-native-modal-datetime-picker": "^6.0.0","react-native-navigation": "^2.8.0","react-native-tab-view": "^1.3.2","react-native-vector-icons": "^6.2.0","react-redux": "^6.0.1","redux": "^4.0.1","redux-thunk": "^2.3.0"  },"devDependencies": {"babel-core": "^7.0.0-bridge.0","babel-jest": "24.0.0","jest": "24.0.0","metro-react-native-babel-preset": "0.51.1","react-test-renderer": "16.6.3"  },"jest": {"preset": "react-native"  }}

android/build.gradle

buildscript {    ext {        buildToolsVersion = "28.0.3"        minSdkVersion = 19        compileSdkVersion = 28        targetSdkVersion = 28        supportLibVersion = "28.0.0"    }    repositories {        google()        mavenLocal()        mavenCentral()        jcenter()    }    dependencies {        classpath 'com.android.tools.build:gradle:3.2.1'        // NOTE: Do not place your application dependencies here; they belong        // in the individual module build.gradle files    }}allprojects {    repositories {        google()        mavenCentral()        mavenLocal()        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://jitpack.io' }    }}task wrapper(type: Wrapper) {    gradleVersion = '4.7'    distributionUrl = distributionUrl.replace("bin", "all")}subprojects { subproject ->    afterEvaluate {        if ((subproject.plugins.hasPlugin('android') || subproject.plugins.hasPlugin('android-library'))) {            android {                variantFilter { variant ->                    def names = variant.flavors*.name                    if (names.contains("reactNative51") || names.contains("reactNative55")) {                        setIgnore(true)                    }                }            }        }    }}

I am not getting where is the problem. Thanks in advance

When i click on the cross icon first time, it lowers the keyboard and on the second tap it clears the text in the search bar. I have tried other solutions as well but nothing worked. How can i clear the text on the first click?

    return (<View style={styles.FlatList_header}><View style={styles.header_style}><Input            autoFocus={true}            style={styles.textInputStyle}            onChangeText={text => this.search(text)}            value={this.state.text}          /><Icon            name="close"            style={styles.crossIcon}            onPress={() => {              this.search('');            }}          /></View></View>    );  };  render() {    const {data, onPress} = this.props;    return (<><SafeAreaView          style={{flex: 1, backgroundColor: customColor.defaultGreen}}><View style={styles.MainContainer}><FlatList              data={data}              renderItem={({item}) => (<View                  style={{                    flex: 1,                    borderWidth: 0.5,                    borderColor: customColor.textLightGrey,                  }}><Text                    style={styles.FlatList_Item}                    onPress={() => onPress(item)}>                    {item?.taskName}</Text></View>              )}              enableEmptySections={true}              ListHeaderComponent={this.Render_FlatList_Sticky_header}              keyExtractor={item => item.id}            /></View></SafeAreaView></>    );  }}

In my scenario, I need to convert timestamp value to specific time format in react native. I tired below code but can't able to achieve exact formate output. How to achieve it?

 var dateTime = new Date(23456789 * 1000);    this.setState({DateTime:('0'+ dateTime.getUTCDate()).slice(-2) +'/'+ ('0'+ dateTime.getUTCMonth()).slice(-2) +'/'+ dateTime.getUTCFullYear() +''+ ('0'+ dateTime.getUTCHours()).slice(-2)        });

Exact output expecting : Wed, 2/01/2000 - 1.10 AM

I'm in the process of migrating a React Native project from react-native version 0.58.5 to 0.60.4.

For the Android part I've done all the changes mentioned here

I let Hermes disabled in my app build.gradle file:

project.ext.react = [    entryFile: "index.js",    enableHermes: false,  // clean and rebuild if changing]...def jscFlavor = 'org.webkit:android-jsc:+'def enableHermes = project.ext.react.get("enableHermes", false);...dependencies {    ...    if (enableHermes) {      println 'Hermes is enabled'      def hermesPath = "../../node_modules/hermesvm/android/";      debugImplementation files(hermesPath +"hermes-debug.aar")      releaseImplementation files(hermesPath +"hermes-release.aar")    } else {      println 'Hermes is disabled'      implementation jscFlavor    }}...

I can see the Hermes is disabled print at build time. And this is exactly what I want.

When launching the Android app with react-native run-android I get the following crash at startup :

FATAL EXCEPTION: create_react_contextE  Process: com.reactnativetestapp, PID: 21038E  java.lang.UnsatisfiedLinkError: couldn't find DSO to load: libhermes.soE      at com.facebook.soloader.SoLoader.doLoadLibraryBySoName(SoLoader.java:738)E      at com.facebook.soloader.SoLoader.loadLibraryBySoName(SoLoader.java:591)E      at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:529)E      at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:484)E      at com.facebook.hermes.reactexecutor.HermesExecutor.<clinit>(HermesExecutor.java:20)E      at com.facebook.hermes.reactexecutor.HermesExecutorFactory.create(HermesExecutorFactory.java:27)E      at com.facebook.react.ReactInstanceManager$5.run(ReactInstanceManager.java:949)E      at java.lang.Thread.run(Thread.java:764)

After some research I could see this crash occurs for people wanting to enable Hermes and that has a wrong gradle configuration : [0.60.3] App crash on startup when enabling Hermes (enableHermes: true)

Why am I getting this crash while Hermes is disabled?

Note that when setting enableHermes to true no crash occurs.

When I develop hybrid apps with React Native. Does the JavaScript code I write transform into Java-Code or Java-Bytecode for the Dalvik/ART Runtime when I create an Android-App from my React Native code? Or are just the UI components compiled into native UI components? Or does a library like the Fetch API compile the JavaScript code into Java-Code or Java-Bytecode?

Modal closes automatically without any error when I click on the last button of the list or the button aligned with the bottom of the screen and focus on the TextInput. This happens only on android real devices. The issue doesn't happen on iOS or Android emulator.

import React, {useState} from 'react';import {  FlatList,  TouchableOpacity,  Button,  Modal,  TextInput,} from 'react-native';const data = [  0,  1,  2,  3,  4,  5,  6,  7,  8,  9,  0,  1,  2,  3,  4,  5,  6,  7,  8,  9,  0,  1,  2,  3,  4,  5,  6,  7,  8,  9,];const Item = () => {  const [state, setState] = useState(false);  return (<><TouchableOpacity style={{marginTop: 10}}><Button title="Open" onPress={() => setState(true)} /></TouchableOpacity><Modal visible={state}><TextInput placeholder="Type" /><Button title="Close" onPress={() => setState(false)} /></Modal></>  );};const App = () => {  return <FlatList data={data} renderItem={() => <Item />} />;};export default App;

On my react-native application which uses firebase cloud messaging, I wanted to receive a push notification on all app states (foreground, background, closed) so I followed this answer and the notification is shown.

Then Pressing the notification I want to redirect to a specific route regarding data in the notification object. which works when the app is in the foreground.

But;

• when the app is in the background or closed, pressing the notification does not open the application.
• When the app is the foreground, pressing the notification, works but the notification does not disappear and remains in the notification bar (or whatever it is called).

int he following code;

• All listeners are removed on componentWillUnmount, and when the appState changes to background..

• Before adding the foreground support pressing notification was opening the app

  versions in the app:"react": "16.8.3","react-native": "0.59.10","react-native-firebase": "5.2.0",

The code is

async componentDidMount(){await setupFirebase()}private async setupFirebase(): Promise<void> {    const enabled = await firebase.messaging().hasPermission();    if (enabled) {      /** some code */    } else {      // user doesn't have permission      try {        await firebase.messaging().requestPermission();      } catch (error) {        console.log(error);      }    }    if (Platform.OS === 'android') {      // Build a channel      const channel = new firebase.notifications.Android.Channel('foreground_notifications','Foreground Notifications',        firebase.notifications.Android.Importance.Max,      ).setDescription('Channel to receive notifications when app is active');      firebase.notifications().android.createChannel(channel);    }    this.removeNotificationListener = firebase.notifications().onNotification((ntf: Notification) => {      if (Platform.OS === 'android') {        const localNotification = new firebase.notifications.Notification()          .setNotificationId(ntf.notificationId)          .setTitle(ntf.title)          .setSubtitle(ntf.subtitle)          .setBody(ntf.body)          .setData(ntf.data)          .android.setChannelId('foreground_notifications')          .android.setPriority(firebase.notifications.Android.Priority.High);        firebase          .notifications()          .displayNotification(localNotification)          .catch((err) => console.error('Foreground notification error!', err));      } else if (Platform.OS === 'ios') {        const localNotification = new firebase.notifications.Notification()          .setNotificationId(ntf.notificationId)          .setTitle(ntf.title)          .setSubtitle(ntf.subtitle)          .setBody(ntf.body)          .setData(ntf.data)          .ios.setBadge(ntf.ios.badge);        firebase          .notifications()          .displayNotification(localNotification)          .catch((err) => console.error('Foreground notification error!', err));        console.log('IOS foreground notification with local notification DONE!');      } else {        Alert.alert();      }    });    // If your app is closed, you can check if it was    // opened by a notification being clicked / tapped / opened as follows:    const notificationOpen: NotificationOpen = await firebase.notifications().getInitialNotification();    if (notificationOpen) {      const {doc_id} = notificationOpen.notification.data      this.navigationToTheID(doc_id);    }    // If your app is in the foreground, or background, you can    // listen for when a notification is clicked / tapped / opened as follows:    this.removeNotificationOpenedListener = firebase      .notifications()      .onNotificationOpened((ntfOpened: NotificationOpen) => {        console.log('onNotificationOpened', notificationOpen);        this.navigationToNotification(ntfOpened);      });    this.removeOnNotificationDisplayed = firebase.notifications().onNotificationDisplayed((notification) => {      console.log(`%c onNotification displayed: `, 'color:green;', notification);    });  }  /**    These functions are called on unmount and/or apostate change to background    removeNotificationListener()    removeNotificationOpenedListener()    removeOnNotificationDisplayed()  */

I created a component at react-native, but the text of the button is always at uppercase, someone knows why it doesn't take the text that pass, because I want to show 'Login', but it shows 'LOGIN'

import React, { Component } from 'react';import { View, Button} from 'react-native';import LabelApp from "../../config/labels.app";const labelApp = LabelApp.loginView;export default class Login extends Component {  constructor(props){    super(props);    this.handleClickBtnEnter = this.makeLogin.bind(this);  }  makeLogin() {  }  render() {    return (<View><Button title= {labelApp.textButtonLogin} onPress={this.handleClickBtnEnter}/></View>    );  }}

Label of component

const LabelApp = {    loginView: {        textButtonLogin: 'Ingresar',    },}export default LabelApp;

The visualization

I want to create custom module in android with react native.I have files

• /java/com/my_app/MainApplication.java

• /java/com/my_app/MyCustomModule.java

In MyCustomModule.java

import SomeExternalLibrary;public class MyCustomModule extends ReactContextBaseJavaModule {   @ReactMethod   public void build(String key){      new SomeExternalLibrary.build(           this, //here is i get error            key          )   }}

If i run this get error

incompatible types: MyCustomModule cannot be converted to Application

If i put it in onCreate method in MainApplication.java it worked.

public class MainApplication extends Application implements ReactApplication {  @Override  public void onCreate(){     super.onCreate();     new SomeExternalLibrary.build(this, "key")  }}

Is there any way to access Application in MyCustomModule?

Can anyone help fix this? I have been working on this react-native project, all of a sudden I receive this error when I try to run

Android resource linking failed Output: error: resource style/Theme.AppCompat.Light.NoActionBar (aka com.gp:style/Theme.AppCompat.Light.NoActionBar) not found. error: resource style/Theme.AppCompat.Light.Dialog (aka com.gp:style/Theme.AppCompat.Light.Dialog) not found. error: resource style/Theme.AppCompat.Light.Dialog (aka com.gp:style/Theme.AppCompat.Light.Dialog) not found. error: resource style/Theme.AppCompat.Light.Dialog (aka com.gp:style/Theme.AppCompat.Light.Dialog) not found. error: resource style/Theme.AppCompat.Light.Dialog (aka com.gp:style/Theme.AppCompat.Light.Dialog) not found. error: resource style/Theme.AppCompat.Light.NoActionBar (aka com.gp:style/Theme.AppCompat.Light.NoActionBar) not found. C:\react\gp\android\app\build\intermediates\incremental\mergeReleaseResources\merged.dir\values\values.xml:105: error: style attribute 'attr/windowActionBar (aka com.gp:attr/windowActionBar)' not found. error: failed linking references.

Command: C:\Users\Dd.gradle\caches\transforms-1\files-1.1\aapt2-3.2.1-4818971-windows.jar\ffd21d5284a7af29d2ccd91cde565e5a\aapt2-3.2.1-4818971-windows\aapt2.exe link -I\ C:\Users\Dd\AppData\Local\Android\sdk\platforms\android-28\android.jar\ --manifest\ C:\react\gp\android\app\build\intermediates\merged_manifests\release\processReleaseManifest\merged\AndroidManifest.xml\ -o\ C:\react\gp\android\app\build\intermediates\processed_res\release\processReleaseResources\out\resources-release.ap_\ -R\ @C:\react\gp\android\app\build\intermediates\incremental\processReleaseResources\resources-list-for-resources-release.ap_.txt\ --auto-add-overlay\ --java\ C:\react\gp\android\app\build\generated\not_namespaced_r_class_sources\release\processReleaseResources\r\ --custom-package\ com.gp\ -0\ apk\ --output-text-symbols\ C:\react\gp\android\app\build\intermediates\symbols\release\R.txt\ --no-version-vectors Daemon: AAPT2 aapt2-3.2.1-4818971-windows Daemon #0 Output: error: resource style/Theme.AppCompat.Light.NoActionBar (aka com.gp:style/Theme.AppCompat.Light.NoActionBar) not found. error: resource style/Theme.AppCompat.Light.Dialog (aka com.gp:style/Theme.AppCompat.Light.Dialog) not found. C:\Users\Dd.gradle\caches\transforms-1\files-1.1\react-native-0.58.5.aar\2e0dcdd9748c262893e29283ff38db41\res\values\values.xml:105:5-114:11: AAPT: error: style attribute 'attr/windowActionBar (aka com.gp:attr/windowActionBar)' not found.

error: failed linking references. Command: C:\Users\Dd.gradle\caches\transforms-1\files-1.1\aapt2-3.2.1-4818971-windows.jar\ffd21d5284a7af29d2ccd91cde565e5a\aapt2-3.2.1-4818971-windows\aapt2.exe link -I\ C:\Users\Dd\AppData\Local\Android\sdk\platforms\android-28\android.jar\ --manifest\ C:\react\gp\android\app\build\intermediates\merged_manifests\release\processReleaseManifest\merged\AndroidManifest.xml\ -o\ C:\react\gp\android\app\build\intermediates\processed_res\release\processReleaseResources\out\resources-release.ap_\ -R\ @C:\react\gp\android\app\build\intermediates\incremental\processReleaseResources\resources-list-for-resources-release.ap_.txt\ --auto-add-overlay\ --java\ C:\react\gp\android\app\build\generated\not_namespaced_r_class_sources\release\processReleaseResources\r\ --custom-package\ com.gp\ -0\ apk\ --output-text-symbols\ C:\react\gp\android\app\build\intermediates\symbols\release\R.txt\ --no-version-vectors Daemon: AAPT2 aapt2-3.2.1-4818971-windows Daemon #0

I ejected my project from expo workflow managed project because its size is too big. But when i try to build for android using gradlew assembleRelease command i get the arrow saying ":app:bundleReleaseExpoUpdatesAssets FAILED". Here is the full error.

C:\Users\Administrator\Desktop\expo\Ejected>expo bundle-assets C:\Users\Administrator\Desktop\expo\Ejected --platform android --dest C:\Users\Administrator\Desktop\expo\Ejected\android\app\build\intermediates\merged_assets\release\out[23:04:44] Error: Error reading the manifest file. Make sure the path 'C:\Users\Administrator\Desktop\expo\Ejected\android\app\src\main\assets\app.manifest' is correct.

Error: ENOENT: no such file or directory, open 'C:\Users\Administrator\Desktop\expo\Ejected\android\app\src\main\assets\app.manifest'[23:04:44] Before making a release build, make sure you have run 'expo publish' at least once. Learn more. (ΓÇïhttps://expo.fyi/release-builds-with-expo-updatesΓÇï)

Task :app:bundleReleaseExpoUpdatesAssets FAILED

FAILURE: Build failed with an exception.

• What went wrong:Execution failed for task ':app:bundleReleaseExpoUpdatesAssets'.

  Process 'command 'cmd'' finished with non-zero exit value 1

I can succesfully build debug apk using gradlew assembleDebug

I have read and tested a lot of issues but I still can not get geolocation on Android.

I use navigator.geolocation.getCurrentPosition, on iOS everything works fine, but on Android I have no answer to this function, either success or error.

I have installed react-native-permissions to make sure that the user has activated the permissions but it does not change anything because it says that everything is "authorized".

I noticed that it came from GPS of the device. If I activate it manually, everyting works fine. However, I can not find a way to activate it for the user. On iOS, if GPS is not activated, I fall in the error callback and tell user to activate it, but on android, nothing is happennig.

I don't understand why I can't get geolocation only with getCurrentPosition (I have ACCESS_COARSE_LOCATION and ACCESS_FINE_LOCATION in manifest).

Here a part of my code:

componentDidMount() {navigator.geolocation.getCurrentPosition(  (position) => {    //do my stuff with position value  },  (error) => {    Permissions.getPermissionStatus('location')    .then((response) => {      if (response !== "authorized") {        Alert.alert("Error","We need to access to your location",          [            {              text: "Cancel",              onPress: () => {                // do my stuff              }, style: 'cancel'            },            {              text: "Open Settings",              onPress: () => Permissions.openSettings()            }          ]        );      } else {        // do my stuff      }    });  },  { enableHighAccuracy: true, timeout: 2000, maximumAge: 1000 });}

Does anyone have any idea ?

Thank you

I have a react native project that is suppose to print a ticket using a little Bluetooth printer.In order to access bluetooth functionality I'm using react-native-ble-plx library.

My question is, once I connect to the device, how do I send the information to the printer?I have no idea from where I'm supposed to get the characteristicUUID and serviceUUID. I have my doubts with my code, here is what I have so far:

(() => {  bleManager.startDeviceScan(null, null, (error, device) => {    console.log("Scanning...");    if (error) {      console.log(error);      return;    }    if (device.name === "XXZEJ183806056") {      console.log("Conectando a impresora...");      bleManager.stopDeviceScan();      device.connect()        .then((device) => {          console.log("Descubriendo servicios y caracteristicas...");          return device.discoverAllServicesAndCharacteristics();        })        .then((device) => {          console.log("Conectado a: ", device.id);          device.writeCharacteristicWithResponseForService(...);        })        .catch((error) => {          console.log("error", error.message);        });    }  });})();

I'm building a React Native app and currently testing it via Android Emulator. My API calls to my backend API are failing with 401.

The API is on the Internet and it's an HTTPS URL. The strange thing is that I don't see any network activity in Fiddler and no errors on the console. So, I’m not sure if the call is really being made. I only know that I received a 401 response because I placed a debugger within my fetch statement and the response object is showing a 401 error.

Anyone aware of any issues with API call failures through Android emulator?

I am having trouble receiving FCM topic messages on our React Native App (using react-native-firebase). We have a Node.js API to manage notifications and we are using the Firebase Admin SDK. Currently we are managing user groups via Topics, and the overall flow is:

1. Registration tokens are generated on the app upon login

2. Registration tokens are sent to the API along with user's group.

3. The API subscribes the token to the user group topic (unique string based on user group id) with:

admin.messaging().subscribeToTopic(registrationToken, userGroup)

4. Messages to user groups are sent via:

admin.messaging().send({ topic: 'some-user-group', notification: {  title: 'some title',  body: 'some body' }})

The problem is that the receipt of messages is unreliable at best. Sometimes a device will post it's token to the API and be able to receive a message right away, however sometimes it will take 30 minutes or more for messages to start appearing (if they do at all). I have only tested this in an android emulator environment.

Is there a problem with my approach? Are topics the wrong solution for this use-case? Thank you.

I have an EXPO app and I already created and published it on Google Play Store. The Google App Signing is activated for this project. Now I want to update this APK in this project. I used the command 'expo build:android' to build the updated APK. But when I send it to my project on Play store, it says that the certificate is wrong ('Upload failed You uploaded an APK that is signed with a different certificate to your previous APKs. You must use the same certificate').

I can't seem to get Admob banners to display anything except a white box. I can confirm that the adUnitID is correct and the ad unit is enabled. My app.json android part:

"android": {"config": {"googleMobileAdsAppId": "xxx"  },"package": "xxx","versionCode": 1},

And here is the Admob banner component within my app.js:

<View style={styles.container}>    {Platform.OS === 'ios'&& <StatusBar barStyle="default" />}<AppNavigator /><View style={styles.adContainer}><AdMobBanner        bannerSize='fullBanner'        adUnitId='xxx'        onDidFailToReceiveAdWithError={() => console.log('error')}        servePersonalizedAds      /></View> </View> const styles = StyleSheet.create({   container: {     flex: 1,     backgroundColor: '#fff',   },   adContainer: {     borderColor: 'red',     borderWidth: 1,   }, });

Looking at the logs, it never actually prints out "error." I put the border around the ad container to confirm that it is being displayed, if I change the bannerSize prop I can see it changing size so it is allocating the space for the banner correctly. This is Expo SDK version 35.0.0 and I've only tested on an Android physical device. When I create an apk it similarly shows the banner as only white.