How to embed a website in expo React Native - reactjs

I want to embed or just redirect to a website I made which uses a webcam. I can redirect to the website with webView however the camera doesn't work.
This is the website I want to embed. https://chinmaymhatre.github.io/currency_detector

I don't think you can permit camera access inside a webview in a react native or expo app because of security concerns, neither could I find anything like that.
I think it would be easier to just implement this right into the react native app(if the app you want to show in the webview is written in javascript)

I have tried something similar. So, sometime ago I was making a video streaming app using React Native for a website that I made using WebRTC which was using camera and other medias(Video, Audio and Screen). I tried to be smart and tried to embed the webpage directly into the React Native App. My Idea was that I could access the Camera and other user media in Mobile Browser So, it should work with React Native as well. But this is not how the react-native works, React Native doesn't uses iframe to work or in other words react-native develops Native Apps for both IOS and Android. You can always implement an iframe in expo, but this is against the Device Security to provide such level of access to user-media. The device doesn't allow such functionality via iframe (here's the link to a live example how to implement iframe in expo). So, to understand it better You should use react-native-cli to make a simple app not expo. Now for using camera in expo there's a package called expo-camera (here's link) Which helps you develop camera oriented apps using Expo. If this doesn't answer your questions then let me know. Happy Coding :)

Related

React, open mobile camera on web

I have a React web app and I want that the user click a button an open the camera if it's in mobile device, in order to select pictures from the gallery or take photos directly with the camera. With React Native is quit easy, but I need to do it in web, with browers.
I have test the npm library https://www.npmjs.com/package/react-webcam but that library display the webcam in the web, I want to open the mobile interface, any idea?
You cannot access native android libraries with reactJS(that's why we use React-Native or Android SDK), someone is still to create a library for this.
You can always ask the user to upload an image instead.
Code:
https://codesandbox.io/s/elated-shannon-5yg9x?file=/src/index.js

Cross platform SDK

I am new to React Native. So here goes my scenario:
We need to create a new SDK that would be embedded into multiple technologies: React Web (JS), React Native APPs, iOS Apps (Swift and Obj-c), and Android Apps (Kotlin and Java). This SDK will offer:
APIs to get access tokens (issued by our corporate authenticator) so that the APP can talk to our API Gateway; something on the lines of getCurrentAccessToken();
Standard screens for login, Change Password, Forgot Password, OTP, etc; The UI should look and feel NATIVE to each target platform that it will be running on (Web, iOS, Android). Transitioning from a Native Screen to SDK's Screen should be smooth.
Be small (package size) and have OK/Hermes performance on both API Calls and Screen loading times (it doesn't need to be as fast as Native, as this SDK will be used once or twice every time the user starts the main APP);
I have checked boden.io (C++) but it would not work on WEB. It might still be an option (having 2 SDKs, one for WEB one for Mobile) so I didn't rule it out yet.
Is such a thing feasible in React Native? If feasible, is it a good idea?
PS: I know I would still need native binds/wrappers for each technology so that the SDK looks NATIVE to the caller, but that would be a minor issue.
Thanks
You can use go lang and gomobile to build the sdk for iOS, Android and Web.

Is there a way to embed a RFID scanner in a iOs App, built with react native app

I'm currently developing an app with react native. I would like to be able to scan RFID tags with that app. I've read that it's not possible for iOs, but the posts are quite old so maybe this has changed? Or does anybody know workarounds? Maybe with iphone cases that have an integrated scanner?
No.. RFID capabilities are not yet supported in iphones.. As an alternative, see if NFC can be of use to you as they are currently supported.. Please refer to this post
https://medium.com/#griffinmacias/understanding-rfid-nfc-and-ios-11-3b305fff24e6

How can I implement a Web barcode scanner in React to work in browser (desktop/mobile)?

I would like to have a camera view, which uses device's camera and detects barcodes' data. How can it be done in a React app?
Not for React Native. It has to work both on desktop and mobile using browser.
As long as you use a barcode library implemented in JavaScript, you can make your web apps work on both desktop and mobile.
I've written an article - How to Build Web Barcode Scanner Using React and Webcam which shows you how to build such an app from scratch using Dynamsoft JavaScript Barcode SDK.
Dynamsoft JavaScript Barcode SDK is commercial software. If you want to use open-source SDK for free, you can use ZXing as the substitution.
Here is the source code:
https://github.com/yushulx/zxing-cpp-emscripten

Creating an OSM map app with React native and Expo

i need a hint... started in React native and tried Expo. Goal is to create an OSM map app for hiking. So far i run into 2 problems:
no background works in Expo location
no OSM map plugin compatible with Expo
First might be resolved in the future, the Expo guys work on that.
Second... using something like the mapbox for JS will not help, as i did not see any solution for offline caching.
Now i am asking myself if i should continue without Expo using pure React native (mapbox SDK will offer caching), or keep Expo and create a map-box on my own (loading tiles based on lat/lon and displaying the current position on a tile is not that hard...)
Any experiences for a similar problem?
As this is kind of a learning project i am not interested in available apps, i am already using some of them ;)
Thanks and regards, Jo

Resources