Using a ui library with react native web - reactjs

i'm trying to use native base with react native web with out a lot of success, i tried looking for info if this is even possible but there doesn't seem to be a lot of info available.
I tried importing it but i get this error:
SyntaxError /node_modules/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js: Unexpected token (14:12) native-base
Here is a conde sandbox with the error https://codesandbox.io/s/react-native-web-native-base-3cih6?file=/src/App.js

Related

Connect front-end to Alchemy using alchemy-web3 in nextjs

So I'm trying to connect my react front-end to an alchemy node using alchemy-web3 as it says in this tutorial from the official website:
https://docs.alchemy.com/docs/integrating-your-smart-contract-with-the-frontend
The problem comes when I create that interact.js file and gives me an error saying:
TypeError: Cannot set property Request of # which has only a getter
I've seen other questions with this same error but using web3 library. In my case, I'm using that other library, alchemy-web3 (even if it's a wrapper of Web3) in a Nextjs. Do you know how to fix this problem, or if you know any documentation to connect a front-end with an alchemy node but maybe using web3 in a Nextjs app? That is important, in a Nextjs.

Typescript in SPFX breaks on using react router

So,
I am using OOB spfx project generated by yo sharepoint generator version 1.13.1 and react-router-dom 6.2.1 and typescript Version 4.5.4.
Everytime i do a gulp build tsc throws this error....did anyone got this working?
[16:04:24] Error - [tsc] node_modules/react-router/index.d.ts(151,74): error TS1110: Type expected.
[16:04:24] Error - [tsc] node_modules/react-router/index.d.ts(151,83): error TS1005: '}' expected.
[16:04:24] Error - [tsc] node_modules/react-router/index.d.ts(151,94): error TS1128: Declaration or statement expected.
[16:04:24] Error - [tsc] node_modules/react-router/index.d.ts(151,96): error TS1161: Unterminated regular expression literal.
[16:04:24] Error - 'tsc' sub task errored after 3.85 s
I've been struggling with this issue as well. It looks like the answer from Microsoft is "don't": https://blog.mastykarz.nl/build-multi-page-sharepoint-framework-client-side-web-parts-react/
When building SharePoint Framework web parts you might need to implement multiple views in your web part. When switching between the different views it is essential that you don't modify the URL in the browser's address bar which could render undesired behavior in other components present on the page. When building web parts using React, one way to implement multiple views in a web part is by conditionally showing the different components that represent the different views.
It appears Microsoft don't like you manipulating the URL to achieve routing within your SPFx app. Instead they're suggesting that you use internal state to define the view you show your user.

How to get DeviceInfo and DeviceId in React js web application Not React-Native Application

I have Installed React-native-device-info API in my React js project. But when running npm start command in command prompt it was throwing error like " Module not found: Can't resolve 'react-native' in '\node_modules\react-native-device-info\lib\module' .
I have tried all the solutions on google. But the implementations are related to react-native applications only. I need some help how to get deviceinfo and deviceid for REACTJS web application.
use the library => react-device-detect
link : https://www.npmjs.com/package/react-device-detect
Detect device, and render view according to the detected device type.

How to get React native function autocompletion in VS Code

I want to enable react native function suggestion and auto completion for react native in VS Code.
I have tried all the extension but none works.

Angular Dart with Polymer and Service-Worker incompatibilty

I'm currently trying to build a web app compatible with the Google Progressive Web Apps specs. To do this i use Angular with Dart and Polymer based Webcomponents instead of the Angular components. So far everything works as expected. To make the app offline capable utilizing the Service-Worker API i use the following dart lib: https://github.com/isoos/service_worker
Using either Polymer or Service-Worker works fine but combining booth just exits with an error on app startup.
This is my AppComponent startup routine:
// ... other imports
import 'package:service_worker/window.dart' as sw; // <-- import alone causes the error
Future main() async {
await initPolymer(); // <-- causes the error in combination with the import above
bootstrap(AppComponent);
if (sw.isNotSupported) {
print('ServiceWorkers are not supported.');
return;
}
//... initializing service worker
}
The error occurs even if i'm not initializing the Service-Worker, importing the Service-Worker module is enough to cause the error.
Building the app works without any errors.
I'm new to Dart and the Polymer and Angular eco systems and the error message i get is not very helpful to me:
Uncaught Error: NoSuchMethodError: method not found: js_helper.dart:1742 'h' (J.Q(...).h is not a function)
at Object.J.H (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:9747:15)
at http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:10559:1584
at Isolate.e.(anonymous function) (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:10608:15)
at Object.yK (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:9291:22)
at http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:9282:10
at yM.a (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:2612:72)
at yM.dart.yM.$2 (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:2828:24)
at y9.dart.y9.$1 (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:2824:31)
at xM.bi (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:3767:40)
at xk.$0 (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:3167:16)
Can you give me a hint what could cause the error and how to fix it? I would very much like to use the Polymer components instead of the plain Angular components but i need the Service-Worker for offline caching support.
This looks like an issue caused by incompatibility between dart:js (the old style, used by the original polymer package) and package:js (the new style, used by all new packages, including package:service_worker).
You might want to have a look at the polymerize project, which brings Polymer via the new-style interop. Then you'll have no conflict.

Resources