I am trying to download an image from url then share it via whats app and other social media as an image format, I tried some method but I couldn't, my code is as follow:
let filePath = null;
const configOptions = {
fileCache: true,
};
RNFetchBlob.config(configOptions)
.fetch('GET', url)
.then(async resp => {
filePath = resp.path();
let options = {
url: filePath
};
await Share.open(options);
await RNFS.unlink(filePath);
});
I tried also
RNFetchBlob.fetch("GET",url,{
Authorization : 'Bearer access-token...',
})
.then(resp => {
console.log(resp)
let shareImageBase64 = {
title: "React Native",
message: "Hola mundo",
url: `data:image/png;base64,` + resp.base64(),
};
Share.open(shareImageBase64);
})
it does open the share option but there is no image, only the message can be shared.
This is an open issue in github, the issue is only on IOS when sharing with whats app. The problem is that the message under shareImageBase64 overrides the url and you are sharing the message only, a workaround is to remove the message and you will be able to share your image successfully.
Related
I want to share a screen to whatsapp and if the user press on whatsapp he should redirected to my app how I make this ?
My following code:
const path = useRoute();
// Replace this with react-native-share
const handleShareScreen = async () => {
try {
const link = Linking.createURL(path.name, {
queryParams: path.params
});
const res = Share.share({
message: link,
title: screenname,
url: link
});
} catch(e) {
console.error(e)
}
};
But in whatsapp I get this:
exp://192.168.0.249:19000/--/Packets?index=1
its not a link, so how can it redirect to my app
We are trying to integrate Stripe into a react native app using #stripe/stripe-react-native. We followed this tutorial https://www.youtube.com/watch?v=DZlAET7Tgx4
https://www.youtube.com/watch?v=DZlAET7Tgx4 for reference.
Our API call is returning an undefined object. We think it might have to do with the API url but we've tried everything (localhost, ip address of computer, ip address of wifi) and nothing is working. We try to console log within the post method but nothing prints which makes us think it's not being called properly. We have a server running using express. Any help would be greatly greatly appreciated :)
This is our post method:
app.post('/create-payment-intent', async (req, res) => {
console.log("test place 1")
try {
const paymentIntent = await stripe.paymentIntents.create(
{
amount: 1099,
currency: "usd",
payment_method_types: ["card"],
}
);
const clientSecret = paymentIntent.client_secret;
res.send({
clientSecret: clientSecret,
});
} catch (e) {
res.json({ error: e.message });
}
})
And this is when we call it:
const API_URL = "http://10.49.40.160:8000"
const StripeApp = props => {
const [email, setEmail] = useState();
const [cardDetails, setCardDetails] = useState();
const { confirmPayment, loading } = useConfirmPayment();
const fetchPaymentIntentClientSecret = async () => {
const response = await fetch(`${API_URL}/
create-payment-intent`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
paymentMethodType: 'card',
currency: 'usd',
}),
});
const { clientSecret, error } = await response.json();
return { clientSecret, error };
}
Thank you so much!
Can you verify the API found at the URL you provide is active and will return the expected response? It sounds like you already know that is an issue.
If you are just getting started and not necessarily looking to build something immediately production ready, I have found it useful to have a relatively simple back-end that does the bare minimum you will need to test out development ideas.
Stripe provides the code and and even a deployment tool for a simple mobile back-end. If you follow the deployment instructions it will deploy a basic server to Heroku for free. Just be sure to take note of the url and save that information in your app configuration.
Even if you are not too familiar with Ruby syntax (the server is written in Ruby, web.rb) the functions are minimal enough you can look at the code snippets in Stripe Docs to get an idea of what that code is doing.
Happy coding! 😄
i'm using api platform to create end Point to handle images upload.
My api require a file type to make a post request.
This is an example of post request using post man :
I want to handle sending images with axios using react native.
I created a post request like this :
this.setState({
avatarSource: source,
});
console.log(this.state.avatarSource.uri);
const data = new FormData();
data.append('file', {
uri: this.state.avatarSource.uri,
// show full image path in my device
// file:///storage/emulated/0/Pictures/image-c40b64fc-6d74-46a7-9016-191aff3740dd.jpg
});
axios
.post(`${API.URL}/media_objects`, data, {
headers: {
'Content-Type': 'multipart/form-data',
},
})
.then((resp) => console.log(resp))
.catch((err) => console.log(err.message));
}
});
I'm sending the full path of image in my phone to the api but i got "Network Error"
I fixed the problem by commenting this line in ReactNativeFlipper.java :
NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
NetworkingModule.setCustomClientBuilder(
new NetworkingModule.CustomClientBuilder() {
#Override
public void apply(OkHttpClient.Builder builder) {
// builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); // add comment here and build android
}
});
client.addPlugin(networkFlipperPlugin);
client.start();
I've been trying to save an image on a mobile device with React Native and Expo, i have tried with these packages:
import RNFetchBlob from 'react-native-fetch-blob';
import RNfs from 'react-native-fs ';
but both give me this error when implementing them
null is not an object (evaluating 'RNFetchBlob.DocumentDir')
then try expo-file-system but i don't see any clear example of how to convert base64 and download it to mobile
UPDATE
I was able to do it, my purpose was to save the base64 of a QR and convert it to png and at the same time be able to share it, I did it using expo-file-system and expo-sharing
this is mi code,
import * as FileSystem from 'expo-file-system';
import * as Sharing from 'expo-sharing';
//any image, I use it to initialize it
const image_source = 'https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80';
share=()=>{
var self = this;
self.setState({loading:true})
FileSystem.downloadAsync(
image_source,
FileSystem.documentDirectory + '.png'
)
.then(({ uri }) => {
console.log(self.state.base64Code);
FileSystem.writeAsStringAsync(
uri,
self.state.base64Code,
{'encoding':FileSystem.EncodingType.Base64}
)
.then(( ) => {
this.setState({loading:false})
Sharing.shareAsync(uri);
})
})
.catch(error => {
console.error(error);
});
}
Actually, I don't know if it's the best way, first write a png image in the directory and then rewrite it with the base64 code, but it worked
This worked for me:
const data = "data:image/png;base64,ASDFASDFASDf........"
const base64Code = data.split("data:image/png;base64,")[1];
const filename = FileSystem.documentDirectory + "some_unique_file_name.png";
await FileSystem.writeAsStringAsync(filename, base64Code, {
encoding: FileSystem.EncodingType.Base64,
});
const mediaResult = await MediaLibrary.saveToLibraryAsync(filename);
Thanks for the update. I've been struggling for days with this on Android and base64 images!
In my case i was trying to upload a base64 image from a signature pad on expo and always got "Network request failed"
I managed to make it work like this hope it helps!
import * as FileSystem from 'expo-file-system';
const uploadBase64 = async (base64String) => {
this.setState({ uploading: true });
//Without this the FilySystem crashes with 'bad base-64'
const base64Data = base64String.replace("data:image/png;base64,","");
try {
//This creates a temp uri file so there's no neeed to download an image_source to get a URI Path
const uri = FileSystem.cacheDirectory + 'signature-image-temp.png'
await FileSystem.writeAsStringAsync(
uri,
base64Data,
{
'encoding': FileSystem.EncodingType.Base64
}
)
//At this point the URI 'file://...' has our base64 image data and now i can upload it with no "Network request failed" or share the URI as you wish
const uploadResult = await this.uploadImageAsync(uri).then(res => res.json())
if (uploadResult) {
this.setState({ image: uploadResult.location });
}
this.setState({ uploading: false });
} catch (e) {
this.setState({ uploading: false });
console.log('*Error*')
console.log(e)
}
}
//Just and ordinary upload fetch function
const uploadImageAsync = (uri) => {
let apiUrl = 'https://file-upload-example-backend-dkhqoilqqn.now.sh/upload';
let formData = new FormData();
formData.append('photo', {
uri,
name: `photo.png`,
type: `image/png`,
});
let options = {
method: 'POST',
body: formData,
headers: {
Accept: 'application/json',
'Content-Type': 'multipart/form-data',
},
};
return fetch(apiUrl, options);
}
i am using the following code to but i keep getting in android, which was showing "Network request failed", but it was no problem if i not append photo file data in the FormData. Why I am getting this problem?
const data = new FormData();
data.append("name", "testName"); // you can append anyone.
data.append("photo", {
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
type: 'image/png', // or photo.type
name: 'testPhotoName.png'
});
fetch('https://ptsv2.com/t/1gfl7-1544694996/post', {
method: "post",
body: data
}).then(res => {
console.log(res);
});