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 -
Related
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.
I am currently working on reading a local file in react-native and am running into the following error,
TypeError:null is not an object(evaluating 'RNFSManager.RNFSFileTypeRegular')
The code I am using is taken straight off of the documentation for react-native-fs , using the basic example, from the examples section:
// require the module
var RNFS = require('react-native-fs');
// get a list of files and directories in the main bundle
RNFS.readDir(RNFS.MainBundlePath) // On Android, use "RNFS.DocumentDirectoryPath" (MainBundlePath is not defined)
.then((result) => {
console.log('GOT RESULT', result);
// stat the first file
return Promise.all([RNFS.stat(result[0].path), result[0].path]);
})
.then((statResult) => {
if (statResult[0].isFile()) {
// if we have a file, read it
return RNFS.readFile(statResult[1], 'utf8');
}
return 'no file';
})
.then((contents) => {
// log the file contents
console.log(contents);
})
.catch((err) => {
console.log(err.message, err.code);
});
If it helps I am using vs when writing this on a Windows 10 computer.
I have tried resetting my cache, reinstalling react-native-fs, and linking react-native-fs, none have solved the problem all resulting in the same error.
I would greatly appreciate any help. Thank you.
In case of iOS message is 'Native module cannot be null', In Android message is 'null is not an object evaluating RNFSManager etc'
Solution for iOS is run pod install in iOS Directory, then react-native run-ios to re-run the app.
Solution for android is react-native link react-native-fs then react-native run-android to re-run the app.
I'm using Dyson to host a little mock server for my React Native app, and trying to fetch from the server. The server appears to be running well and when I visit my desired url, http://localhost:3000/stations, in my browser, I get a nice JSON response.
In my React Native action, though, I get Network request failed:
export function fetchStations() {
return dispatch => {
dispatch({ type: "GET_STATIONS_START" });
fetch("http://localhost:3000/stations")
.then(res => {
return res.json();
})
.then(json => {
dispatch({ type: "GET_STATIONS_SUCCESS", payload: json.stations });
})
.catch(error => {
console.warn(error);
dispatch({ type: "GET_STATIONS_FAILURE", payload: error });
});
};
}
Using a static local URL works, and using, say, the Google Maps API works (even though it's not what I want, it's just a sample API to try).
I would think I may be calling the url wrong but it works in the browser so that seems doubtful. My guess is that is has something to do with iOS not liking http requests (only accepting https), unless you set some setting somewhere (I've been through this in native iOS development).
If this is the problem, how do I fix it from React Native? Or, what is the actual problem?
PS. I'm using dyson rather than json-server because for some reason I can't get json-server to work. See my other post. Somewhere here :)
I figured it out. The device (simulator) doesn't have access to localhost so I had to set my url to http://127.0.0.1:3000/stations and it works like a dream.
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);
});