How to integrate WebToNative SDK for Base44 React App

If you have created a Base44 React app and eventually want an additional mobile experience beyond what a simple WebView can offer. One of the best approaches is to integrate Base 44 react app to WebToNative SDK. This way, you can package your react project into a Webview mobile app, and the SDK enables deeper interaction with mobile device features.

Moreover, it includes social login, deep linking, biometric authentication, and more, providing a richer user experience in the existing mobile app. Exploring this guide will help you understand how WebToNative can help with the installation and initialization of the SDK in your project, works, and enhance your app behaviour on both Android and iOS devices.

What Do You Mean by WebToNative SDK Integration?

WebToNative generates a connection between your react-based web app and a native app shell for Android and iOS. Without the SDK, your web project would simply show in the base44 react app, but with the SDK, you can access device-level capabilities and create a conventional native app.

Advantages of Integrating WebToNative to Base44 React App

WebToNative is a web-to-app platform that provides an SDK for extending your existing base44 react app. This way, SDK supports to react-based website without rebuilding the app from scratch. Additionally, this react native wrapper:

• Enables deep linking in the base44 react app, which allows users to open particular screens or sections immediately by clicking on the links or notifications.
• Delivers smooth app performance that ensures quick loading speed, an easy transition, and a more reactive interface.
• Provides an effortless native user experience, creating the impression of a real mobile app rather than just a website.
• Scales the future, as you can add new native features and functionality to your app as it grows.
• Enhances the security of apps through the support of the secure biometric authentication procedure, improving the safeguarding of user data.

Step-by-Step Process to Integrate WebToNative SDK into Your Base44 React App

1. Set Up Requirement Before integrating SDK into base44 react app, make sure that:

• Your base44 app is already created and public
• You have access to the paid plan for code edits
• Your app was cloned from a template or developed from scratch
• Familiarity with the functionality of the Base44 platform

2: Provide a Prompt to Base44 AI Agent

• Open the Base44 AI agent within your project.
• You need to install the webtonative package for the native functionality within the app.
• Provide the following command to the AI agent.
• Install the “webtonative” package from the npm directory.

This command will tell Base44 to add the WebToNative package to your React project.

3: Grant Package Installation Permissions

• Once the package is installed, the base44 react app will request permission to install the package.
• You have to grant permission for the successful installation.

4: Use Code Snippets After installation, you have to implement the SDK using the official code snippet.

import webtonative from 'webtonative';


webtonative.statusBar({ color: '#FFFFFF', style: 'dark' });
setStatusBarMode('light');

const info = await webtonative.deviceInfo();
console.log(info);

Important Notes

• Copy the above snippet exactly.
• Make sure it is appropriately indented for your file format.
• Save the file (Base44 will save automatically, but in case it prompts, save your file).

Step 4: Preview and Test Your App

• On the top bar, click on Preview to see your base44 react app function.
• Open your browser's Developer Tools (right-click > Inspect > Console tab) to check for logs like `[WTN], SDK loaded successfully!. This confirms it's working.

Step 5: Publish Your Changes Finally, when you are just done with your changes, click Publish in the upper right side to make the updates live. Share your app link to testers or export (e.g., ZIP, GitHub, or through the beta features).

Crucial Steps

WebToNative SDK APIs: Once your integration is complete, you can access native functionality through the window.WTN inside your React code. Customize Integration: Based on your project structure, your main layout or entry file may be different. Make sure that the SDK script is added to the appropriate file so it loads globally across your app.

For advanced integrations, visit https://docs.webtonative.com/

The WebToNative SDK is easy to add to your Base44 React application and is an effective method of enabling advanced native capabilities, better performance, and performance. It takes only a few steps to take your app beyond a simple web wrapper, which supports deep linking, increased security, and scalability in the future. It is with this integration that your Base44 app will really fill the gap between web and mobile, providing an experience to the users that is faster and more responsive.