Develop Reference

how to debug network responce in react native

i am trying to debug my code in react native here i have a axios post request the only responce is i get when there is a error is axios error
rather than that i am looking to debug my code just like in react js by inspect element and network tab
currently i open my app using npx react-native run-andoid this opens the app in a emulator and is really diffcult to debug my code can anyone suggest a better method for debugiing
var Data56 = {
name: name,
email: email,
babyname: babyname,
phone: nuber,
baby_date: date,
};
}
axios
.post('http://10.0.2.2:8000/api/register', Data56, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
})
.then(res => {
props.navigation.navigate('Home_scrren', {data: Data56});
})
.catch(error => {
alert(error);
});
}

Follow this Step:-
(1) First you need to shake the device and open the debug option, it will redirect you to chrome.
(2) You need to inspect that and open the console tab.
(3) You need to add breakpoints in VSCode or add breakpoints using chrome.
(4) then simply Reload the application, using that you can do step-by-step debugging.

if (__DEV__) {
global.XMLHttpRequest = global.originalXMLHttpRequest
? global.originalXMLHttpRequest
: global.XMLHttpRequest;
global.FormData = global.originalFormData
? global.originalFormData
: global.FormData;
fetch; // Ensure to get the lazy property
if (window.__FETCH_SUPPORT__) {
// it's RNDebugger only to have
window.__FETCH_SUPPORT__.blob = false;
} else {
/*
* Set __FETCH_SUPPORT__ to false is just work for `fetch`.
* If you're using another way you can just use the native Blob and remove the `else` statement
*/
global.Blob = global.originalBlob ? global.originalBlob : global.Blob;
global.FileReader = global.originalFileReader
? global.originalFileReader
: global.FileReader;
}
}
add this code to root index.js
turn on debug
Check tab network like web,
we can see request and response,
one more option, you can add reactotron or flipper, this tool will log anything like network redux action..., without open debug mode
Hope this help you

1]firstly you can see this video
2]exapmle with axios
3] 2nd go to your console window and press D and see your emulator like this like this
if you press d in console window and see your output in your emulator
like this then then on the last option "Debug"
it will navigate to chrome screen here is screenshot
then write click on a screen and see option like inspect here is
screenshot
then then new screen will appear and go to consol tab there you can
see your data like this
I This this will help you

I'm using axios and fetch data and you can see in chrome i will get all data in debug mood also I'm my step which one I post here
import React, { useEffect, useState } from "react";
import { View, SafeAreaView, Text, StyleSheet, ScrollView, TouchableOpacity, FlatList } from "react-native";
import axios from "axios";
const App = () => {
const [list, setList] = useState([]);
useEffect(() => {
getList()
}, [])
const getList = () => {
axios({
url: "https://fakestoreapi.com/users?limit=5",
}).then((res) => {
var response = res.data;
console.log(response)
setList(response)
})
}
return (
<FlatList
data={list}
renderItem={({ item }) =>
<Text>{item}</Text>
}
/>
)
}
export default App;

Ionic native Ibeacon ReferenceError: device is not defined

