sharing image, link and title using react-native-share not working - react-native

I am using react-native-share to share content accross different social platform. For plain text it is working fine. But when I include image + message(contains link) + title, then it is not working.
Here is the code which I am using to do so:
let imagePath = null;
RNFetchBlob.config({
fileCache: true,
})
.fetch('GET', FILE_URL)
.then((resp) => {
imagePath = resp.path();
return resp.readFile('base64');
})
.then(async (base64Str) => {
const content = `Sharing Link ${link}`;
const base64Data = `data:image/jpeg;base64,${base64Str}`;
const shareOption = {
message:content,
url: base64Data,
title: 'This is title',
type: 'image/jpeg',
};
await Share.open(shareOption);
return RNFetchBlob.fs.unlink(imagePath);
});
} catch (error) {
console.error(error);
}
I tried different variations of it, what I found on SO and on other links. But non of them worked.
What I've tried and didn't worked:
Sharing URL of images instead of base64 - Only image is shared, message got removed. And in whats app image link is not converted to image.
by removing message key and only passing url. (In this way image is getting shared. But it has no relevance. Because I am not able to set any kind of message or link)
I am not sure what I am missing here.

This is an interesting project. I have to admit up front, this is a bit of a non-answer. I apologize for that, but I wanted to let you know what I found because it seemed more useful to share my research rather than just keep it in my head and it was too big for a comment.
So I took a look at the github issues for this project to see if your issue was documented. There are 93 open issues and a lot of people complaining about varieties of things that don't work the way you would think in combination of these variables (message, base64) especially on iOS. Have you taken a look at their issue log to see if you can find better detail? Are you using iOS?
Here's a few that seem to be left open that complain about almost the exact issue you posted about. Some offer workarounds. Some lead to dead-ends. If you haven't read these, it would behoove you to get up to speed. If you do know all this, maybe I'll just leave this post up for posterity if others come across it.
https://github.com/react-native-share/react-native-share/issues/760
https://github.com/react-native-share/react-native-share/issues/966
https://github.com/react-native-share/react-native-share/issues/831
https://github.com/react-native-share/react-native-share/issues/1025

Related

Understanding React-Admin translation

I am working with react-admin and trying to traduce it to my native language with this short guide usage:
https://github.com/marmelab/react-admin/tree/master/packages/ra-language-french
I keep getting non-referenced keys on the supposed translated keys.
To get my traduction working, I tried to delete node-modules file, tested in other browsers, cleared cache etc. but I still had the non-referenced keys: ra.______
When I changed this line (as below), it solved my problem:
const messages = { 'fr': frenchMessages, };
TO
const messages = { 'en': frenchMessages, };
And that's the only thing that i needed to change for the polyglot to work (French traduction).
Can someone explain to me what's going on, i don't know why it works in that case ?
Example in picture which shows the case explained above:
Not working case
Working case
Thanks for your time.
The <Admin locale='fr' ... property is deprecated! New version:
import { resolveBrowserLocale } from 'react-admin'
...
const i18nProvider = polyglotI18nProvider(locale => messages[locale], resolveBrowserLocale()) // or 'fr'

React-native sound delay issue

This is just general question. I want to make drums-like app but i have sound delay. Maybe someone tried some other package(s) and did some magic, I used react-native-sound and react-native-video since they are most popular and not outdated like others. This is code sample:
new Sound(`${filename}.mp3`, Sound.MAIN_BUNDLE, error => {
if (error) {
return;
} else {
audio.play(() => {
audio.release();
});
}
});
There are other libraries, maybe outdated, but i am looking for any input to make it better, we did handler with onPressIn to make it slightly faster but still big delay:
<TouchableOpacity onPressIn={handleOpenPress}>
If this fails I will try to make another library, but I fear it will have the same delay. For some reason this repo works very fast: https://github.com/dwicao/react-native-drum-kit. I used same code and made even a list with prepared sounds to be used like soundList[i++ % 10].play() but still no effect.

