How to test an Adalo component in a React Native environment

Discover how to test Adalo components in a React Native environment

How to test an Adalo component in a React Native environment
Do not index
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.

We build and manage software integrations for SaaS companies

Focus on your business, we'll handle integrations

Book an intro call →

Written by

Lola
Lola

Lola is the founder of Lunch Pail Labs. She enjoys discussing product, SaaS integrations, and running a business. Feel free to connect with her on Twitter or LinkedIn.