I have been trying to figure out which database to use with my React Native project (using Expo). I need online capabilities eventually, but would prefer to develop locally. I was initially looking at MongoDB/Realm, but both appear to not support expo. Is this correct? Or is there a way to use MongoDB with React Native and Expo?
i think you can use whatever database you like by connecting to it through a REST API using fetch in your react native project, in case you want to implement offline and realtime capabilities i suggest you take a look to firestore or realtime database
Related
I want to embed an unhosted react page (or a react component with some fancy 3rd party graph library) inside a flutter-for-web app. Why? I am think the react graph app I have is much nicer than what I can do in flutter (using the existing 3rd party packages) and so it might be good if I could just embed that react stuff inside a flutter-for-web app until I can do in flutter what I already have in react.
There is a flutter package (flutter_inappwebview) that can do this for mobile but I need to do it for a web app. I need to pass data back and forth between the react stuff and the flutter stuff too, so for instance the react graph will take in its data from flutter - not direct from the network or DB - and after drawing its pretty pictures and some user interaction will be able to send data back to my flutter code.
Is this easy? Already done in another package I haven't found yet? I know I can interop with javascript but just using #JS to interact with the react package (along with maybe some redux or maybe another basic state management) solution just sounds like it might be a tricky job.
Thanks
I am creating React Native App for mobile on Expo.
When we try to make mobile Apps, we should usually manage state in this app.
However, I am using Expo. Of course, Expo is useful to start React Native App easily and quickly but sometimes Expo cannot accept modules.
So, in this case, I tried to use Realm to manage state but Expo can't follow this.
Could you teach me which way for state management is better in React Native on Expo?
There's a few ways to go about this, two of which I know and have used:
AsyncStorage: This is default with react-native and you won't need to install anything to use it, here's a few tutorials and documentation on it.
https://facebook.github.io/react-native/docs/asyncstorage
https://medium.com/building-with-react-native/what-is-asyncstorage-in-react-native-and-how-you-to-use-it-with-app-state-manager-1x09-b8c636ce5f6e
https://medium.com/#richardzhanguw/storing-and-retrieving-objects-using-asyncstorage-in-react-native-6bb1745fdcdd
React-Redux: This is something I use a lot more, it utilises AsyncStorage but allows you to create a better storage flow and a system of persisting data so when you close the app and reopen it, the data will still be there. I've found React-Redux to be a lot easier once properly learned, here's a few documentations on it.
http://www.reactnativeexpress.com/redux
https://alligator.io/react/react-native-redux/
https://medium.com/#relferreira/react-native-redux-react-navigation-ecec4014d648
A quick google search on either (react native using react redux or react native using async storage) will give you quite a few documentations/tutorials that is quite useful and you always have Stackoverflow, if you're ever stuck.
there are multiple ways
redux (https://redux.js.org/)
mobx (https://mobx.js.org/intro/overview.html)
react context API (https://reactjs.org/docs/context.html)
for small apps, i prefered use react context and for an app with a large scale I using redux
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.
how to create web and android application using react. can I use both reactJs and react native. If I create web app by using reactJs, how to convert web into android application (reactjs into react native).
Thanks in advance...
I personally in my projects have not seen a way of doing this automatically. There are some things that you might wish to look at however.
https://github.com/necolas/react-native-web - Seems to allow you to use the same components from react native directly in a react project. So the idea being you write your react native project and then import this package for the web build and voila.
I have ended up manually managing the proccess. If you layout your application keeping your application logic completely seperate from any display component logic the process really isn't that painful. Not sure if there is a better guide but this might give you an idea http://jkaufman.io/react-web-native-codesharing/
You could also use something like webpack to automate this process of swapping components / packages out for native / web.
I have a full blown mobile web app using the following:
React
Redux
Redux-React
React Router
Firebase
I eventually want to convert this mobile web app to a mobile app and I am looking into using React Native. There is a lot of literature on how to build React Native apps from scratch or to convert a native app in Objective-C to react native but I am struggling a bit to find some prior-art of how to approach taking a mobile web app towards native.
More specifically, what are the things that wont work out of the box? I am looking at React-Router.
Some thoughts around how to start transitioning, what to touch and what to not worry would be very helpful.
UPDATE:
Imagine the following app structure. Its already a lot of code. So, I am wondering if there are approaches to do this incrementally?
Many folks are porting their React applications to React Native incrementally by using Web View as an initial 'foot in the door', and then using React Native views on a flow-by-flow basis. With the recent availability of react-native-webview-bridge ( https://github.com/alinz/react-native-webview-bridge ), two-way communication between those web views and the react native components is now very easy.
There can be performance issues when using Web Views on iOS versus the regular Safari app, so that may force certain UI flows to be converted to React Native before you can ship.
I'd highly recommend translating any Selenium tests to Appium to keep your automated test coverage up. React Native is still a bit volatile, and being able to upgrade quickly and safely will be highly dependent on having an automated test suite.
Be sure to have your API (is you have one), your reducer and your action outside of your web folder, because you'll be able to use them in your mobile app.Most of your app structure will be the same, except for the react-router. Like Jan Fanz Palngipang, you could use react-native-router-flux (which is the one i'm using)
I would recommend you to check starter kit like nativebase, rReact Starter Pro to see how their drawer is working.(see how they change container)