I am trying to add offline support to an AI-based app I am building on React Native, The app is similar to Not Hotdog of Silicon Valley. I recently found out Tenserflow.js and tried to implement it with React native and even outputted my python model to the one that is supported by Tenserflow.js but when I try to import Tenserflow.js inside one of the React Native components using import * as tf from '#tensorflow/tfjs'; this syntax but React Native throws the error, the error screenshot is attached with the question.
Thank You !!!
The short answer is no as stated in the description of the project.
A WebGL accelerated, browser based JavaScript library
The error you are getting shows that it's trying to use window which is part of the DOM API in browsers. React Native has no such API as it's not a browser. You can see that they use window in multiple places in their Core API.
The long answer is a maybe but is out of scope for a StackOverflow answer as it would be akin to asking for a tutorial. To elaborate, I can see two approaches to possibly getting TensorFlow.js to work:
Polyfill everything that is missing:
This might be possible but it probably won't work as you'd expect because it leverages WebGL. I'm not familiar with TensorFlow.js, but I would believe that WebGL is used because it would allow access to GPU acceleration making the workload feasible in the browser. You would need to do something similar in order for it to work well on a mobile device.
Leverage a WebView. However, you may again run into WebGL/performance issues as indicated in older questions such as this.
Since you didn't post any code whatsoever, there is no other guidance that I can give you on this question. One suggestion would be to look at maybe a native module such as react-native-tensorflow and the discussions people had around it.
#tensorflow/tfjs-react-native has been available on npm (in alpha) since late August 2019.
Related
i am react native developer , and my question is more generic than code
i am getting really frustrated with react native and the amount of bugs it has
and the extremely low performance on android devices specially the old ones
almost all of the important api are third party developed on github and they not maintained anymore with alot of bugs.
some codes doesn't work sometimes,
what i noticed with highly used(10k+ users) application in react native
on some android devices fetch request is repeated 4 times.
on some android devices async-storage is working probably .
on await and async are getting ignored
React.usestate is buggy and it is ignored sometimes
does flutter offer a better environment with less bugs
Speaking from personal experience, flutter is better than react native for several reasons, but I'll list the few best ones here:-
More interactice community :- Flutter has way more answered question in the past 2 years on stackoverflow than react
Better docs - The flutter docs cover everything, I mean everything\
Nativeness - Flutter does a great job at making the app look as native to the platform as possible
Wide range of packages - Like it says, there is a package for everything, You can also use platform views just in case there is something on the native side you want to add so there are no limits
The editors - OMg I cannot say how much easier it is with good descriptions of all the commands within the code. I mean you can hover on a function and if made by the flutter team or a proper package team, you'll see the full implementation
Rid of any form of html or css - The designing, is much much much much much * infinity easier because everything makes just more sense from a programmer's poin t of view
Great debugging - With flutter, you can debug on different scales, even on the release scale just in case there is a problem with release mode instead of debug mode and ofcourse the community is always there to help
Regular awesome updates - While react is slowly dying down on new features, flutter is booming. With the recent update to flutter 2.0 introducing null safety, the chance of bugs have gone down even more
So yes, I recommend you try to shift to flutter. There is even a full tutorial in the flutter docs for react-native decs to learn flutter.
As the React Native website informs us PushNotificationsIOS is now deprecated. What is recommended is using https://github.com/react-native-community/react-native-push-notification-ios. However, this project does not seem to be maintained or commonly utilized. Frustratingly, it lacks Typescript support.
I am having problems using a Notification Content Extention for some nice custom iOS notifications. I suspect this has something to do with react-native-push-notification-ios's use of now deprecated UILocalNotification. Like many projects in the elephant graveyard that is the RN ecosystem, it seems painfully out of date. I'm reluctant to further troubleshoot my issues because it seems like a lonely, time consuming and potentially fruitless effort. Additionally, I'm trying to avoid writing a lot of native code.
Is there a solution I am missing here? Or am I asking for too much native support from React Native?
I always use firebase for my notifications. It works really well in my opinion. https://rnfirebase.io/docs/v5.x.x/notifications/introduction
I use react-native-web and share code between ios, android and web.
Is there any technique to target both iOS and Android platform with a single file, and at the same time not target web?
I know that the code below doesn't work, but serves as an example of what I have in mind:
Container.native.js
Container.web.js
so there two ways of having platform specific code in React Native as mentioned here. The method that you are referring to is mentioned here.
Remember that react-native-web is designed firstly to make react native code run on the web, so your designing Mobile first.
It's very easy. For the same example you have given, this is how you can do it:
Container.js // For mobile
Container.web.js // For Web
Also, you can always use Platform.OS for specific Platform specifications.
Hope it helps.
Say I wanted to build something like a 2D side-scroller game. Would React Native be suitable performance-wise? E.g., can I use OpenGL-acceleration for it? Or would it probably be slower than just using WebGL and HTML5?
Researched some more and came up with this information:
Apparently there is a GLView which holds a WebGL context:
https://docs.expo.io/versions/latest/sdk/gl-view.html
On that page it says this:
Any WebGL-supporting library that expects a WebGLRenderingContext
could be used. Some times such libraries assume a web JavaScript
context (such as assuming document). Usually this is for resource
loading or event handling, with the main rendering logic still only
using pure WebGL. So these libraries can usually still be used with a
couple workarounds. The Expo-specific integrations above include
workarounds for some popular libraries.
Also a Twitter comment from Expo which mentions 'games' specifically:
Expo Graphics gives you the power of GL combined with Expo+React Native. It
is the foundation for image filters, games, and special effects.
And there should be a demo here:
https://github.com/gre/gl-react
Not much projects listed there which use React Native to build a game. Still, there being a WebGL context interface to a native OpenGL acceleration gives rise to hope.
I've used react-native-webgl to build a minesweeper game. This library has provided the performance gain I needed to render a 16x30 grid of cells with quick transitions from one state to another. In some circumstances the game needs to re-render dozens or even hundreds of cells at once. Default React Native renderer is not fast enough to do that without user noticing the delay.
Note that while react-native-webgl solves the performance problem, it requires you to write low level code such as creating shaders, manage the vertices etc. And I haven't found libraries built on top of react-native-webgl that would work for my task.
So if you really need or want to use React Native for your game, use react-native-webgl or GLView for Expo. Otherwise use a different technology like Unity.
You can find the source code of my game here.
I am making a language app that records any new vocabulary a user is trying to learn. It would be great if users can add their words via a speech to text program, instead of having to enter it manually. I am having trouble achieving this task. I am aware that there is an API for apple but not android. Is there anyway possible of doing this, using an API? Like for instance, google speech to text API? But I guess I would first have to be able to access the device's microphone. I am a beginner and this would be very easy using the web. Is React Native still too young for this task?
You might wanna look at react-native-android-voice, a React Native module that supports speech-to-text for Android.
As #delkant mentioned, there's now also react-native-voice that supports both Android and iOS.
Alternatively, you can always write your custom native module using Android's SpeechRecognizer API. Here's a summary of all the classes and interfaces you might need for this task. If you are familiar with developing native Android apps, it's pretty easy to create a native module and bind it to your React Native project. Here's the official documentation of how to achieve this.
You also have react-native-voice
A speech-to-text library for React Native.
It supports android and iOS
The react-native-bluemix module provides both SpeechToText and TextToSpeech for React Native: https://github.com/pwcremin/react-native-bluemix
It wraps the Watson tools for both ios and android: https://github.com/watson-developer-cloud
React Native uses SFSpeechRecognizer under the hood for iOS which have various limitations : https://developer.apple.com/documentation/speech/sfspeechrecognizer
Be prepared to handle failures caused by speech recognition limits. Because speech recognition is a network-based service, limits are enforced so that the service can remain freely available to all apps. Individual devices may be limited in the number of recognitions that can be performed per day, and each app may be throttled globally based on the number of requests it makes per day. If a recognition request fails quickly (within a second or two of starting), check to see if the recognition service became unavailable. If it is, you may want to ask users to try again later.