Introduction

Overview of Web2Go - Website to React Native IOS Android App | Convert Website into App | Website to IOS App

Web2Go is a powerful and easy-to-use solution that instantly converts any responsive website into a fully functional Android and iOS mobile app using React Native. Whether you're running an e-commerce store, blog, portfolio, or business site, Web2Go lets you launch your own app without writing a single line of native code.

It comes with a fully customizable admin panel (optional) to manage features, and supports:

  • WebView-based display of your website
  • AdMob integration (Banner & Interstitial ads)
  • Firebase Push Notifications
  • Pull to Refresh, Onboarding Screens, RTL Support, and more
  • Google AdMob, App Sharing, Exit Confirmation Popup
  • Easy Configuration via URL.js file

Thank you for choosing Web2Go - Website to React Native IOS Android App | Convert Website into App | Website to IOS App If you have any questions not covered in this documentation, please feel free to reach out to us via support. We’re here to assist and will respond as promptly as possible. Thank you again!

Server Requirements

All server requirements are stated bellow

  • PHP Version 8.3
  • MySQL Version 8.3+ or MariaDB version 10.6+
  • BCMath PHP Extension
  • Ctype PHP Extension
  • cURL PHP Extension
  • DOM PHP Extension
  • Fileinfo PHP Extension
  • GD PHP Extension
  • JSON PHP Extension
  • Mbstring PHP Extension
  • OpenSSL PHP Extension
  • PCRE PHP Extension
  • PDO PHP Extension
  • pdo_mysql PHP Extension
  • Tokenizer PHP Extension
  • XML PHP Extension
  • Filter PHP Extension
  • Hash PHP Extension
  • Session PHP Extension
  • Zip PHP Extension
  • allow_url_fopen()
  • file_get_contents()

Installation

Application installation process

  • Upload the web2go_admin_panel.zip file directly to your server after purchase to begin setup.
  • Extract the downloaded file and move all contents from thezip file to your desired installation directory. Ensure all files moved successfully.
  • Quickly set up your database using the Database Management in your control panel.
  • After creating the database, access phpMyAdmin on your server, select the newly created database, and import the project database from the web2go_android_ios_app_v2.5/database folder.
  • After importing the database, configure the database credentials in the web2go_android_ios_app_v2.5/web2go_admin_panel/app/config/database.php file and update the necessary variables.
    Save it.
  • Setup base URL in the web2go_android_ios_app_v2.5/web2go_admin_panel/app/config/App.phpfile and update the $baseURL
    Save it.
  • Installation is almost complete. Your Admin Panel is now ready to use Simply visit http://yordomain.com (necessory settiing need to update from admin panel to run app smoothly) and log in with the credentials below
    • username:admin@gmail.com
    • password:demo1234

App Setup

Overview of the App Setup

  • Main Website Link (WebView URL):
    Enter the website URL that will be opened inside the app. This is the core URL of your website which the WebView will load.
  • App Share Message:
    Set the custom text message that appears when users share your app using the native share option.
  • Enable/Disable Onboarding Screens:
    Toggle to show or hide onboarding walkthrough screens that appear when the app is launched for the first time. Great for introducing features or your brand.
  • Enable/Disable Pull to Refresh (Android Only):
    Let users refresh the WebView by pulling down the screen. This option is available only on Android devices.
  • Enable/Disable Exit Popup (Android Only):
    Show a confirmation dialog when the user presses the back button to exit the app. Helps reduce accidental app closes. Only functional on Android.
  • Enable/Disable Hide Footer:
    Use this option to hide the bottom navigation bar (footer) from the app interface.
  • Enable/Disable Hide Header:
    Hides the top header bar from the app to give a full-screen WebView experience.
  • Enable/Disable RTL (App Only):
    Enable support for Right-to-Left layout in the app. Useful for languages like Arabic, Hebrew, etc. This affects the app's layout direction.

Onboarding Management

