There are two most popular react abstraction of google maps API(judging by the weekly npm downloads and github repo stars). For a beginner like me, it is very confusing as I am not able to decide what can these libraries bring to my project and what not by merely looking at the documentation? In short what are the pros and cons of using google-map-react and react-google-maps. I didn't find any comparison on the internet or SO.
Be carefull, react-google-maps project is unmaintained more than a year, see
https://github.com/tomchentw/react-google-maps/issues/986
They suggest to look at #react-google-maps/api but it is quite a young project and doesn't have a lot of stars on GitHub yet.
I personally like google-map-react which is still under (quite active) development.
I found the google-maps-react documentation a bit confusing because it utilizes a HOC, compose, to simplify the map. For those new to React, it might be easier to start without compose.
react-google-maps, a package that essentially provides a React component wrapper for the Google Maps API. react-google-maps allows users to use the full functionality of Google Maps Javascript API.
Related
I have recently been learning Next.js for React and I like the routing system a lot more than react navigation. Now I am about to start a react native frontend and I was wondering if you can utilise Next.js's routing system in react native as well as it's other benefits. I know that you can use it with expo but I am a little confused as to how it all works and I am starting to wonder if the Next only works on the web side of things..
Does anyone have any experience with this? Any information would be much appreciated.
Thanks!
Unfortunately you can't do such thing, due to the fact that the views of react native are Equivalent to native views in Java or Objective C. When you get build version of react native , you are receiving Java or Objective C native views thank to react native's RN bridge. Meanwhile, when you get build version of your Next.js project, you are going to receive HTML, CSS, JS and these codes are not familiar to native platforms.
However, you can use your Next.js backend as your endpoints and fetch data in react native via calling this endpoints.
UPDATE Oct_2022:
there seem to be a new tool created for this purpose , called solito. I haven't used it personally but it might meet your needs.
UPDATE Jan_2023:
It looks like there are more Tools being created for Both web and native platforms , check react-native-web
You can check out Tauri. With that you can create from Next.js, React, Svelte etc. cross-platform native Apps. Currently, Windows, Mac and Linux are supported stable. Android & iOS is currently in Alpha
The magic behind Tauri is, that they provide around your Frontend library/framework a Rust layer with that you can interact with platform native APIs. They call it Commands.
You can find the guide for Next.js here.
Also, if it's not exactly answering the question - "Is it possible to use Next.js in React native?" - I hope that it's helping everyone who is searching for a solution to use Next.js as Cross-Platform Frontend Framework
I read a thread on ycombinator on this where Solito was mentioned and tried it out. In the comments I found this, which suited my needs best :
https://github.com/mlynch/nextjs-tailwind-ionic-capacitor-starter
Solito looks nice but the all in one repo was using Expo, which I did not like because it installs an extra app. I would check it out for yourself and look at the repo above too, which is using Capacitor and is aimed at having one codebase for the two apps.
Both examples worked well. For Tauri I could not find the mobile support so I didn't try it. I would be interested to read more about people's experience with running a minimum stack for cross platform development.
Note : Solito uses React Native, the repo uses Capacitor instead, which may also suite your needs because it works on both iOS and Android.
There's a lot of support now for this tech stack. Besides solito, which is already mentioned, there is also https://tamagui.dev/ which tries to solve all the issues with react-native-web and Next.js along with Solito.
While they currently recommend a monorepo (which adds a lot of complexity in my opinion), I'm playing around with a vanilla React Native + Next.js here: https://github.com/criszz77/luna
This command should get you started to play around:
npx react-native init MyAppName --template #criszz77/luna
It might be a stupid question to ask, but searching on the web did not give me any conclusive result: If you want to maintain only a single code base, does it make sense to write your code in React and transpile to React Native? A client has the idea to have both an App (ideally for iOS and Android at the end) and a website all deduced from a single source.
I have some experience with webpack and I know it can be painful to configure, but is there some definite guide by Facebook on that issue which I missed?
References
Medium article by Sahil Sharma from 2016
Medium article by Gwendolyn Faraday from 2017
What is the difference between React Native and React?
One alternative is to run your react-native application on the web.
The go to library for that is react-native-web.
I'm trying to implement Google Places API in React JS, but I am not able to do that, I don't know where I have to start, I was looking for some libraries, but everything that I get is about Google Maps, and those are 2 different APIs.
Could someone help me with this?
You did not provide much details but I think this tutorial may fits your needs, check it out:
Google Maps React Component
The entire module is available at google-maps-react
as indicated in the tutorial.
Hope it helps.
You can also use react-google-location npm package. it provide everything that you need such as current location,coordinates and google places also.
I'm facing some challenge in using maps, my map component is deprecated, is there something I should do to be able to use it and also would like to know the steps required to intergrate map keys to Codename One?
MapComponent is marked deprecated to discourage its use, but it should still work fine. The reason we discourage its use is because the Google Maps lib is better than it in almost every way. You should look at using that instead if possible.
There are instructions in the readme file on how to integrate your keys.
The Google maps library is updated with improvments please go throgh the below link.
new update n google map
you have added it from build hints as shown in as attached image.
I have an app based on the create-react-app starter kit and need to switch to universal/server rendering due to SEO issues.
Is there an easy way or example of taking the create-react-app teamplate and adding or modifying it to support universal rendering?
A lot of the examples I see for universal are overly complex for my needs and I prefer to keep it very clean and simple, if possible.
Thanks.
EDIT: FYI,
I found this medium post which points at this repository.
Seems simple enough, but since I'm a newbie on all webpack/react/node related stuff, if anyone thinks it's the wrong approach, would love to know...
There was a proof of concept of adding server rendering in this PR.
I can’t speak to how good it is but it’s something you could start with.
You may also look at some of the alternatives.
A few of them provide server rendering out of the box.
I've just created react universal (server-side rendering) starter used recommendations from redux and react-router v4. Fill free for feedback
https://github.com/gzoreslav/react-redux-saga-universal-application
You can take your app (bootstrapped with Create React App) to the next level by replacing react-scripts with a slightly altered version - react-app-tools, which allows adding server-side code to your project (e.g. for server-side rendering purposes and/or implementing an API endpoint). It will allow compiling and running your app using normal Create React App pipeline, using a single instance of Webpack, on the same HTTP port.
You can find more info by visiting React App SDK.