I need to develop a mobile application which will be same for my web site (already create with reactjs). I was researching on reactjs. Can I convert my reactjs code from web-site to reactjs for mobile application ?
need a solution please
Thanks
No bro, a PWA cannot be uploaded to the apple store, by the way you can bypass this problem using ionic capacitator!
Capacitor is a cross-platform app runtime that makes it easy to build
web apps that run natively on iOS, Android, Electron, and the web. We
call these apps “Native Progressive Web Apps” and they represent the
next evolution beyond Hybrid apps.
According with this tutorial written by Manish Mandal to do so u have to:
1 - First, go to the root of your existing react app and create a file capacitor.config.json and inside that put the below code
{
"appId": "io.ionic.yourapp",
"appName": "yourapp",
"bundledWebRuntime": false,
"npmClient": "npm",
"webDir": "build",
"cordova": {}
}
2 - Now create another file name ionic.config.json and inside that insert the below code.
{
"name": "yourapp",
"integrations": {
"capacitor": {}
},
"type": "react"
}
3 - Now we need to build our react project. To build your react app open your terminal to the root of the project and run the below-mentioned command
npm run build
Note: this will create the build folder in your root porject and the
name of the folder should match the webDir name inside
capacitor.config.json file
4 - Now we will install ionic globally in our machine. To install ionic globally in your machine open your terminal and run the below command.
npm install -g #ionic/cli
5 - Now install the capacitor core in our project.
npm install #capacitor/core --save
ANDROID
6 - After that, we will first create an android app with our existing react app. Open your terminal and type
ionic capacitor add android
This will create the android folder in your root project and install all the required dependencies.
7 - Now run the below command to open your android project in android studio.
npx cap open android
Wait some time and then it will ask you to update the Gradle. Just update the Gradle to the latest version and run the project in the emulator. You can also connect your mobile to run the project live on your mobile phone.
8 - Now open the build menu from the android studio and build your apk file.
IOS
9 - To create ios app run the below command
ionic capacitor add ios
This will install all the required dependencies and ios folder to your project.
10 - Now run the below command to open your ios project in Xcode.
npx cap open ios
11 - Now open the app in emulator or physical device and build the app.
More info about capacitator:
https://capacitorjs.com/
so you need to create progressive web app , all it takes a mainfest.json file in your meta tag WebApp Manifest
with some splash screens and icons chrome will make you install mobile app like on client devices. And try to implement a service worker to handle the offline mode Service Worker
This course from egghead is very good PWA
You could create an "app" that is really just a webview that shows your website but it won't really have the same experience as a native app.
As mentioned a PWA would be a good approach. This way you can keep all your ReactJS code and have an app-like experience.
Android even supports submitting PWAs to the store.
You can't perform code conversion from react-js to react native directly, even though there are many similarities between them. Web application built with React.js can be easily converted to a React Native mobile app, and some source code can be reused
if you want to develop a single app for both mobile and web either,
create a web app that mobile browser friendly
or
create PWA(Progressive Web app) using React, PWA can access Native Mobile api like GPS
I am working on a react native application and this is my my first project in react native. I have installed react native, jdk, android studio, done the set up for AVD manager and emulator running also. But when I started to run the app through command line it showing me error Could not install the app on the device.
Can please anyone help me to resolve this issue.
Thanks in advance
Your Java version is 11.try to downgrade or install jdk version 8.
I have everything installed,but when i use "npm-start" or "react-native run-android",it gets stuck at Loading "Dependency Graph ,done",nothing happens after that,any inputs would be helpful,running on Windows 10.
Make sure you have a device connected (either emulator or physical device) by running adb devices
I usually have two command line windows open. In one window I run react-native start and in the other I run react-native run-android.
Essentially, react-native start runs a packager for your app while react-native run-android will install the app on the device. If you only run react-native run-android, a new packager should start in a new cmd window.
The packager (react-native start) is where you will see Loading dependency graph... Done.
I am trying to build a small app in react native using android studio emulator. I found this issue when I tried react-native run-android.https://i.stack.imgur.com/DY7br.png
Do I have to run react-native run-android and react-native start in my command prompt every time time I reopen my project and emulator?
-- Thanks
You usually do. The react-native run-android command might be optional if you do not want to deploy the android native code again (for instance, if you have not made any changes). You will have to launch the application manually and it will try to connect to the packager that starts with react-native start. I am not sure if you can bundle the JS for offline use in debug mode. Maybe you can try the same procedure as in this answer, but with assembleDebug in order to avoid that one.