Is it okay to update or delete data inside of router.post, instead of .delete/.patch?

I created some example code underneath to show what I mean.
Is it okay to update some data after saving inside of a post route? I often update and save data in a single route, and I never know if it is okay to do this and if there are any consequences of the code that I am unaware of.
router.post('/sync-steam', auth, async(req, res) => {
const { steamID, steamName } = req.body
try {
await req.user.save( steamID )
await req.user.updateOne( steamName )
res.send("OK")
} catch(err) {
res.status(400).send(err)
}
})
Yes, it is OK to do that. There should not be any issues regarding that as long as your logic that communicates with your database is correct.
However, you should try to follow the convention of REST API, and use the correct method:
GET for listing/reading content
POST for creating content
PUT for replacing content
PATCH for updating part of the content
DELETE for deleting content

dragAndDrop using webdriverio

I have tried every single thing to perform dragAndDrop using webdriverio but nothing works. I have also posted a question in the webdriverio gitter but no response. below posted code is one of the ways I tried and its supposed to work but it just doesn't!
` await this.driver.moveToObject(source);
await sleep(2000);
await this.driver.buttonDown(0);
await sleep(2000);
await this.driver.moveToObject(destination);
await sleep(2000);
await this.driver.buttonUp(0);`
I'm not sure what properties are on the source and destination objects you are using but here is an example of how I was able to get it to work using the same commands you are trying.
In my example I have a table with columns that can be re-ordered by dragging and dropping them wherever I want them to be. First I get the two column headers I want to switch
let docIdHeader = browser.element('div[colid="documentid1"]');
let pageCountHeader = browser.element('div[colid="_PAGE_COUNT1"]');
If I log these objects out to the console I can see the properties stored in them.
> docIdHeader
{ sessionId: 'e35ae3e81f1bcf95bbc09f120bfb36ae',
value:
{ ELEMENT: '0.3568346822568915-1',
'element-6066-11e4-a52e-4f735466cecf': '0.3568346822568915-1' },
selector: 'div[colid="documentid1"]',
_status: 0 }
> pageCountHeader
{ sessionId: 'e35ae3e81f1bcf95bbc09f120bfb36ae',
value:
{ ELEMENT: '0.3568346822568915-2',
'element-6066-11e4-a52e-4f735466cecf': '0.3568346822568915-2' },
selector: 'div[colid="_PAGE_COUNT1"]',
_status: 0 }
Now using the same technique you are using and the selector property off of these objects I can get it to work in two ways.
browser.dragAndDrop(docIdHeader.selector, pageCountHeader.selector);
Or
browser.moveToObject(docIdHeader.selector)
browser.buttonDown(0)
browser.moveToObject(pageCountHeader.selector)
browser.buttonUp(0)
I ran this in the REPL interface so I know it works as I could see each step being executed after I sent the commands. If you are not familiar with how to use the REPL I highly recommend learning. You can play around with commands in the console until you figure something out and then add those commands to your tests.
Also, as I stated in my comments above. dragAndDrop() and moveToObject() are going to be deprecated soon and you will likely see a lot of warnings about it when you use these. The correct way to implement a drag and drop action going forward is to use browser.actions(). Unfortunately, I don't have an example of how to do it that way as I haven't played with it yet. If no one provides an example by tonight I will try to get one together for you.
Even I faced this issue wherein the cursor doesn't move to the destination object after buttonDown and using moveToObject twice worked for me.
await this.driver.moveToObject(source);
await this.driver.buttonDown(0);
await this.driver.moveToObject(destination);
await this.driver.moveToObject(destination);
await this.driver.buttonUp(0);

How do I get data from a background page to the content script in google chrome extensions

