feat: react native sdk (wip)

[ty-kerr]

• Adds a React Native SDK that allows developer to integrate Formbricks in their RN mobile application.
• Added a new app in /apps called mobile-demo to allow developers to test our the SDK while developing it and potential users to try the SDK. In the demo, expo is used to build and run the application.
• Created a new package called @formbricks/react-native that holds the main code for the SDK. I tried to replicate a lot of the stuff from the JS package and keep the implementation similar. These two package share a lot of code, so consolidating the duplicate code could be useful (a todo). The SDK currently has a default export of the main component to be used in the mobile application called Formbricks. Inside this component, it setups the SDK and connects to the web service, similarly to the init function from the JS package. Additionally, I created a surveyStore class to store the surveyState from the sync api and used useExternalSyncStore to subscribe to the changes in the state to render the webview that displays the component. The webview takes in the survey information and uses it to pass down information to the webpage inside the webview. A HTML string is used by the webview to load the survey package and renders the survey. The main communication between react native and webview is done through the onMessage callback prop of the webview component, however only strings can be transferred. Hence I serialized all of the paramaters of functions like onFinished, onResponseUpdate etc and pass them back to react-native to continue function's implementation and logic.
• tsup is used to bundle the sdk.

Whats working:

• Fetch and display based on userId and Attributes survey.
• Tracking actions.
• Submitting responses.
• Recontact options, response options etc.

To dos:

• File upload question (I tried to convert the file to base64 in the webview and back to file in react native but did not seem to work)
• Datepicker question (stuck in loading state.)
• New Session tracking
• UI for larger screens like tablets and ipads.
• Update to web UI for mobile sdk options in create/edit survey.

Feel free to contact me to ask for more information.

How should this be tested?

1. Download Expo go on mobile device
2. In App.tsx of mobile-demo application, update intiialization config with your config.
3. Build and serve surveys package. Build React-Native SDK, run demo project with pm dev
4. Scan QR Code from expo go to run the app on your phone.
5. Press Trigger Survey

Checklist

Required

• [X ] Filled out the "How to test" section in this PR
• [ X] Read How we Code at Formbricks
• [ X] Self-reviewed my own code
• Commented on my code in hard-to-understand bits
• Ran pnpm build
• Checked for warnings, there are none
• Removed all console.logs
• Merged the latest changes from main onto my branch with git pull origin main
• My changes don't cause any responsiveness issues
• First PR at Formbricks? Please sign the CLA! Without it we wont be able to merge it 🙏

Appreciated

• If a UI change was made: Added a screen recording or screenshots to this PR
• Updated the Formbricks Docs if changes were necessary

[vercel]

Someone is attempting to deploy a commit to the formbricks Team on Vercel.

A member of the Team first needs to authorize it.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
2 out of 3 committers have signed the CLA.

✅ Dhruwang
✅ ty-kerr
❌ tykerr

---

tykerr seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[github-actions]

Thank you for following the naming conventions for pull request titles! 🙏