I am working with designers on UI components. I am trying to find the best way for them to check React Native components without the need to use actual devices or simulators. Ideally, it will be web-based solutions.
I did some research I found the following solutions.
Expo snack - the issue is that the components are not publicly available (private npm registry)
React Native for Web - My concern is that component will not render correctly.
I am also considering using BrowserStack. But I can have similar issues as with the Expo snack.
Amazon Private devices I don't have a lot of experience with AWS. I need to check is posible to interact with the device using the web.
Any help with this will be very helpful. Is there some open-source solution that I can check?
Thanks.
Related
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
Need to reuse the react-navigation code from mobile to react-native-web. But I could not able to get it work in web.
Should we need to use react-router for web separately?
How can we configure navigation commonly for both platform?
I would love to see an example of this! It would be super helpful. Thank you!!
The above answers are quite old now I'd say as react-navigation has upgraded itself quite a bit since then.
react-navigation v4 has intensive support for react native web, now you don't need to maintain two separate navigation objects for web and app.
This blog explains it in detail. https://codersera.com/blog/how-to-do-navigation-in-react-native-web-in-2020/
Maybe you can check this implementation
Using React Native, React Native Web and React Navigation in a single project
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)
I am going to develop a web + mobile application using React and React Native. I'd like to share as much code as possible between React and React Native. I was looking for some starter kits, but found only este. However, for me, it seems to be an overkill as it has too many dependencies (also I wasn't able to make it work for Android - when I fix some error, I run into another one).
I'd like to have just React + React Native + Redux + web bundling etc. Are there any other alternatives? Or at least very simple example apps that I could use?
Did you check the awesome React-native list ?
As I said in this thread, as long as you follow the component / container pattern with Redux; you are able to reuse a lot of code.
The pattern encourages you to separate every presentational code into the comopnent. The container holds all the logic.
Then when you want to reuse the code, you just have to rewrite the component.
Here is a great explanation on how to implement it.
Also, you may want to check React-native-web. It allows you to code in react-native for the .... browser.
Update: I now know why there aren't almost any starter kits that would combine React + React Native. The reason is that it is not a good idea to combine web React and React Native. Just create two separate apps, you'll save yourself a lot of headaches. For those still interested in combining the two platforms, have a look at React Native for Web instead.
So in the end, I've created my own started kit. You can find it here: https://github.com/gina-system/react-starter
why do not you check out https://github.com/teallabs/react-native-init
pretty amazing react-native starter kit with codepush, google signin, sentry, react-navigations and all setup steps.