How to test an Adalo component in a React Native environment

Do not index

When crafting components for Adalo, it's essential to conduct thorough mobile environment tests before releasing them to the marketplace or incorporating them into your apps. Recent updates to Adalo's publishing workflow might render the mobile previewer less reliable. This guide is crafted to assist developers in effective component testing within a development framework.

1. Set up a new React Native app

First, ensure your development environment is React Native-ready. Detailed setup instructions are available here.

Once your environment is prepped, initiate a new project using the command below. It's crucial to specify the version to align with Adalo's current React and React Native versions. At the time of writing this details the versions used by Adalo here.

npx react-native@0.72.5 init NameOfProject --version 0.72.5

2. Integrating your component

Next, transfer the component directory to the root of your newly created React Native project:

cp -R /localpath/to/adalo/component /current/project

After copying, execute npm install to integrate the component into your project.

3. Simulating props

To simulate the Adalo environment, we'll adjust app.tsx to mirror the props expected by our component:

Rename app.tsx to app.jsx and delete the contents of the file and import your component and react:

import React from 'react';
import { Componentname } from '/src/components';

Render your component with the desired props, don’t forget default props like “editor” or “_height” if your component relies on them:

import React from 'react';
import { Componentname } from '/src/components';

const App = () => {
  return <Componentname prop1="blue" prop2="yellow" editor={false} _height={700} />;
};

export default App;

This setup allows for direct testing and tweaking of your component, bypassing the need for an initial build—crucial for cross-platform library compatibility.

Troubleshooting and Tips

As of this writing, Adalo's framework is based on React Native 0.72.5 and React 18.2. Stay updated with the latest versions via Adalo forums.

Consult error logs for insights on dependency conflicts or necessary adjustments during publishing.

That concludes our guide! Developing a component for Adalo can be a strategic endeavor. For insights or support on navigating Adalo's component ecosystem, Lunch Pail Labs is here to help. To explore collaboration opportunities, schedule an introductory call with us.

How to test an Adalo component in a React Native environment

1. Set up a new React Native app

2. Integrating your component

3. Simulating props

Troubleshooting and Tips

We build third-party apps and integrations

Let's keep in touch