This is my first time using AWS Amplify, and I set up a React Native project with Expo. I have a Figma design file with all my components, and I synced them with the project. When I use:
import { MyComponent } from "./ui-components";
after running amplify pull,
It's giving me an error stating that it's not a valid import.
Is there currently a way to use Amplify UI components in React Native apps? If so, how would I go about importing these. I have aws-amplify-react-native installed already.
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 have created an app with React Native CLI.
Now, I would like to store sensitive data and SecureStore provides an API for securing data on mobile phones.
As I mentioned, the app has been created with React Native CLI. Do I have to do additional configuration to use SecureStore on the app or just npm i expo-secure-store and it is going to work.
If I would use EXPO, there is no additional configuration necessary.
AFAIK if you are using a none expo project you have to install unimodules first.
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.
I'm considering moving from React Native to Expo but to do this have to be able to read the old AsyncStorage data written using the React Native app in the new Expo version.
I was able to build the new Android app using our existing .keystore so it correctly replaces the old installed app but the AsyncStorage in the Expo app is empty. I guess it's because it uses different backend? The docs mention this
On Android, AsyncStorage will use either RocksDB or SQLite based on what is available.
Anyway to workaround this?
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.