i'm making an app for restaurant reservation and i made a fabric.js canvas that allows you to select a certain table, also the admin is capable of changing the tables and allocating them however i don't know how to integrate Fabric js with react native?
I know this question is two years old but I thought I'd add an answer for anyone else who may be looking at integrating fabric.js with react native (as I currently am).
Unfortunately, as fabric.js depends on a DOM (Document Object Model) & BOM (Browser Object Model) being present, it'll only work in a node or web browser environment; as there isn't any implementation or polyfill in any existing react native canvas library for these global objects. You can read more information about this on the following github issue.
Your other option is using a web view component to render a webpage, but the downside to this is that it doesn't offer quite the same experience as a native app.
Related
I'm working on a React Native project where I want to implement a layout that has auto placing functionality while fitting all the children as tightly as possible. It just happens that CSS has a wonderful feature that allows grids to autoplace children, sadly React Native doesn't support CSS grid. I've seen a variety of React packages that seem to do this, but there's no implementation for React Native. Examples for React are:
react-grid-layout, Muuri, bin-packing-grid.
I have managed to get the items sorted using a binary packing algorithm, but the visualization is still an issue I can't seem to get working.
My question: is there a package for React Native that can do this or is there an algorithm for the visualization of a binary packed item array that works on React Native?
The grid should be able to auto place children as following. https://i.ibb.co/H72mXRG/Whats-App-Image-2022-07-09-at-2-05-23-AM.jpg
I also thought about using a grid that would work with coordinates (X and Y position), but I couldn't find a working example for React Native. This would also be a viable option.
Any clues in the right direction would be much appreciated.
I have finally found a package that does this. The name is autoresponsive-react-native.
Docs, Github. Little outdated, but works perfectly. No Typescript support though.
This package (autoresponsive-react-native) supports platform independent handling for grids. Since the core functionality is independent from the visualization, it works on multiple platforms
as I understand Expo or Codepush OTA is for updating React Native (RN) apps without going through app submission. The reason it's possible is because a RN app has 2 parts:
UI: built-in RN components (View, Text...) will be converted to native UI widgets/components (UIView, android.view...). Basically our UI is native.
Logic: written in Javascript and cannot be converted to native code. We have to embed a JS Runtime (JavascriptCore, Hermes) to our native app to read and execute JS.
OTA only updates the JS code and cannot update native code.
However, recently I just did an OTA update to add some new features (new screens, new components) and it worked totally fine. I couldn't understand this. Didn't I modify the native code by adding new screens? Does this mean I understand the UI part wrong and our UI is not native but web view?
Hope you guys can help me answer this. Thank you!
Didn't I modify the native code by adding new screens?
No, you didn't modify the native codebase. You modified only the JavaScript codebase unless you add a new library that uses native code.
Does this mean I understand the UI part wrong and our UI is not native
but web view?
React Native UI is native and not webview. For example, you used components like View, Text, etc from react-native. It invokes native code and create new instances of Views with different params. While you creating new JavaScript code native code stays the same.
In other words with your on air update you created new invokes of native code. But this native code is same as it was when you submit it in the store.
I am new to React JS. I am trying to build a web application which should also work on mobile (Android and IOS) so thought of using react js for web application and created few components. so is it possible to use the React js component in React native.
It's good that you plan in advance. 100% matching between JS and Native won't be possible, but with careful planning, you could get to reuse a good deal.
You may want to take a look at React Native Web project that mirrors Native-specific components for Web (e.g. View, Image, Text, etc).
I suggest building a simple prototype in React JS and then in React Native so you get some understanding of the differences in the two ecosystems. Having a hands on experience will prove more beneficial than any writeup :)
ReactNative is a set of real native Components like View, TextInput TouchableHighlight and more. It is also a platform which let you run javascript code to control these.
There is no WebView like in Cordova, what you get is a native App with native views.
But that means, that you can still have some or your domain logic written in JS which you can use the same way in your Web App.
For example you have a Login Screen for iOS, but all the necessary stuff for your server calls, can go into a separate module e.g. api/auth.js, which is shareable between web, ios, android, iot.. what ever.
Can I use existent javascript interface, currently attached to the WebView in my android and iOS projects, within React-Native app?
React-Native does not use WebView for itself to run. But I can create it React WebView. My question is about using existing javascript interface, perhabs attach it to the created in React-Native WebView, make some sort of React extension etc...
BACKGROUND:
I have several android and ios applications made using WebView. For WebView there is a javascript interface (same for all apps), that I use to access native device environment features (like Cordova/Phonegap) and third party SDKs and libraries (one o them is an SDK for Augmented Reality), so my javascript "bridge" handle all those API calls.
Every single app is made then within WebView environment (here I can use a variety of js libraries and frameworks like AngulerJS, JQuery etc...). My apps look like a transparent html body, camera image behind it with augmented reality 3d scene (3d models and 3d interfaces), other html views used for texts, images, lists, forms, popups, dialogs and so on.
This stack i quite solid and i made a lot of apps with it.
Then I found React-Native and i thought about realizing the "2D" part (that was always made in HTML) using native mobile components. So the question is: is it even possible to use my javascript "bridge" in React-Native context? I mean this "bridge" is attached to the WebView, what if I could transform it somehow to use with React-Native?
No, you can't. React Native does not use WebViews under the hood but normal iOS / Android UI Components.
I want to reuse some code that retrieves data from an API for two apps. One is an iOS app using React Native. The other one is a website using React.js.
I initially coded the class that retrieves data from an API when I built the iOS app. Thus, I used the fetch method available in React Native.
Unfortunately, there isn't such a method in React.js.
My best option if I want to reuse my code is to abstract the call of the React Native's fetch method by creating a class HTTPRequests with a method fetch which will call the React Native's fetch method or the '$.get' method depending on the lib used by the project: React.js or React Native.
My question is the following: How can I detect the using of React.js or React Native in my project. My first idea is to detect if my JS code is executed through RCTRootView engine or a browser. But I've no idea how to accomplish this.
Any suggestion?
Thanks!
My suggestion would be to move shared logic into separate module (bower, npm, ES6), generalize the way you request data through fetch polyfill, and never ever bother with detecting React/React.native in your project. JS code detection will make your code unnecessary complicated and hard to support when new versions of React/React.native will come up.
I have successful experience of building a cross-platform application with React and React Native using the platform-specific extensions feature of React Native. I've just described how I structured the code in order to achieve that in a blog post Code sharing between React and React Native applications