How to use existing amplify backend in both react and react native - reactjs

I have setup a simple Amplify backend API and connected it to a React Native frontend. Now I want to connect it to a React frontend.
Could I extract all of the Amplify code into its own project to be used by both frontends? I want to avoid code duplication as much as possible. Has anyone done this before?

This is a supported feature. You can read all about it in the docs about multiple front-ends

Despite React and React Native can share the same Amplify backend, according to my research, if your application has federated sign in, you must create two different stages for them, because of the Sign-in and Sign-out redirection url, React takes http://xxxx but React Native takes myapp://.

Related

Refactor part of a react native app to be accessible on the web

at my company we have a react native app. now we want to make so that some of that functionality, basically a component accessible via react-navigation/bottom-tabs, is also accessible via web.
from what I understand we have 2 options:
refactor that into a web app and then integrate it back into the app as a web view
use react native web to port that component part of the app for the web. here I would have really no idea how to proceed and if that is possible at all
am I missing out on something? do you have any other suggestion?
thanks!

Firebase are react-native backend

I have really been having a hard time intergrating firebase to my react-native UI.
Anyone who knows where(site, video or course) that one can learn how to use firebase as react native's backend?
Cheers!
you can use firebase as backend with their data base etc,
check out this blog https://rnfirebase.io/ , you will get to know about the different functionalities which you can integrate with firebase in RN

React native web split point

I am using react native web to develop my web application.
I want to create code-split for my web application.
From my research on the web, I found that react web application has some code-split methods, which is shown in https://reactjs.org/docs/code-splitting.html
Does react native web supports these code-split techniques: import(), react.lazy, and other techniques shown in the code-splitting.html?
Don't know whether it is currently supported.

Firebase authentication pre-built UI for React Native?

I'm currently building an app with react native and firebase. I was looking to add firebase authentication and was wondering if there is a way to add firebases pre-built authentication UI to a react native app? I looked through the authentication information for Web in firebases docs but the configuration requires a redirectURL to send the user to once they're signed in which I don't have for a react native app. If it helps, I am using a Stack Navigator in my react app. Is there a work around or will I just have to create a custom UI?

React and React Native archetypal model

What is a good approach for making a React web and a React Native app that share their APIs for consuming the same database?
The system will have some CRUD screens for managing products and their images as well diferent events that the user will save.
I will follow the component / container pattern with Redux to be able to reuse code.
I am working in Windows SO.
I was thinking in:
NodeJs (APIs) and Heroku server
MongoDB
React (web app)
React Native (mobile app)
Are there some common archetypal model when using React and React Native consuming the same apis and DB?
I know I'm going to get flamed for this one....Even though it's not persistant to what you asked. I started a new project where we are using Firebase as our cloud backend and it works seamlessly between the web, ios, and android versions (building in react native).
But in regards to your question, react and react-native work well together, You can setup your redux actions (in react-native) almost identical to your react web app. The only differences between how you want to query your backend and handle auth (native uses asyncStorage vs localstorage/cookies). React native has a built in Fetch vs any other React package like Axios or SuperAgent.

Resources