I've been trying to send data from my background page to a content script in my chrome extension. i can't seem to get it to work. I've read a few posts online but they're not really clear and seem quite high level. I've got managed to get the oauth working using the Oauth contacts example on the Chrome samples. The authentication works, i can get the data and display it in an html page by opening a new tab.
I want to send this data to a content script.
i'm having a lot of trouble with this and would really appreciate if someone could outline the explicit steps you need to follow to send data from a bg page to a content script or even better some code. Any takers?
the code for my background page is below (i've excluded the oauth paramaeters and other )
` function onContacts(text, xhr) {
contacts = [];
var data = JSON.parse(text);
var realdata = data.contacts;
for (var i = 0, person; person = realdata.person[i]; i++) {
var contact = {
'name' : person['name'],
'emails' : person['email']
};
contacts.push(contact); //this array "contacts" is read by the
contacts.html page when opened in a new tab
}
chrome.tabs.create({ 'url' : 'contacts.html'}); sending data to new tab
//chrome.tabs.executeScript(null,{file: "contentscript.js"});
may be this may work?
};
function getContacts() {
oauth.authorize(function() {
console.log("on authorize");
setIcon();
var url = "http://mydataurl/";
oauth.sendSignedRequest(url, onContacts);
});
};
chrome.browserAction.onClicked.addListener(getContacts);`
As i'm not quite sure how to get the data into the content script i wont bother posting the multiple versions of my failed content scripts. if I could just get a sample on how to request the "contacts" array from my content script, and how to send the data from the bg page, that would be great!
You have two options getting the data into the content script:
Using Tab API:
http://code.google.com/chrome/extensions/tabs.html#method-executeScript
Using Messaging:
http://code.google.com/chrome/extensions/messaging.html
Using Tab API
I usually use this approach when my extension will just be used once in a while, for example, setting the image as my desktop wallpaper. People don't set a wallpaper every second, or every minute. They usually do it once a week or even day. So I just inject a content script to that page. It is pretty easy to do so, you can either do it by file or code as explained in the documentation:
chrome.tabs.executeScript(tab.id, {file: 'inject_this.js'}, function() {
console.log('Successfully injected script into the page');
});
Using Messaging
If you are constantly need information from your websites, it would be better to use messaging. There are two types of messaging, Long-lived and Single-requests. Your content script (that you define in the manifest) can listen for extension requests:
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
if (request.method == 'ping')
sendResponse({ data: 'pong' });
else
sendResponse({});
});
And your background page could send a message to that content script through messaging. As shown below, it will get the currently selected tab and send a request to that page.
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendRequest(tab.id, {method: 'ping'}, function(response) {
console.log(response.data);
});
});
Depends on your extension which method to use. I have used both. For an extension that will be used like every second, every time, I use Messaging (Long-Lived). For an extension that will not be used every time, then you don't need the content script in every single page, you can just use the Tab API executeScript because it will just inject a content script whenever you need to.
Hope that helps! Do a search on Stackoverflow, there are many answers to content scripts and background pages.
To follow on Mohamed's point.
If you want to pass data from the background script to the content script at initialisation, you can generate another simple script that contains only JSON and execute it beforehand.
Is that what you are looking for?
Otherwise, you will need to use the message passing interface
In the background page:
// Subscribe to onVisited event, so that injectSite() is called once at every pageload.
chrome.history.onVisited.addListener(injectSite);
function injectSite(data) {
// get custom configuration for this URL in the background page.
var site_conf = getSiteConfiguration(data.url);
if (site_conf)
{
chrome.tabs.executeScript({ code: 'PARAMS = ' + JSON.stringify(site_conf) + ';' });
chrome.tabs.executeScript({ file: 'site_injection.js' });
}
}
In the content script page (site_injection.js)
// read config directly from background
console.log(PARAM.whatever);
I thought I'd update this answer for current and future readers.
According to the Chrome API, chrome.extension.onRequest is "[d]eprecated since Chrome 33. Please use runtime.onMessage."
See this tutorial from the Chrome API for code examples on the messaging API.
Also, there are similar (newer) SO posts, such as this one, which are more relevant for the time being.