I'm using an Expo Bare Workflow setup with my React Native App.
I followed this guide EXACTLY https://redux-toolkit.js.org/tutorials/quick-start copy pasted everything.
Imported
import { store } from "./src/main/redux/store";
import { Provider } from "react-redux";
on my App.js but it crashes when I build the app for Expo Go testing using eas update. If I remove those two imports, the app works fine.
I've followed the quickstart guide exactly, so for the code you can refer to the quick start guide as it might be redundant if I still post it here.
There's no error message from the App because it crashes on startup. I do get one from xcode saying com.facebook.ABI46_0_0React.ExceptionsManagerQueue and the rest are some obscure messages
Related
I am building a React Native Application using Expo and I want to integrate a 1:1 video calling functionality in the app.
From what I have researched so far on the topic is that I can use SDKs of various libraries like Twilio, Videosdk, VoxImplant etc to implement that feature or I have to use WebRtc in native project alongwith some mechanism to create rooms using socket.io and node and then join users in that room (not completely sure about it but something like this)
But both of these solutions require me to make changes in native files which are not present in expo app by default for which I think I have to run expo run:android and then make require changes in files (correct me if I am wrong)
Although on web I think its relatively easy to implement video calling using vanilla js or react js.
My question is if I implement a webpage that has video calling function and try to open it in webview in my expo react native app will the functionality work on app or not? has someone tried this before.
As I was exploring options I came BigBlueButton APIs and another question on Stackoverflow that is using Webview to connect to BigBlueButton APIs. Can I use this logic to implement something in expo app without ejecting or using any sdks? Will it work
What would be the best way to implement video calling in my expo app
Thanks
Utilizing Expo, you are essentially using 'React Native for Web', and with the new functionality of Expo config-plugins, almost all packages for React Native with auto-linking can be made to work with your Expo app, or more-or-less can have Config Plugins created for them.
For your case, good news for you, you can make it all work on Expo managed workflow, just utilize expo-dev-client and the following library:
react-native-webrtc
There's an Expo config plugin for this package. So now all you have to do is just utilize the Web-based functionality of WebRTC, such as calling:
navigator.mediaDevices.getUserMedia()..
navigator.mediaDevices.enumerateDevices()..
navigator.*
And ensure it works properly on Web. Then, just make a platform hook at your App.js / First loaded module / before having these WebRTC based functionalities calling the aforementioned library's initializer. e.g:
import React, { useEffect } from "react";
import { Platform } from "react-native";
import { registerGlobals } from "react-native-webrtc";
...
Platform.OS !== "web" && useEffect(() => {
registerGlobals();
}, []);
...
One more thing you'd have to do is that for Web, have the <video> element and for native apps, resolve it to <RTCView>, so essentially you could also make a platform specific component/module that resolves to either the web-only <video> tag or the native <RTCView> based on platform, like the example above. Perhaps even have the imports be resolved based on dependencies if you face any errors importing 'registerGlobals' at Web, for example.
I'm trying to use Segment for analytics on my React Native app. I want it to work for both Android and iOs. This issue persists on both OS's.
I installed the NPM library as explained here by doing:
yarn add #segment/analytics-react-native
yarn react-native link
Expected behaviour: I'm able to use analytics in the app
Actual behaviour: an error is thrown with message "Failed to load Analytics native module"
Code: (i do this in App.tsx/componentDidMount)
import Segment from '#segment/analytics-react-native';
import FirebaseAnalytics from '#segment/analytics-react-native-firebase'
Segment.setup(keys.segment.writeKey, {
recordScreenViews: true,
trackAppLifecycleEvents: true,
trackAttributionData: true,
using: [FirebaseAnalytics]
})
This is pretty much what they use in the documents. I'm not sure what I'm doing wrong. One thing to note is that I'm using Expo, not plain react-native.
I've tried solutions mentioned here and here but to no avail.
I use expo SDK v35, and works on the managed workflow (one without eject).
In my project, I face warning whenever I use AsyncStorage as demonstrated by their doc.
This, however, results in following warning being emitted:
Warning: Async Storage has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '#react-native-community/async-storage' instead of 'react-native'. See https://github.com/react-native-community/react-native-async-storage
I tried to follow the instruction given by this warning, and tried to use #react-native-community/async-storage, but it did not succeed; it appears the library requires some linking, which is not available if you want to work inside the Expo's managed workflow.
Question
What is the proper way to handle AsyncStorage warning when working on expo's managed workflow?
Env
Expo 35.0.0
Recently I began developing a simple app using react native and the expo cli. However, on the react native docs, it seems that asyncStorage is getting deprecated. The solution would normally be to use the react community version but that is not compatible with expo.
https://github.com/react-native-community/async-storage/
There is currently no scope of linking libraries while using the managed workflow of expo. I've faced similiar issues , and was bound to migrate from expo to pure react native. And expo isnt meant for production as apps are slower. Better i would suggest you to migrate to pure React native . Async storage cant be used otherwise and if deprecated , you will be in a great problem in the future for your app.
For about the last 24 hours I decided to take my react native project off expo. So I ejected it and started to doing the proper troubleshooting to run my app using react-native run-ios. I have managed to make my application's build succeed via Xcode however when the application runs I constantly get an ERROR. I noticed within my react native file I don't have an index.js. Not really sure why not and how to make one. I did try running react-native init, however, that just made my build fail and I had to go through a whole process to make it work again. Any help would be very much appreciated.
NOTE: I am not able to embed images at my level. So, I do apologize for the link
package.json + look at my files
Add an index.js in your root with the following:
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('YourAppName', () => App);
I'm trying to learn and understand how AWS Mobile Hub works.
Based on I'm trying to create a React Native app from scratch and connect to a AWS Mobile Hub.
I followed the steps in the AWS Mobile React Native Starter # Use features in your app to create a React Native app from scratch.
Setup a new project in AWS Mobile Hub.
Used awsmobile init <ID> to setup the react project for AWS Mobile Hub.
Enabled User Sign-in on AWS Mobile Hub project.
Setup Authentication in the React Native project.
(ps. there is an error in the guidelines because 'Amplify' import is missing)
Run the app with npm run ios
No matter what I do, I alway get a 'Application ... has not been registered' error.
The example backend from 'AWS Mobile React Native Starter' does work.
I have tried to compare both AWS Mobile Projects, but cannot find what causes the 'Application ... has not been registered' error.
I want to understand this AWS Mobile Hub thing and want to be able to setup projects myself and know how to integrate it into apps.
Any help to solve this error is greatly appreciated.
Finally found the problem.
First I thought it was because index.ios.js and index.android.js were missing, but then saw those are not needed anymore.
Aparently, when doing an application from scratch, the created 'index.js' does not have the correct component name. Changing the wrong name in AppRegistry.registerComponent('wrongname', () => App); to the correct application name, matching aws_project_name in aws-exports.js, fixed the issue.
The app now loads. Hurray!
Next problem: when signing in I get a 'No Userpool' message. Checked all config and Mobile Hub project, but the user pool seems correctly configured...
Update: also found the issue with 'No userpool'. When debugging the application, I noticed that the configuration received by Amplify.configure function was undefined. But I copied this code:
import { withAuthenticator } from 'aws-amplify-react-native';
import {awsmobile} from './aws-exports';
from this AWS React Native Starter App tutorial. But apparently it is not working.
Replacing that bit by this:
import Amplify from 'aws-amplify-react-native';
import aws_exports from './aws-exports';
from
AWS Documentation » AWS Mobile » Developer Guide » AWS Amplify Library for React Native » Get Started
. Now it suddenly works.
Thanks AWS! Took me couple of nights to find :-/
I saw that problem before when there is a version of aws-amplify installed under aws-amplify-react-native. That happens when the version of aws-amplify installed on the project is not the one that requires aws-amplify-react-native. I hope everything goes well with your app.