Develop Reference

React native: requestTechnology called only if the app is brought from background to foreground

I am currently working on a simple app for scanning, reading data from an NFC card (in my case a Mifare NFC card) and displaying in on the screen. I have built it using this example.
The app should work both on Android and iOS, but for the moment, I have tested it only on an android device (an Oppo device with NFC capablities and developer mode activated).
At the launch of the app, everything seems to be working fine, the NfcManager has been successfully started, but there is an issue when the app tries to request the technology for reading the card, namely, I have to bring the app first in the background and then again in the foreground so that the message requestTechnology success is displayed, otherwise, it's simply not called.
After this, the promise NfcManager.getTag() gets rejected with the error message: no reference available.
Here is my code:
componentDidMount() {
NfcManager.start({
onSessionClosedIOS: () => {
alert('ios session closed');
},
}).then(() => console.warn('NfcManager started')) // successfully started
.catch((error) => alert('Error starting NfcManager: ', error));
}
{... componentWillUnmount and render method ...}
_read = async () => {
try {
let tech = Platform.OS === 'ios'
? NfcTech.MifareIOS : [NfcTech.MifareClassic, NfcTech.NfcA, NfcTech.IsoDep, NfcTech.Ndef];
let resp = await NfcManager.requestTechnology(tech, {
alertMessage: 'Ready to do some custom Mifare cmd!'
})
.then((value) => alert('requestTechnology success', value)) // here the value is empty, so no NfcTech
.catch(() => console.warn('reuqestTechnology error'));
const tag = await NfcManager.getTag()
.then((value) => alert('Tag event: ', value))
.catch((err) => console.warn('error getting tag: ', err));
// this part of the code is reached, but not working properly since the tag.id is not correctly retrieved
if (Platform.OS === 'ios') {
resp = await NfcManager.sendMifareCommandIOS([0x30, 0x00]);
} else {
resp = await NfcManager.transceive([0x30, 0x00]);
}
console.warn('Response: ', resp);
this._cleanUp();
} catch (ex) {
console.warn(ex);
this._cleanUp();
}
}
If I scan the card against the device, it makes the sound like it has been scanned, but nothing seems to be displayed.
Does anyone know why does the app needs to be brought to the background so that the technology is requested? And second, does the fail of the getTag() method have anything to do with it?
I hope anyone can help me with this issue, I have been struggling with this problem for quite some time and I haven't found any solution.

May be related to github.com/revtel/react-native-nfc-manager/issues/423 ?? there seems to be a scenario where this package does not correctly configure enableForegroundDispatch and manually pausing and resuming the App by sending it to the background would fix it.

Ionic Force App Update crashes when calling the function to update the App

I have an Ionic 3 App that needs to use Force Update to all users of the App. I used this package called Ionic App Update. I created an small express server that will just serve the client for an updates.
Here is my code in my update.xml in the server or backend
<update>
<version>0.0.2</version>
<name>MyApp</name>
<url>http://192.168.214.27:3346/public/android-debug.apk</url>
</update>
and in my server.js
const express = require('express')
const app = express()
app.use('/public', express.static('public'))
app.get('/', (req, res) => {
shell.exec('./update.sh')
})
app.listen(3336, () => {})
The server is working fine there is no errors
But when I try to call the function of the App Update plugin the device crashes every time.
Here is my code in my app.component.ts
constructor() {
this.update()
}
update() {
console.log('Update check')
const updateUrl = 'http://192.168.214.27:3346/public/update.xml';
this.appUpdate.checkAppUpdate(updateUrl).then(() => { console.log('Update available') }).catch(err => {
console.log(err)
console.log('No update')
});
}
I am calling the update function every time the app component constructor is initialize.
But when I call the function the app crashes
Is this more of an android version issue or what?
Appreciate if someone could help.
Thanks in advance.

This line <version>0.0.2</version> seems to be the problem. This isn't the format for android version numbers. As per cordova's documentation it is
Expressed in major/minor/patch notation.
For example version 30.20.48 would be written as 302048.
Read More:
config.xml - https://cordova.apache.org/docs/en/latest/config_ref/
Android Platform Guide - https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#setting-the-version-code

Prevent React Native App running until it has been updated with code-push

I wanted to know if it is possible to prevent users from accessing any screen in app until code-push updates, Is this possible? if possible, could you please kindly show me an example, the goal is preventing the app to launch until update has been downloaded.

You use a state like loading to record if update has been downloaded.
In render(), return the normal app content only when loading is false. see my code below.
componentDidMount() {
this.setState({loading: true});
fetch(url).then(() => this.setState({loading: false})
}
render() {
const {loading} = this.state;
return (
{loading && <Text>Loading</Text>}
{!loading && <View>You normal app content</View>}
)
}

How to open Other app from ReactNative?

How to open other apps (Gmail, Camera) from ReactNative. How can I pass data from current scene to other app?

I found this npm library react-native-app-link which can open other apps. This is based on deep linking, if you have any deep links then this library can help. This doesn't open apps just by giving the android package name or ios app id.
https://github.com/FiberJW/react-native-app-link

you can mange opening other apps using Linking

Code sample for opening the dialer
const urlToOpen = 'tel:1234567890';
Linking.openURL(urlToOpen);
You can refer to the official doc here, it just predefines some applications, which can be opened.
However, if the question is about to open just about any application, I hope there is no solution till now.

react-native-app-link has some redundant config (e.g. appStoreLocale parameter), so I wrote my own realization using their code:
import { Alert, Platform, ToastAndroid } from 'react-native';
const isIos = Platform.OS === 'ios';
const showNotification = (text) => isIos
? Alert.alert(text)
: ToastAndroid.show(text, ToastAndroid.SHORT);
const openApp = ({ url, appStoreId, playMarketId, name }) => {
Linking.openURL(url).catch(err => {
if (err.code === 'EUNSPECIFIED') {
Linking.openURL(
isIos
? `https://apps.apple.com/app/id${appStoreId}`
: `https://play.google.com/store/apps/details?id=${playMarketId}`,
);
} else {
showNotification(`Can't open ${name} app`);
}
});
};
It tries to open the app by the specified link, and if the user doesn't have such one, it opens its page in AppStore or Play Market.

Fetch not working on React Native Android debug

I'm trying to create a very simple ReactNative app to play around with GraphQL and RN on an Android (I'm already familiar with getting it to work on an iPhone).
But I'm running into a problem -- my root component places a get request to an API. Although that request works perfectly when I spin up an XCode simulator, it completely fails when I run the Android version on my phone.
The Android/iOS versions are for now completely identical. The two index files both use react-native-router-flux and are identical, and they import shared components.
Here's the simplified code of the component:
constructor(props) {
super(props);
this.state = {
source: 'myGraphQLEndpoint'
}
}
componentDidMount() {
if (this.props.drill) { return null; }
this.serverRequest = fetch(this.state.source)
.then((result) => result.json())
.then((json) => {
this.setState({
drill: json.data.drill
});
});
}
componentWillUnmount() {
this.serverRequest.abort();
}
render() {
const { drill } = this.state;
if (!drill) { return null; }
... some view stuff
}
On my iOS simulator, this works perfectly. On my Android phone, it never sets state, and so doesn't get past the if (!drill) line. If I instead set the state to the expected API data directly (instead of making an actual call), the Android app works just fine (with the non-live data).
The phone IS connected to the internet.
Any idea what's wrong?
PS -- I've tried a number of variants, including:
Changing the request to have only one .then, which calls response.json().data.drill.
Assigning the response to a variable defined outside of the request, and setting state to equal that (which sets state to what looks like a response buffer [42, 36, ... which can't be printed to the screen.
No dice.