diff --git a/apps/demo-react-native/.env.example b/apps/demo-react-native/.env.example new file mode 100644 index 0000000000..3a2d97bdc4 --- /dev/null +++ b/apps/demo-react-native/.env.example @@ -0,0 +1,2 @@ +EXPO_PUBLIC_API_HOST=http://192.168.178.20:3000 +EXPO_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=clzr04nkd000bcdl110j0ijyq diff --git a/apps/demo-react-native/.eslintrc.js b/apps/demo-react-native/.eslintrc.js new file mode 100644 index 0000000000..4d8dbbccec --- /dev/null +++ b/apps/demo-react-native/.eslintrc.js @@ -0,0 +1,7 @@ +module.exports = { + extends: ["@formbricks/eslint-config/react.js"], + parserOptions: { + project: "tsconfig.json", + tsconfigRootDir: __dirname, + }, +}; diff --git a/apps/demo-react-native/.gitignore b/apps/demo-react-native/.gitignore new file mode 100644 index 0000000000..05647d55c7 --- /dev/null +++ b/apps/demo-react-native/.gitignore @@ -0,0 +1,35 @@ +# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files + +# dependencies +node_modules/ + +# Expo +.expo/ +dist/ +web-build/ + +# Native +*.orig.* +*.jks +*.p8 +*.p12 +*.key +*.mobileprovision + +# Metro +.metro-health-check* + +# debug +npm-debug.* +yarn-debug.* +yarn-error.* + +# macOS +.DS_Store +*.pem + +# local env files +.env*.local + +# typescript +*.tsbuildinfo diff --git a/apps/demo-react-native/.npmrc b/apps/demo-react-native/.npmrc new file mode 100644 index 0000000000..e69de29bb2 diff --git a/apps/demo-react-native/app.json b/apps/demo-react-native/app.json new file mode 100644 index 0000000000..b7701d49b3 --- /dev/null +++ b/apps/demo-react-native/app.json @@ -0,0 +1,34 @@ +{ + "expo": { + "name": "react-native-demo", + "slug": "react-native-demo", + "version": "1.0.0", + "orientation": "portrait", + "icon": "./assets/icon.png", + "userInterfaceStyle": "light", + "splash": { + "image": "./assets/splash.png", + "resizeMode": "contain", + "backgroundColor": "#ffffff" + }, + "jsEngine": "hermes", + "assetBundlePatterns": ["**/*"], + "ios": { + "supportsTablet": true, + "infoPlist": { + "NSCameraUsageDescription": "Take pictures for certain activities.", + "NSPhotoLibraryUsageDescription": "Select pictures for certain activities.", + "NSMicrophoneUsageDescription": "Need microphone access for recording videos." + } + }, + "android": { + "adaptiveIcon": { + "foregroundImage": "./assets/adaptive-icon.png", + "backgroundColor": "#ffffff" + } + }, + "web": { + "favicon": "./assets/favicon.png" + } + } +} diff --git a/apps/demo-react-native/assets/adaptive-icon.png b/apps/demo-react-native/assets/adaptive-icon.png new file mode 100644 index 0000000000..03d6f6b6c6 Binary files /dev/null and b/apps/demo-react-native/assets/adaptive-icon.png differ diff --git a/apps/demo-react-native/assets/favicon.png b/apps/demo-react-native/assets/favicon.png new file mode 100644 index 0000000000..e75f697b18 Binary files /dev/null and b/apps/demo-react-native/assets/favicon.png differ diff --git a/apps/demo-react-native/assets/icon.png b/apps/demo-react-native/assets/icon.png new file mode 100644 index 0000000000..a0b1526fc7 Binary files /dev/null and b/apps/demo-react-native/assets/icon.png differ diff --git a/apps/demo-react-native/assets/splash.png b/apps/demo-react-native/assets/splash.png new file mode 100644 index 0000000000..0e89705a94 Binary files /dev/null and b/apps/demo-react-native/assets/splash.png differ diff --git a/apps/demo-react-native/babel.config.js b/apps/demo-react-native/babel.config.js new file mode 100644 index 0000000000..29433509d7 --- /dev/null +++ b/apps/demo-react-native/babel.config.js @@ -0,0 +1,6 @@ +module.exports = function babel(api) { + api.cache(true); + return { + presets: ["babel-preset-expo"], + }; +}; diff --git a/apps/demo-react-native/index.js b/apps/demo-react-native/index.js new file mode 100644 index 0000000000..c2ccbfc1d6 --- /dev/null +++ b/apps/demo-react-native/index.js @@ -0,0 +1,7 @@ +import { registerRootComponent } from "expo"; +import { LogBox } from "react-native"; +import App from "./src/app"; + +registerRootComponent(App); + +LogBox.ignoreAllLogs(); diff --git a/apps/demo-react-native/metro.config.js b/apps/demo-react-native/metro.config.js new file mode 100644 index 0000000000..6bd167c023 --- /dev/null +++ b/apps/demo-react-native/metro.config.js @@ -0,0 +1,21 @@ +// Learn more https://docs.expo.io/guides/customizing-metro +const path = require("node:path"); +const { getDefaultConfig } = require("expo/metro-config"); + +// Find the workspace root, this can be replaced with `find-yarn-workspace-root` +const workspaceRoot = path.resolve(__dirname, "../.."); +const projectRoot = __dirname; + +const config = getDefaultConfig(projectRoot); + +// 1. Watch all files within the monorepo +config.watchFolders = [workspaceRoot]; +// 2. Let Metro know where to resolve packages, and in what order +config.resolver.nodeModulesPaths = [ + path.resolve(projectRoot, "node_modules"), + path.resolve(workspaceRoot, "node_modules"), +]; +// 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths` +config.resolver.disableHierarchicalLookup = true; + +module.exports = config; diff --git a/apps/demo-react-native/package.json b/apps/demo-react-native/package.json new file mode 100644 index 0000000000..186d52e822 --- /dev/null +++ b/apps/demo-react-native/package.json @@ -0,0 +1,28 @@ +{ + "name": "@formbricks/demo-react-native", + "version": "1.0.0", + "main": "./index.js", + "scripts": { + "dev": "expo start", + "android": "expo start --android", + "ios": "expo start --ios", + "web": "expo start --web", + "eject": "expo eject", + "clean": "rimraf .turbo node_modules .expo" + }, + "dependencies": { + "@formbricks/js": "workspace:*", + "@formbricks/react-native": "workspace:*", + "expo": "^51.0.26", + "expo-status-bar": "~1.12.1", + "react": "^18.2.0", + "react-native": "^0.74.4", + "react-native-webview": "13.8.6" + }, + "devDependencies": { + "@babel/core": "^7.25.2", + "@types/react": "~18.2.79", + "typescript": "^5.3.3" + }, + "private": true +} diff --git a/apps/demo-react-native/src/app.tsx b/apps/demo-react-native/src/app.tsx new file mode 100644 index 0000000000..829fe1637c --- /dev/null +++ b/apps/demo-react-native/src/app.tsx @@ -0,0 +1,52 @@ +import { StatusBar } from "expo-status-bar"; +import { Button, LogBox, StyleSheet, Text, View } from "react-native"; +import Formbricks, { track } from "@formbricks/react-native"; + +LogBox.ignoreAllLogs(); + +export default function App(): JSX.Element { + if (!process.env.EXPO_PUBLIC_FORMBRICKS_ENVIRONMENT_ID) { + throw new Error("EXPO_PUBLIC_FORMBRICKS_ENVIRONMENT_ID is required"); + } + + if (!process.env.EXPO_PUBLIC_API_HOST) { + throw new Error("EXPO_PUBLIC_API_HOST is required"); + } + + const config = { + environmentId: process.env.EXPO_PUBLIC_FORMBRICKS_ENVIRONMENT_ID, + apiHost: process.env.EXPO_PUBLIC_API_HOST, + userId: "random user id", + attributes: { + language: "en", + testAttr: "attr-test", + }, + }; + + return ( + + Formbricks React Native SDK Demo + +