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.
Related
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.
I built an application in React, is there a way that the same code will be used for a website?
I know Instagram is built on React and it also has a website, I wonder maybe you should add some link or something that it will open for me as a website?
Or maybe there is no such way and I have to build a website separately?
First off all, If you have written any code which is related to native functionality, then it can be challenging.
If you have only worked with views, images, and some of the basic functionality.
It can be done with react-native-web you can easily migrate your project to react-native-web.
If you project is created with expo they already provide react-native-web support.
Option 2: If you have some of the code you want to share and some is that you don't want to share or can't share.
You can use renderProp or customHooks pattern to reuse your logical code and seperate your view for react-native and react js apps.
If you want to reuse your views too, you can do those with primitives.
you can use styled-component primitives for that.
https://medium.com/react-native-training/sharing-code-between-react-web-and-react-native-applications-7f451af26378
You can get some idea here as well.
I try to follow official document https://pusher.com/tutorials/chat-app-react-native-gifted-chat and it works.
But when I want to set a create user function , I can't find the code from React Native.
I just find it with Node.js https://docs.pusher.com/chatkit/reference/server-node#creating-a-user and with Javascript https://docs.pusher.com/chatkit/quick_start/javascript#create-a-user
If i use Javascript document, it will show error https://docs.pusher.com/chatkit/quick_start/javascript#create-a-user
import Chatkit from "#pusher/chatkit";
const chatkit = new Chatkit.default({
instanceLocator: CHATKIT_TOKEN_PROVIDER_ENDPOINT,
key: CHATKIT_SECRET_KEY
})
There is no default can be used obviously.
Is any way to do it on the mobile application or I must have a backend to do it ?
Any help would be appreciated. Thanks in advance.
Currently you can create users in one of three ways:
Using your Chatkit dashboard's console
From your server code using one of the server SDKs
Using the HTTP API directly
As you'll notice from that list, you can't create a user from the client.
As far as I've searched it appears to be impossible to load modules (=plugins/libraries?) dynamically (I'm very new to React Native..).
What I'd like to accomplish is to let the user of the app load additional functions as she/he desires.
Example:
A user wants to add a music plugin to the app.
Intuitively, I'd long for something like dynamic library loading. The user would fetch the library, it'll be loaded into the code and can then be executed. However, in React Native it seems like there are only modules that can be loaded?
Alternatively, I'd hope that auto-updating the app would allow to add modules "on-the-fly" ( https://github.com/aerofs/react-native-auto-updater or www.npmjs.com/package/react-native-hot-load ). But I fear that this is only for JS and data content?
The ability to dynamically add functionality to the app is an essential part of the app. I have no previous experience worth mentioning in mobile app development.
Question: Is it possible to dynamically add functionality (also native in nature) to React Native apps?
If not, would there be a workaround?
EDIT: I have found the following repository on github: https://github.com/yusefnapora/react-dynamic-linking-example .
Unfortunately, without any description. I have no idea about Objective-C, but the repo name sounds promising. Anybody knows what its purpose is?
I am trying to access the gallery using the official CameraRoll API guide. I am unable to render the component because the following modules are not provided in the official doc:
const CameraRollView = require('./CameraRollView');
const AssetScaledImageExampleView = require('./AssetScaledImageExample');
I tried to google for examples regarding CameraRollView and AssetScaledImageExampleView but found nothing. My question is where can I find the boilerplate code for these two modules? I am still learning React-Native so I am not sure how I am suppose to go about coding these two modules.
Above the example code, next to the headline "Examples", you should see a link "Edit on GitHub" which leads to the source code for that example on GitHub. From there, you can navigate to the location of the file you desire.
For the particular files you desire, they are located at the following links:
CameraRollView.js
AssetScaledImageExample