TLDR: Ibeacon module example does not work
I have a small app in Ionic 5 using capacitor.
I want to use the Ibeacon library, but I get the error :
Ressource for the library is scarse and I have only found people having issue when the delegate is undefined causing the LocatonManager error here.
I also tried to look what is causing the error, apparently the device mentioned is part of the device library. So I check if the Ibeacon library properly import the device one and it does in node_modules\cordova-plugin-ibeacon\plugin.xml, like so :
<!-- Version is set to anything because the only feature we use is the device.platform property which was available
since forever. The added benefit is that we don't force the consumers of this plugin to use a certain version of
the device plugin. -->
<dependency id="cordova-plugin-device" version="*" />
My class is pretty much the example given in the Ibeacon page:
import { Component, OnInit } from '#angular/core';
import { IBeacon } from '#ionic-native/ibeacon/ngx';
import { Platform } from '#ionic/angular';
#Component({
selector: 'app-beacon',
templateUrl: './beacon.page.html',
styleUrls: ['./beacon.page.scss'],
})
export class BeaconPage implements OnInit {
public beacons: any[] = [];
constructor(
private ibeacon: IBeacon,
private platform: Platform,
private _utils: UtilsService
) {}
ngOnInit() {
console.log('ngOnInit');
if (!this.platform.is('android')) {
console.log('Beacon related activity only available on Android');
return;
}
// create a new delegate and register it with the native layer
let delegate = this.ibeacon.Delegate();
console.log('delegate :', delegate);
// Subscribe to some of the delegate's event handlers
delegate.didRangeBeaconsInRegion().subscribe(
(data) => console.log('didRangeBeaconsInRegion: ', data),
(error) => console.error()
);
delegate.didStartMonitoringForRegion().subscribe(
(data) => console.log('didStartMonitoringForRegion: ', data),
(error) => console.error()
);
delegate.didEnterRegion().subscribe((data) => {
console.log('didEnterRegion: ', data);
});
let beaconRegion = this.ibeacon.BeaconRegion(
'deskBeacon',
'F7826DA6-ASDF-ASDF-8024-BC5B71E0893E'
);
this.ibeacon.startMonitoringForRegion(beaconRegion).then(
() => console.log('Native layer received the request to monitoring'),
(error) =>
console.error('Native layer failed to begin monitoring: ', error)
);
}
}
Also I imported the IBeacon module inside my module.ts like so :
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
import { IonicModule } from '#ionic/angular';
import { BeaconPageRoutingModule } from './beacon-routing.module';
import { BeaconPage } from './beacon.page';
import { IBeacon } from '#ionic-native/ibeacon/ngx';
#NgModule({
imports: [CommonModule, FormsModule, IonicModule, BeaconPageRoutingModule],
declarations: [BeaconPage],
providers: [IBeacon],
})
export class BeaconPageModule {}
Did I forget to do something ? Why is device undefined ? Should I also import the device library ?
I should mention I have the device library installed.

Inside the lib they use the device to check the plataform, that is the code:
BeaconRegion.isValidUuid = function (uuid) {
// https://github.com/petermetz/cordova-plugin-ibeacon/issues/328
// If we are on Android, then allow the UUID to be specified as a wild-card (omitted)
var isAndroid = device && device.platform === "Android";
if (uuid === BeaconRegion.WILDCARD_UUID && isAndroid) {
return true;
}
var uuidValidatorRegex = this.getUuidValidatorRegex();
return uuid.match(uuidValidatorRegex) != null;
};
You can check right here https://github.com/petermetz/cordova-plugin-ibeacon/blob/270ffbbc12159861a16e5e81481103c1e09139cb/www/model/BeaconRegion.js#L38
So, you have to install the following plugin-in https://ionicframework.com/docs/native/device
npm install cordova-plugin-device
npm install #ionic-native/device
ionic cap sync
Then the find this device reference and the problem will be solved.

Is there a native solution to pick files in NativeScript Angular?

I am trying to implement a feature to let the user upload a file in my NativeScript Angular Project. NativeScript does not seem to have a native implementation of a file picker and there are limited plugins available that can do the job. Plus they have their own set of problems. The closest I have come to a workable solution is using the nativescript-mediafilepicker and that opens a blank page like the one below instead of the file explorer.
I exactly followed the documentation and can't figure out why it's not working. Here is the service I wrote:
payload.service.ts
import { Injectable } from '#angular/core';
import { Mediafilepicker, ImagePickerOptions, VideoPickerOptions, AudioPickerOptions,
FilePickerOptions } from 'nativescript-mediafilepicker';
#Injectable({
providedIn: 'root'
})
export class PayloadService {
constructor() { }
pickFile(){
console.log('Pick File Payload Service requested');
const extensions = ['pdf'];
let options: FilePickerOptions = {
android: {
extensions: extensions,
maxNumberFiles: 1
},
ios: {
extensions: extensions,
multipleSelection: false
}
};
let mediafilepicker = new Mediafilepicker();
mediafilepicker.openFilePicker(options);
mediafilepicker.on("getFiles", function (res) {
let results = res.object.get('results');
console.dir('File Pick Success: ',results);
});
mediafilepicker.on("error", function (res) {
let msg = res.object.get('msg');
console.log('File Pick Error: ',msg);
});
mediafilepicker.on("cancel", function (res) {
let msg = res.object.get('msg');
console.log('File Pick Cancel: ',msg);
});
}
}
Can someone help me fix this or rather provide me with a native implementation? I don't need much customization options and user will only upload one file at a time.

