I am building a RN app that wraps my React web app. There, I have a chat page that uses socket.io
It works perfectly fine when accessed through web browser, but it doesn't even connect to socket when accessed through RN WebView.
Please share your experience to get through this.
React Native Webview Github issues have this issue on it
Related
I have a React Native application for both Android and iOS. Along with a React web application. Now temporarily I need to stop opening React Native app upon clicking our web application routing link either in email or chat messages or etc.
Tried doing so by commenting out RCTLinkingManager references and Linking react native code. But no luck.
We are trying to create a React Native mobile app for Jitsi from scratch using the lib-jitsi-meet API, and we have a self-hosted jitsi-meet on AWS server and we followed quick-install guide. For the purpose of this post, the URL is https://jitsimeet.example.com.
In the React Native app, we are able to join a conference called test1 using JitsiMeetJS.initJitsiConference. Once joined, the user is visible as "Fellow Jitster" on the browser at jitsimeet.example.com/test1, but the tracks (video/audio) we are adding to the conference (from React Native mobile app) are not visible and in the browser, it just says "Participant has stopped the camera" and "Participant is muted".
We have tried meet.jit.si & beta.meet.jit.si in our React Native app to see if the problem is related to our backend installation. But these were also not working.
We have also tried the same conference jitsimeet.example.com/test1 on the browser and in jitsi-meet mobile app and they are both working fine without any issues.
We have also set up the jitsi-meet repository locally. On running the React Native part on the Android emulator, it is working fine (both joining the conference and rendering the audio/video tracks).
From the above observations, it seems to be that the issue is coming from our implementation of React Native app.
Our code for the component that initiates the conference can be found here. Here you can find the link to our repository. To run it, just do npm i and npx react-native run-android. We are using polyfills in our react-native code as given in the jitsi-meet repository.
In the logs of jicofo on our server, we were able to see that when users join via web or jitsi-meet mobile app, we are getting:
org.jitsi.jicofo.ParticipantChannelAllocator.log() Sending session-initiate to: test1#conference.jitsimeet.example.com/2502e6ad
org.jitsi.jicofo.JitsiMeetConferenceImpl.log() Got session-accept from: test1#conference.jitsimeet.example.com/2502e6ad
org.jitsi.jicofo.JitsiMeetConferenceImpl.log() Received session-accept from test1#conference.jitsimeet.example.com/2502e6ad with accepted sources:Sources{ video: [ssrc=467278592 ssrc=2301072636 ssrc=839807103 ssrc=3616291734 ssrc=2331517151 ssrc=3181098946 ] audio: [ssrc=2795704819 ] }#2129717334
Whereas when we join via our React Native app, we are only getting:
org.jitsi.jicofo.ParticipantChannelAllocator.log() Sending session-initiate to: test1#conference.jitsimeet.example.com/946022e6
More information which might be relevant
On the client side, we are adding tracks after CONFERENCE_JOINED event is fired, then, we are getting the following logs
[JitsiConference.js] _doReplaceTrack - no JVB JingleSession
[JitsiConference.js] _doReplaceTrack - no P2P JingleSession
As mentioned above, we can join the conference from our react native app and we are getting CONFERENCE_JOINED, USER_JOINED, USER_LEFT events.
The TRACK_ADDED event is also firing locally right after adding local tracks. But it is not firing for any video/desktop-sharing/audio changes occurring on other remote clients (web browser or jitsi-meet mobile app).
How can we fix this?
Does React Native support Web and Desktop targets?
I would like to build the main version of app as mobile.
Would it be possible to compile the same mobile app, maybe with minor modifications for Web and Desktop?
The user experience for the secondary use cases - Web and Desktop doesn't matter much, I need just the app more or less in a working state and it will be enough. Does React Native allows that?
For Web, you can use react-native-web
I am new to NativeScript and I just used VueJs since last year only. I already got a working website with admin page and dashboard made with VueJs and Bootstrap for my front-end.
I have read about nativescript these past few weeks and I planned to make my website native.
Should I rewrite my website with admin functions in nativescript or could I just use nativescript to enable my website as native app in android?
Thank you.
If you have coded your app with Vue or Angular and if you choose NativeScript to build your native mobile app, then you will be able to reuse the data model, services, basically anything that is not related to UI.
We call it native mobile app for a reason, your UI is pure native here, more or less equivalent to building a mobile app using Java (Android) / Objective C (iOS). You will have access to all native UI components and device apis, which is why you have to recode your UI.
What you must be looking for is something like Corodova / PhoneGap (Hybrid mobile app) which can just take your web app and wrap it inside a WebView.
If you create a WebView within a react-native application, is it possible to access the cookie from the WebView to be passed in subsequent requests?
An example would be presenting the User with a login page with reCaptcha in a WebView. Then using the authentication cookies from a successful login to make subsequent API requests to the same site.
React Native is just a bridge on top of the native code. Anything you can write in objective-c/java can be used in React Native by creating native modules.
I am not sure if there is JavaScript code present for clearing the cache of a webview, but you can certainly write native code for it and then bridge it using native module.
Here is the link for the native code(iOS) : https://stackoverflow.com/a/5606703/2164029
Tutorial for creating native moduels : https://facebook.github.io/react-native/docs/native-modules-ios.html
I believe this https://github.com/joeferraro/react-native-cookies should provide you what you want.I have used this to clear cookies successfully.