How to use Globe.gl React component in React Native? - reactjs

I asked a similar request in the Git Repo as well here, https://github.com/vasturiano/react-globe.gl.
I have an app that uses the react component exported by this project. It depends on three.js and WebGL to work. It is an extension of this repo by the same author, https://github.com/vasturiano/globe.gl.
I made a beautiful web app with these libraries and all works as expected, on the web, but I want to extend this to a mobile app built on react native as well.
I have tried a simple port but get an error from the CSS2DRenderer trying to access the document object which clearly doesn't exist on a mobile app.
I tried using expo GLView here, but could not for the life me figure out where to start on the context creation function to be able to port the three globe to it.
My question is, based on the Repo's I have shared above, what is the best approach to implementing the Globe in React Native?
I would also take any alternatives that I could do drag/zoom Globe with dynamic plot points and interactive functions (click basically).
For a quick setup to recreate the project, I am working an out of the box react native application setup
npm i react-globe.gl
Pop below component inside of a View in the app.js and import the Globe from above library. Provide an empty array for hexBinPointsData
<Globe
globeImageUrl="//unpkg.com/three-globe/example/img/earth-night.jpg"
bumpImageUrl="//unpkg.com/three-globe/example/img/earth-topology.png"
backgroundImageUrl="//unpkg.com/three-globe/example/img/night-sky.png"
hexBinPointsData={plotData}
hexAltitude={0.1}
hexBinResolution={4}
hexBinMerge={false}
/>
Expected error: Document variable cannot be found. In the CSS2DRenderer.js file.
Any help would be appreciated!

Related

A way to precompile a single react component for a react native webview

As the title suggests I am looking for a way to precompile a single or set of normal react components to plain html/js so I can inject this into my webview.
Since I am open to any solution I will give you some background on what I am trying to achieve. We are building a react native app and need to use Leafleft maps by customer requirement. Since Leaflet is not available for react native straight away we are looking for a way to implement it. Currently we are looking at compiling the leaflet react code to normal html/js and inject this into a webview. If there are other/ better ways by all means suggest them!
Thanks for your time 😄

What is the difference between React, ReactJS, and React Native? [duplicate]

This question already has answers here:
What is the difference between React Native and React?
(45 answers)
Closed 1 year ago.
I want to study a course about React, but I don't know couple of things, like:
What is the difference between React, ReactJS, and React Native ?
Well, if there is a big difference, What is the best one of them to study ?
I am really looking forward to study it, so if you got any information on the best way to start learning this course, I would appreciate it.
Thank you so much.
React and React.Js is one and the same.
React / ReactJs
ReactJS is an open-source JavaScript library used to build the user interface for Web Applications. It is responsible only for the view layer of the application. It provides developers to compose complex UIs from a small and isolated piece of code called "components." ReactJS made of two parts first is components, that are the pieces that contain HTML code and what you want to see in the user interface, and the second one is HTML document where all your components will be rendered.
React Native
React Native is an open-source JavaScript framework used for developing a mobile application for iOS Android, and Windows. It uses only JavaScript to build a cross-platform mobile app. React Native is same as React, but it uses native components instead of using web components as building blocks. It targets mobile platforms rather than the browser.
Link for Further information
What is the best one of them to study ?
React and React native both solves different kind of problem. React is common library between react and react-native which provides supports for hooks and generate virtual dom.
react-dom will render content on web using virtual dom created by react.
However on other side react-native will create bundle for android and iOS.
Main differences between Reactjs and React Native
When it comes to a web platform, Reactjs can be defined as a base
derivative of React DOM, while React Native acts as a base
derivative by keeping workflow and syntax the same alongside
altering components.
React is a JavaScript library that can help your developers in
building a highly responsive UI Layer and React Native on the other
hand is a complete framework to develop cross-platform applications.
Virtual DOM is used to extract browser code in React; native APIs
help in rendering components in mobile in React Native.
In React Native, UI is rendered with the help of JSX but the
applications curated with Reactjs extract HTML in UI.
For styling in Reactjs, CSS is used, and React Native platform
requires a stylesheet for styling.
Using CSS, you can carry out animation in Reactjs; for animation in
React Native, you need to use an animated API.

sharing code between react js and react native expo

I want trying to figure out is it possible to share code between reactjs and react native expo. I want to build an app for production. If yes then what should be the structure of project. I tried to do alot of google search but could find any article or tutorial on using react native expo with reactjs. Any one please help me to figure this out.
Probably the easiest way is to just write React code in Expo and then use Expo web to make the website.
It is possible to share code between a React DOM project and an Expo project but there are some caveats and gotchas. There are a bunch of blog posts out there that outline some techniques to do this. Here is one example: https://codeburst.io/reusing-code-between-react-js-and-react-native-effectively-12bb4fbf7a70

Is Redux the same for React and React native?

I am currently studying RN by myself, without prior knowledge in React. A lot of things seem to exist in both such as Redux and hooks. Many of the resources I find refer to React in the title (e.g "Redux Crash Course With React").
My question is: where does the line cross between React and React Native? Would I be fine studyig form these resources that refer to React, or would that just confuse me?
I'm trying to understand a go to approach to understand which resource I'd be fine with and which would be irrelevant.
React Native contains React library to use it as front-end library.
Most of usages of React are the same for React-Native. And it is same for Redux too.
React-Native must have other libraries to build applications that can run on both of Android and iOS.
Also it has middleware libraries that allow us to use most of native libraries' functionalities. As an example you can check Alert directory out. It is used for to show native Android alert dialogs.
Good luck..
Both react and react native use javascript to create the user interface we need but the difference is in the rendering, style and bundling and you should know that react native is a framework itself but react.js is a library. the main difference:
---React-Native doesn’t use HTML to render the app, but provides alternative components that work in a similar way. Those React-Native components map the actual real native iOS or Android UI components that get rendered on the app.
---With React-Native, you’ll have to learn a completely new way to animate the different components of your app with Javascript.
--- navigating between pages are totally different!!!
so we conclude that it's better to study references based on RN not react.js . but some functionalities such as redux or hooks or a lot of it's components are exactly the same and you can study react.js references for them. only the 3 differents that i said above are important.

How integrate a react-redux app into another react app

I have a react-redux app and I would like to display the content of another react app ( from another team) when a user clicks on a button.
so far I had found articles about sharing components between react apps or using npm package. like this building a react component library
but I haven't found an example to package a whole app (including reducers/actions) and imported as dependency into another app
I see also there is micro frontends but not sure how to use that with react apps.
any suggestions or examples would be highly appreciated.
thanks in advance

Resources