Overview of the Onboarding Management

  • Add New Onboarding Screen:
    Easily add a new screen by uploading an image or illustration, entering a title, and writing a short description to guide your users.
  • Update Existing Screens:
    You can edit the content, image, or text of any existing onboarding screen to keep your app experience fresh and relevant.
  • Delete Unwanted Screens:
    Quickly remove any onboarding screen that is no longer needed with a single click.
  • Reorder Screens:
    Arrange the order of your onboarding slides by dragging or setting the display order number. This determines the sequence in which screens are shown in the app.

Screen Management

Overview of the Screen Management

  • Add New Screens Dynamically:
    Create custom screens by providing a screen name, icon, and link (URL). These screens will open as WebViews within your app.
  • Assign Screen Location:
    Choose where the screen should appear:
    • Bottom Tabs: Adds the screen to the app's bottom navigation bar.
    • Menu: Adds the screen to the side drawer (hamburger menu).
  • Set Screen Name:
    The screen name is the label displayed to users in the bottom tab or menu.
  • Choose Icon:
    Select an icon to visually represent the screen. Icons enhance usability and app appearance.
    To update any icon goto this link. the Icon only work that under Ionicons only
  • Provide WebView Link:
    Enter the URL that should load when the screen is opened. You can use internal or external links.
  • Edit or Delete Screens:
    Update screen info anytime or remove screens you no longer need.

ADS Setup

Overview of the ADS Setup

  • Enable/Disable Android AdMob Status:
    Toggle the global AdMob setting for Android devices. If disabled, no ads will be shown on Android.
  • Enable/Disable iOS AdMob Status:
    Toggle the global AdMob setting for iOS devices. If disabled, no ads will be shown on iOS.
  • Banner Ad Unit ID (Android):
    Set your AdMob Banner Ad Unit ID for Android devices. This is required to show banner ads.
  • Enable/Disable Banner Ad (Android):
    Turn Android banner ads on or off dynamically.
  • Banner Ad Unit ID (iOS):
    Set your AdMob Banner Ad Unit ID for iOS devices.
  • Enable/Disable Banner Ad (iOS):
    Toggle iOS banner ads visibility in the app.
  • Interstitial Ad Unit ID (Android):
    Set your Interstitial Ad Unit ID for Android—used to show full-screen ads during transitions.
  • Enable/Disable Interstitial Ad (Android):
    Turn interstitial ads on or off for Android users.
  • Interstitial Ad Unit ID (iOS):
    Set your Interstitial Ad Unit ID for iOS devices.
  • Enable/Disable Interstitial Ad (iOS):
    Dynamically control whether interstitial ads are shown on iOS devices.

Setup JAVA SDK

  • If your System already have Java jdk-17 installed then you can skip this step.
  • Download Java-17 jdk by clicking given link. (JAVA jdk-17)
  • Download Java-17 JDK for your version 32 bit or JDK download 64 bit.
  • When you click on the Installation link the popup will be open. Click on I reviewed and accept the Oracle Technology Network License Agreement for Oracle Java SE development kit and you will be redirected to the login page. If you don’t have an oracle account you can easily sign up by adding basics details of yours.
  • Once the Java JDK 17 download is complete, run the exe for install JDK. Click Next
  • Select the PATH to install Java in Windows… You can leave it Default. Click next
  • Once you install Java in windows, click Close
  • Now set your enviournment variable
  • From the Start search bar in , type ‘env’ and select Edit environment variables for your account
  • Under User variables check if there is an entry called Path:
  • Click on Edit. then Dialog will open from it, now click on new and Copy the path of bin folder which is installed in JDK folder. then Paste Path of bin folder in Variable value. Click on OK Button.
  • Repeat above process but this time set variable name JAVA_HOME instead of "path/PATH", and set JDK bin folder path in the variable value.
  • Now Restart your pc for changes to take effect
  • Now check everything is ok or not
  • Go to command prompt and type javac commands. If you see a screen like below, Java is installed.

Setup Android Studio

  • Check here for Android Studio Installation Watch Video

Setup NODE Js

Change APP Name

Android

  • To Change App Name Navigate from web2go_android_ios_app_v2.5
  • Open web2go_android_ios_app_v2.5 => web2go => android => app => src => main => res => values
  • Now open file strings.xml change here name as you want
