I have project in react native and it was build in iOS and android successfully. I have not used react native cli for that project. Now I have to give support for web. So when I run the app all functionality should work in web same as in iOS and android. I have follow tutorial for that
https://javascript.plainenglish.io/how-to-integrate-react-native-web-existing-react-native-apps-8e4964ad2f0b
But when I run in the web it getting blank page.
I have tried many ways but it getting blank page. It is possible to run the app in web without using expo?
Please help.
if you don't want to use expo, i suggest you to use this react-native-web
I am very new to react native development. I am using Expo for development. I need One signal for push notification in IOS and Android but I cannot find proper information on it. Can someone please help me on this.
That is because Expo doesn’t support OneSignal
From the first page of the OneSignal documentation for react-native
If you are building an Expo project, please note that we have recently
updated the SDK so that it will no longer crash when you add OneSignal
as a dependency inside Expo's development environment. However, please
note that until you detach from Expo and link OneSignal's native SDK's
(along with React Native's own dependencies), any calls to OneSignal
functions will be unused.
If you want to use OneSignal you will have to eject your Expo app.
You can eject by running expo eject in the terminal.
My friends and I are building an Electron app (a personal project) that helps you build React Native apps. We would love to have a live preview of the React Native app within the Electron app. Is there a way to do this?
I tried seeing if Expo would allow you to do this but seems like there is no documentation.
It could be interesting to look at react-native-web and try to integrate it to electron. It would be lighter to support than an emulator .
I have not tried yet but it seems that there is a library that provided an extension to react-native-web / electron.
I hope that it will helps you !
I've read some docs that says that ejecting a Create React Native App (CRNA) is irreversible. Im not sure what this means exactly.
Will I not be able to build my apps again for App Store, Play Store? Is it just a 1-time feature?
Will I lose files/ code that prevents me from ejecting a second time?
I'm trying to dig a little deeper into this. If anybody could share links to relevant blogs or forums, that would be great.
Ejecting is irreversible in the sense that if you modify the ejected project, you cannot convert it back into a CRNA project (except by creating a new CRNA project and copy/pasting all your code)
You can build for the App Store/Play store from a CRNA or an ejected project. For CRNA you would usually use exp:build and for ejected apps you could build from XCode. If you're only ejecting to get a standalone app, don't do it! Check out Expo's building standalone apps.
If you're worried about ejecting and losing you're original CRNA project, I recommend duplicating it before ejecting.
There's no reason to eject more than once. If you've ejected you can continue working on the ejected project.
This may be a naive question, but I couldn't find too much information on this topic.
I have a fully functional react-redux application and I would now like to port it to iOS and Android. I have no need to use any native features like GPS or Camera etc. In theory I just want to make a sort of webview that runs the existing React app, and then tweak it until it looks more presentable.
My first attempt was to simply use my current jsbundle file and stick it into the AppDelegate as the jsCodeLocation. That expectably caused all sorts of errors such as "window" not being defined.
I guess my question is: how do people usually manage their native and non-native codebases? Are they completely separate, or is there a way to recycle most of the code?
As others have mentioned there's no quick way to convert react to react-native.
A possible alternative if you want your react app to run on a mobile device without rewriting your codebase is to use Cordova. For fun I ported a react-web app into a mobile app using Cordova in just a few minutes. There are some drawbacks to this method, but the benefit is that you can have a working mobile app in very little time.
Below are the steps if anyone is interested in a Cordova workaround alternative:
REACT SETUP (done in command line)
>1. npx create-react-app my-app
>2. cd my-app
>3. npm start
DEPLOY TO STATIC:
>1. Update your package.json file from your my-app directory to add "homepage":"." (see below)
"name": "my-app",
"version": "0.1.0",
"private": true,
"homepage":".",
"dependencies": {
>2. Build (in command line) npm run build
CORDOVA INTEGRATION (in command line)
>1. cd ../ (change to wherever you want the project created, don't do this inside your existing react app folder)
>2. npm install -g cordova (only if you already don't have Cordova installed)
>3. cordova create MyApp
>4. cd MyApp
>5. cordova platform add ios //or android or browser
ADD A COUPLE STEPS FOR INCLUDING YOUR REACT PROJECT
>1. Open your Cordova MyApp www folder, delete all files and folders in it except for the 'js' folder
>2. Back in your react build folder update the index file to add two cordova scripts:
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
>3. copy all your files from the react build folder into the Cordova www folder (replacing everything except the js folder)
BUILD REACT-CORDOVA APP (in command line, inside your Cordova project)
>1. cordova build ios //or android or browser
TEST OR DEPLOY TO STORE ETC.
>1. Use xcode to open open your react-cordova .xcodeproject, this can be found in the MyApp/Platforms/ios/
>2. Select your simulator and run. Enjoy your new mobile app!
TWEAK
There are some minor tweaks you'll need to do (like remove the tap delay...etc)
-I think this is why people think Cordova apps are slow, but it's an easy fix...
You cannot just use your whole code into the react native application. First and foremost, you have to follow the react native architecture and then develop your UI using react native components.
https://facebook.github.io/react-native/docs/getting-started.html
You'll get most of the help here.
There is another option also, you can just create a new react-native project and use webview in it and display your whole website there.
https://facebook.github.io/react-native/docs/webview.html
Some of the reusable things are styles:
var style = {
box: {height: 30, width: 30, padding: 10, ect...}
}
Logic such as state :
constructor(props){
super(props);
this.state= {text: "hi"};
}
the state can be shared between navite and dom like so
<View>
<Text>this.state.text</Text>
</View>
dom looks like this
<div>this.state.text</div>
You can even share functions but you have to be careful like it was stated above, as long as you're not directly invoking any dom or refs in your logic.
onClick(){
this.setState({text: "good bye"});
}
They're usually pretty separate, partly because your render target is different (i.e. no divs) and partly because of things like window not being available. It's possible to reuse code between web and native apps, but only if you're very careful about it.
From the react native release blog post:
It's worth noting that we're not chasing “write once, run anywhere.” Different platforms have different looks, feels, and capabilities, and as such, we should still be developing discrete apps for each platform
WebViews and React-native are two completely separate concepts. Either you want to go with the former (than you can actually use your application without much hassle), or with the latter. In that case, you could probably re-use some of the business logic, however most of the rendering would have to be rewritten.
React native is learn once, write anywhere, not learn once, write once :)
For those who searching for a way to code once with react-native and export for Web, Android, and IOS, I suggest Expo.
It suggests building for the web just with this command expo build:web. Here is the full document
And about Webview that you have mentioned, I had made projects for Web and then use Webview to make mobile application of them, but it should be fully responsive and SPA to act as a real application when navigating between pages.
My own examples are: Web: Mehrg.com Android: Home Design App And another example is vitrinom
Updating an answer for 2022: Ionic (although this tech came about in [2013])(https://en.wikipedia.org/wiki/Ionic_(mobile_app_framework))
You can use Ionic!
I am planning on using it for a few of my bootstrapped projects where I would like to prove concept first before doing a full on Native build.
Some pros of Ionic:
Support for React, Angular, Vue
fast to build and deploy to both iOS and Android
can be built using browser based technologies i.e. traditional React development
JS is all you need (I suppose HTML, CSS, etc too)
plugins for mobile device features such as camera, fingerprint, NFC, geoloc, push notifications, deep links, etc
Cons:
Debugging is hard
Error messages are vague, which makes Debugging harder
You need to go through the app on your device in order to debug device specific issues. But this would be necessary for native builds anyways.
Sometimes builds just crash!
My advice with technologies such as Ionic and Cordova (mentioned by #Paul Schorey) is tread with caution when using these tools live for real users. It is probably best to have plans to go native as soon as you are able to, have the resources, or have the users that necessitates migration.
You have to refer the react native structure to actually understand how to convert your react app to your react native app.
To start from scratch I would suggest: https://reactnative.dev/docs/getting-started