I'm writing a native iOS component for react native to fetch PHAsset(s) from camera roll. I'm struggling to show an upload a PHAsset as it's not giving a proper URI to use in react native and I'm writing an upload component too. How to achieve this.
I have solved this using the expo-media-library
https://docs.expo.io/versions/latest/sdk/media-library
async myFunc() {
let uri = "ph://ED7AC36B-A150-4C38-BB8C-B6D696F4F2ED/L0/001"
let myAssetId = uri.slice(5);
let returnedAssetInfo = await MediaLibrary.getAssetInfoAsync(myAssetId);
console.log(returnedAssetInfo.localUri); // you local uri link to get the file
} }`
React Native currently has very mixed support for PHAsset (aka PHImageLibrary) URIs, eg photos://A6A2CEBD-766E-4BD7-980C-71ED7828674E/L0/001. It has much better support for the deprecated ALAssetsLibrary eg assets-library://asset/asset.MOV?id=A6A2CEBD-766E-4BD7-980C-71ED7828674E&ext=MOV (note that is a video, not a photo, but the idea is the same).
You'll notice the ID in there is the same, it's just prefix/suffix changes. Try string manipulating that yourself.
Also, basically nothing supports a local URI that isn't prepended by photos:// or assets-library://. PHAssets don't have that, because ~~~apple things~~~. Try prepending photos://.
Side note, these URIs will work for things in iCloud that aren't actually local.
Related
I am a beginner with React Native.
I'm using Expo on Windows 10 and testing on an iPhone.
I need to create a map with custom tiles.
After some research I find out that Leaflet is not React Native compatible so I have to use react-native-maps.
I install it and create my first basic map, so far so good (Apple Maps).
Then I tried to apply the custom tiles. For performance reasons I want to use local tiles. Here came the question of how to get the local link of my tiles (located in "assets/tiles").
While searching I realize that I need to use react-native-fs to use the following path file://${RNFS.DocumentDirectoryPath}.
I install it.
However, when I try to add react-native-fs using
var RNFS = require('react-native-fs');
I get the error :
Invariant Violation: Native module cannot be null.
and I'm lost and don't know if I'm going the right way.
Thanks
Is there anywhere i can use a similar function like the in react native to upload image and take picture? I need to push this function via code-push, if i'm using library like react-native-image-picker, i can't push it via code-push. Or is there any pure js library can achieve this?
This is not possible as the code you'd need to achieve what you want requires access to native APIs (read/write storage, camera, etc.). You will therefore need to push an actual update through the App Store and Google Play.
Problem
I'm integrating React Native into an existing Android app (ie. making a hybrid app). I've created an Activity to host a React Native view. This works fine.
Now, I need to pass structured data from native into React Native. Represented as JSON, it looks something like this:
{
"landscape": ["http://example.com/1.jpg", "http://example.com/2.jpg"],
"portrait": ["http://example.com/3.jpg", "http://example.com/4.jpg"]
}
Given the context I describe how can I make this data available as props inside of the React Native app?
I see that this is an initialProperties argument available, but it seems to accept a Bundle, which as far as I can tell (Android newbie here) only accepts scalar values.
One option I am considering
Create JSON object in Java
Convert to a string
Add to Bundle and pass into initialProperties
Ingest as JSON and deserialize in React Native app
... but this seems hackish and requires me to add special code for Android that was not required for iOS.
Alternatives?
Is there a straightforward approach that I am missing?
Have you tried passing an array of strings into the Bundle?
bundle.putStringArray("landscape",yourArrayOfStrings]);
I'm implementing programmable-chat in react-native using the npm package. Unfortunately, I'm stuck on being able to correctly upload messages with images to twilio. The twilio js documentation outlines 3 ways to create a Media Message. Sending: 1) FormData (doesn't seem applicable to me in react-native?), 2) a String, or 3) a Buffer.
I've tried many variations at this point and am stumped. I've been all over the place with both react-native-fs and react-native-fetch-blob and haven't cracked it yet.
Everything I try results in failure or in a String being uploaded. When the String is uploaded, I can complete a round trip by fetching the created Media Message, getting the the temporary url of the media attachment, manually fetching the String stored at that url, and then crafting a base64 data uri for the Image element with the fetched String. But I'm 99% sure that is 'doing it wrong'. If I do it right, Twilio should be storing an actual image for me and giving me a temporary url that I can directly feed to my Image element, right?
To sum up: I can get a base64 encoded string to be stored in twilio, but for the life of me I can't figure out how to get the image binary up there so as to be directly accessible when hitting the url it is at.
I feel like I've got to be missing something simple, but I'm out of ideas at the moment. Is there a way to get a Buffer set up in react native? Should I be trying something with FormData?
I finally figured this out. This was just a problem not knowing how to get the file into a buffer in react native. I was finally able to get this working with a combination of react-native-fs and buffer. The code looks something like:
import RNFS from 'react-native-fs'
myMethod(twilioChannelObject, filePathString) {
RNFS.readFile(filePath, 'base64').then((data) => {
var Buffer = require('buffer/').Buffer
data = Buffer.from(data, 'base64')
twilioChannelObject.sendMessage({
contentType: 'image/png',
media: data
}).then(id => {})
})
}
This probably isn't the best practice way to solve the problem, but it got it to work for me, so moving on for now.
I am trying to use the Google Places API in react native. I first tried using fetch to make requests directly, but I just saw that you have to use the existing classes/objects provided by Google, like the PlacesService. Searching for React Native libraries that include the API objects for you just brings up some that do the autocomplete feature and not much else.
The Places API docs say to load the library using this url: <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
This is straightforward to me in regular web dev, but not in react native. What is the standard procedure for loading a library like this in React Native?
Right now I have copy and pasted the JS contents from the link above into a file in my React Native project. But, I don't even know how to export it as I can't really tell what the name of the object/function is. google ? google.maps ?
Right now I am doing:
export default google.maps
and also tried
export default google
but these both throw this error:
cannot read property 'createElement' of undefined
This is my first React Native project, so I'm sorry if this is a basic question.
Thanks for the help.
but I just saw that you have to use the existing classes/objects provided by Google
I'm not sure what you mean by that. Places api can be done via fetch/api request. Look at how react-native-google-places does it at https://github.com/FaridSafi/react-native-google-places-autocomplete/blob/master/GooglePlacesAutocomplete.js#L227
They use a new XMLHttpRequest(); but fetch() would work as well. It is web api and I don't think you need to run any external javascript/load any external js files.