React native / driver expects node-specific modules, breaks in React Native

Before I describe the issues that I ran into when working with React Native with and without Expo, I will share how I was able to connect to my SQLite Cloud database using Expo. This will help provide some context for the issue with React Native.

Solution for connection to SQLite Cloud with Expo

I was able to connect to my SQLite Cloud database using Expo by passing an object to the Database instance where I specified that I wanted to use a web socket to connect.

{
   connectionstring: '<connection-string>',
   usewebsocket: true,
}

Issue I ran into when working with Expo before specifying that I wanted to connect via web socket

Previously to passing the object with the connection string to the Database instance and specifying that I wanted to use a web socket I ran into the following issue when running new Database('<connection-string>'). I got a console warning TypeError: tls.connect is not a function (it is undefined) when running the application and trying to connect to the SQLite Cloud database.

I followed the stack trace and logged the value of tls in the @sqlitecloud/drivers/lib/drivers/connection-tls.js file. The value of tls that is logging is {"default": {}}. Interestingly when running the app, the app worked on web but it didn’t work when using an ios Simulator or on my iphone. Here's a video that I created when I first ran into the issue.

Cause of the error

I did some research and it seems some Node core modules such as tls, and http, aren’t automatically available in React Native. However our JS client assumes that they'll be available.

Issue when working with React Native without Expo

When I tried to set up a React Native app without Expo I ran into an Invalid connection string error because url parsing logic failed in React Native. I followed the stack trace to @sqlitecloud/drivers/lib/drivers/utilities.js to the parseconnectionstring function. I added some console.logs to debug and noticed that the URL class seems to behave differently in React Native. In React Native, we try to execute the statement url.searchparams.forEach, but url.searchparams isn’t an array in React Native instead is an object {"_searchParams": []} so it doesn’t have a forEach method. In contrast, when I ran the following code in my browser console, it was clear that url.searchparams is an array in the browser.

In short, I wasn’t able to connect to the database in React Native. I tried connecting both ways 1. passing the connection string to the Database instance and 2. passing an object to the Database instance with the connection string and the usewebsocket:true property.

sqlitecloud / sqlitecloud-js