iOS

  • To Change App Name Navigate from web2go_android_ios_app_v2.5
  • Open web2go_android_ios_app_v2.5 => web2go => ios => web2go => info.plist file
  • Now open file info.plist change here name as you want

Change APP Package Name

  • To Change App Name Navigate from web2go_android_ios_app_v2.5
  • Open web2go_android_ios_app_v2.5 => open search from sidebar
  • Now follow below image

Change Splash Screen

Android
  • To Change App Splashscreen Navigate from web2go_android_ios_app_v2.5
  • Open web2go_android_ios_app_v2.5 => web2go => android => app => src => main => res
  • Now follow below image
  • Note : your splash screen named should be screen.png
iOS
  • To Change App Splashscreen Navigate from web2go_android_ios_app_v2.5
  • Open web2go_android_ios_app_v2.5 => web2go => ios => web2go => images.xcassets => launchscreen.imageset
  • Now follow below image

Change API Url

  • To Change Api base url Navigate from web2go_android_ios_app_v2.5
  • Open web2go_android_ios_app_v2.5 => web2go => src => constants
  • Now open url.js
  • Now follow below image

Theme Setup

Overview of theTheme Setup

Admob Installation

Android
  • 1. Log in to your AdMob account on the AdMob website.
  • 2. Navigate to the "Apps" section or a similar menu in the AdMob console.
  • 3. Look for an option to "Add Android App" or a similar function.
  • 4. Click on the "ADD APP" button.
  • 5. Follow any additional steps or prompts to complete the app addition process.
  • 6. Click on Add ad Unit
  • 7. Select "Banner" ad unit, enter the banner unit ad name, then click on "Create Ad Unit" button.
  • 8. Get AdMob App ID : Click on App Setting
  • 9. Get Ad units ID : Click on Ad Units
  • Do above steps for interstitial ads from step 7
iOS
  • 1. Log in to your AdMob account on the AdMob website.
  • 2. Navigate to the "Apps" section or a similar menu in the AdMob console.
  • 3. Look for an option to "Add IOS App" or a similar function.
  • 4. Click on the "ADD APP" button.
  • 5. Follow any additional steps or prompts to complete the app addition process.
  • 6. Click on Add ad Unit
  • 7. Select "Banner" ad unit, enter the banner unit ad name, then click on "Create Ad Unit" button.
  • 8. Get AdMob App ID : Click on App Setting
  • 9. Get Ad units ID : Click on Ad Units
  • Do above steps for interstitial ads from step 7

Firebase Installation

  • Open official Firebase link to install Firebase in your React Native Android app:
  • Go to console
  • Create a project
  • Create Android App here
  • Enter your package name here
  • Download google-services.json file
  • Move downloaded google-services.json file into these path customer_app_project/android/app
  • Navigate to Firebase_Project Settings → Service Accounts.
  • Generate new Private Key update its content to the admin panel's setting.
  • In admin panel's setting also update Firebase project id
  • After installing firebase for android lets install Firebase for iOS app:
  • Create iOS App here
  • Enter Package name here
  • Download GoogleService-Info.plist file from here
  • Move downloaded GoogleService-Info.plist file into these path customer_app_project/ios
  • Navigate to "Project Settings" -> "Cloud Messaging" -> "Apple app configuration."
  • Upload your p8 Certificate here. (Follow this link to generate p8 certificate)
  • Copy Key ID and Team ID (Obtain Team Id from your apple developer account):
  • Paste in Firebase console and upload it with p8 file
  • Now Firebase is installed for Android and iOS both App

Update Version

Android
  • To Change App Logo Navigate from web2go_android_ios_app_v2.5
  • Open web2go_android_ios_app_v2.5 => web2go => android => app
  • Now open file build.gradle find defaultConfig as heading
  • Change versionCode & versionName
iOS
  • To Change App Logo Navigate from web2go_android_ios_app_v2.5
  • Open web2go_android_ios_app_v2.5 => web2go => ios => web2go => info.plist file
  • Now follow below image

Release App

Android
iOS

Support

How to get assistance

Whatsapp Us: +91 9766846429