I generate a qrcode using 'react-native-qrcode-svg' <QRCode size={100} value={deepLink} getRef={(c) => (svg = c)} />and I want to share the QR image using expo sharing, I tried this way but didn't work, gives me this error when sharing [Unhandled promise rejection: Error: Only local file URLs are supported (expected scheme to be 'file', got 'data'.]
I have a share button that calls this function
var svg: any;
let openShareDialogAsync = async () => {
if (!(await Sharing.isAvailableAsync())) {
alert(`Uh oh, sharing isn't available on your platform`);
return;
}
svg.toDataURL((link: any) => {
console.log(link);//the base64 string
Sharing.shareAsync('data:image/png;base64,' + link);
});
};
I'll appreciate it If someone can help me with it. I tried using react-native-share but didn't work with expo, I believe I need to eject the project in order to work with it.
Related
I am trying to implement an authentication login method through Azure AD with Firebase on my Expo app.
Here is an extraction of my code, which looks exactly like the Firebase documentation:
const signInWithMicrosoft = () => {
const auth = initializeAuth(firebaseApp);
signInWithPopup(auth, provider)
.then((result) => {
const credential = OAuthProvider.credentialFromResult(result);
const accessToken = credential.accessToken;
const idToken = credential.idToken;
navigation.navigate("Home")
})
.catch((error) => {
// Handle error.
});
}
When pressing the button to activate the function, the following error message shows up:
TypeError: (0, _auth.signInWithPopup) is not a function. (In '(0, _auth.signInWithPopup)(auth, provider)', '(0, _auth.signInWithPopup)' is undefined)
I tried importing the functions as:
import { signInWithPopup } from "firebase/auth"
and
import { signInWithPopup } from "firebase/compat/auth"
And neither of them seem to work.
Is there any way I can get this function to work, or the solution would be going another way around? I don't know if functions such as SignInWithPopup and SignInWithRedirect are supported in Expo, since it is a Mobile application.
If you have any tip, clue or information on using firebase auth methods in a Expo app, please share below and I will be very happy to read it and comment on.
I am trying to detect if a user takes a screenshot while using a smartphone app that I have built. I am building my project with React Native.
I have been told that I can possibly prevent screenshots for Android but not for iOS. but can I still detect whether a user attempts to take a screenshot so that I can at least send a warning via Alert?
Thanks in advance
I tried react-native-screenshot-detector but it did not work
you can use this package it supports android&ios screenshot detecting react-native-detector
import {
addScreenshotListener,
removeScreenshotListener,
} from 'react-native-detector';
// ...
React.useEffect(() => {
const userDidScreenshot = () => {
console.log('User took screenshot');
};
const listener = addScreenshotListener(userDidScreenshot);
return () => {
removeScreenshotListener(listener);
};
}, []);
There is no package for it currently.
UPDATE 1
I removed return from code and now links work on IOS.
But on android I can't open any app. Any idea?
I am trying to open different apps from my app.
return Linking.openURL(“twitter://“);
return Linking.openURL(“instagram://“);
But it doesn’t work. I configured IOS by documentation. On android doesn’t work too. While...
return Linking.openURL(“tripadvisor://“);
Work just fine.
Any idea why I can’t open other apps.
This is code that I am using (open app if installed or open store with it but sometimes even store doesn't open) what I did wrong:
let appUrl = "instagram://";
Linking.canOpenURL(appUrl).then(supported => {
if (!supported) {
Alert.alert("",
"",
[
{text: "go to store", onPress: this.openStorePress},
{text: "cancel", onPress: () => { }, style: 'cancel'},
],
{ cancelable: false }
);
} else {
return Linking.openURL(appUrl);
}
}).catch(err => {
console.error(err);
});
Your issue is related to the content of the url, twitter:// means nothing for the Android Twitter app, so it will not open.
For example, the following code should work:
Linking.openURL('twitter://timeline')
or
Linking.openURL('instagram://user?username=apple')
You have to find the rights url schemes (documentations are not very clear about it) that may be different between iOS and Android.
Twitter: How can I open a Twitter tweet using the native Twitter app on iOS?
Instagram: https://www.instagram.com/developer/mobile-sharing/iphone-hooks/ (all do not work on Android)
misc: https://pureoxygenlabs.com/10-app-url-schemes-for-marketers/
You have to find the rights URL schemes. Have look at my code
Instagram
Linking.openURL('instagram://user?username=apple')
.catch(() => {
Linking.openURL('https://www.instagram.com/apple');
})
Twitter
Linking.openURL('twitter://user?screen_name=apple')
.catch(() => {
Linking.openURL('https://www.twitter.com/apple');
})
Facebook
Linking.openURL('fb://page/PAGE_ID');
Linking.openURL('http://instagram.com/_u/USER_NAME');
Linking.openURL('http://instagram.com/_p/PICTURE');
Your code looks pretty solid, here's an example of how I open twitter in my app.
const twitterUrlScheme = `twitter://user?screen_name=${twitterUsername}`;
Linking.canOpenURL(twitterUrlScheme)
.then((supported) =>
Linking.openURL(
supported
? twitterUrlScheme
: `https://www.twitter.com/${twitterUsername}`
)
)
.catch((err) => console.error('An error occurred', err));
I think perhaps your issue might be the return Linking.openUrl, I'm not sure you need the return in that statement. Does it work if you remove the return? Otherwise, it might help to move your Alert outside of the then-block from canOpenUrl.
I have used only url and it's working both iOS and android
Linking.openURL('https://www.facebook.com/');
You haven't completed the " fot twitter and instagram, I don't know whether you made the same mistake in app too, if yes, fixing that might solve it.
Try to use a package like:
https://github.com/react-native-community/react-native-share
You can try to use only some of it's functions or look into the native code from there and create some bridge functions in the native code and then export them to be used in JS code.
Note: you will have to use real devices for the tests.
I want to access and run music files stored locally on android and ios devices.
I tried using react-native-fs but couldn't managed to access. So are there any other better libraries available to use it.
Answering my own question.
I was finally able to access the music files / (or any files stored on an android device) in react native using react-native-fs library.
I stumbled upon quite a few times using API constants provided such as MainBundlePath, DocumentDirectoryPath, ExternalDirectoryPath to name a few except trying ExternalStorageDirectoryPath which was really needed.
So below is the code (Provided by react-native-fs git repo):
RNFS.readDir(RNFS.ExternalStorageDirectoryPath)
.then((result) => {
console.log('GOT RESULT', result);
return Promise.all([RNFS.stat(result[0].path), result[0].path]);
})
.then((statResult) => {
if (statResult[0].isFile()) {
return RNFS.readFile(statResult[1], 'utf8');
}
return 'no file';
})
.then((contents) => {
console.log(contents);
})
.catch((err) => {
console.log(err.message, err.code);
});
i am using a RNFetchBlob for getting files in react-native. Code is as follows -
RNFetchBlob.fs.readStream(
('/Users/UserName/Project/documents/' + this.state.name),
'base64',
4095)
.then((ifstream) => {
ifstream.open();
ifstream.onData((chunk) => {
this.setState({data: chunk});
})
ifstream.onError((err) => {
console.log('oops', err)
})
ifstream.onEnd(() => {
this._decodeData();
})
});
This code works perfectly when running it on an emulator on my macbook, but i was wondering what the file path would be running it on my iphone? Obviously - it cant find the file when i try to do so.
I would like some sort of non-absolute path to be used but not sure how this is done with RNFetchBlob. When loading images, require('../images/image.png') works perfectly, just not this scenario
Thanks in advance -