Can't import firebase auth android

I'm new to React Native and have the following problem:
I import firebase auth in such way...
import React, { Component } from 'react';
import { Text } from 'react-native';
import { Button, Card, CardSection, Input } from './common';
import { auth } from 'firebase';
I just import it in my component and use it on log in button press.
class LoginForm extends Component {
state = { email: '', password: '', error: '' };
onButtonPress() {
debugger;
const { email, password } = this.state;
auth.auth().signInWithEmailAndPassword(email, password)
.catch(() => {
auth.auth().createUserWithEmailAndPassword(email, password)
.catch(() => {
this.setState({ error: "Authentication failed." });
});
});
debugger;
}
My App module looks like this...Here I make some initialization for my app
import firebase from '#firebase/app';
import LoginForm from './components/LoginForm'
Here I make some initialization for my app
componentWillMount() {
debugger;
firebase.initializeApp({
apiKey: 'somekey',
authDomain: 'somedomain',
databaseURL: 'someurl',
projectId: 'someid',
storageBucket: 'authentication-afcb6.appspot.com',
messagingSenderId: '253116783153'
});
debugger;
}
But my emulator shows me an error:

The problem is with your import statement I suppose. When using firebase I always used:
import firebase from 'firebase';
firebase.auth().<METHOD>
Or I think you could also import it like this if it's a named export and use it directly:
import {auth} from 'firebase';
auth().<METHOD>
Also hopefully you do know that you have to initialize your app as well using firebase.initializeApp({<CONFIG_DATA>}).

I suggest using react-native-firebase library. It uses native Android and iOS SDK under the hood, instead web javascript library.
Documentation
https://rnfirebase.io/docs/v5.x.x/installation/initial-setup
Android installation https://rnfirebase.io/docs/v5.x.x/installation/android
iOS installation https://rnfirebase.io/docs/v5.x.x/installation/ios

What is the version of firebase you are using?
Downgrading firebase to 5.0.3 is the only solution I find and I just tried myself and it works. For reference, here is the thread on firebase-js-sdk.

IONIC 2 send message to multiple recipients

So developing this IONIC 2 app, I discoverd that sending SMS to multiple recipients isnt so trivial at it should be.
After a long research I've found this post where people trys to deal with multiple SMS. But even using their specs it doesnt work properly.
They say we can use an array of strings representing multiple phone numbers. So far so good, except it works only for the first number.
If someone has now details on this functionality I would love to hear about it.
Thanks

import { SMS } from '#ionic-native/sms';
constructor( private sms: SMS ){
this.sendSMS();
}
sendSMS() {
var MultiNumber = [ '1234567890' , '9876543210' ];
this.sms.send(MultiNumber, 'hello all this is testing message');
}
try this it is working for me, Hope it is working for you too.

So after ages of research over internet I got this litle jam called cordova-plugin-sms ( dont confuse it with cordova-sms-plugin ).
As it says in their documentation they have a function sendSMS which reeeally sends messages to multiple recipients.
So my solution for integrating it in IONIC 2 is as follows :
ionic cordova plugin add cordova-plugin-sms
and my Ionic 2 class is :
import { Component } from '#angular/core';
import { NavController, ToastController } from 'ionic-angular';
import { Http, Response } from "#angular/http";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
declare let window: any;
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(private toastCtrl: ToastController, public navCtrl: NavController, public http: Http ) { }
ionViewDidLoad() {
this.startWhatchSMS();
}
// Android ONLY
startWhatchSMS() {
if (window.SMS) {
window.SMS.startWatch(() => {
//console.log("startWatch");
}, error => {
//console.log(error);
//console.log("error startWatch");
});
}
document.addEventListener('onSMSArrive', this.smsArived);
}
// Android ONLY
smsArived = (result: any) => {
//console.log(result);
let sms = result.data;
// put your code here...
}
sendTextMessage( ) {
window.SMS.sendSMS([ '1234567890' , '0987654321' ], 'Text message for multiple recipients',
(result) => {
console.log(result); // should be 'OK' string
}, (error) => {
console.log(error);
});
}
}
The sendTextMessage() function is called from the template by clicking an button.
Well thats it ... for me is working and hope will work for you too.
Cheers