feat:formbricks configurando formbricks

App.tsx

@@ -10,40 +10,10 @@ import {
   View,
 } from 'react-native';
 
-import {
+import {Colors} from 'react-native/Libraries/NewAppScreen';
-  Colors,
 
-} from 'react-native/Libraries/NewAppScreen';
+import ShowFormButton from './src/components/ShowFormButton';
 
-type SectionProps = PropsWithChildren<{
-  title: string;
-}>;
-
-function Section({children, title}: SectionProps): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-  return (
-    <View style={styles.sectionContainer}>
-      <Text
-        style={[
-          styles.sectionTitle,
-          {
-            color: isDarkMode ? Colors.white : Colors.black,
-          },
-        ]}>
-        {title}
-      </Text>
-      <Text
-        style={[
-          styles.sectionDescription,
-          {
-            color: isDarkMode ? Colors.light : Colors.dark,
-          },
-        ]}>
-        {children}
-      </Text>
-    </View>
-  );
-}
 
 function App(): React.JSX.Element {
   const isDarkMode = useColorScheme() === 'dark';
@@ -53,40 +23,28 @@ function App(): React.JSX.Element {
   };
 
   return (
-    <SafeAreaView style={backgroundStyle}>
+    <SafeAreaView style={styles.appcontainer}>
       <StatusBar
         barStyle={isDarkMode ? 'light-content' : 'dark-content'}
         backgroundColor={backgroundStyle.backgroundColor}
       />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
         <View
           style={{
             backgroundColor: isDarkMode ? Colors.black : Colors.white,
           }}>
+          <ShowFormButton />
         </View>
-      </ScrollView>
+
     </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
-  sectionContainer: {
+  appcontainer: {
-    marginTop: 32,
+    flex: 1,
-    paddingHorizontal: 24,
+    justifyContent: 'center',
-  },
+    alignItems: 'center',
-  sectionTitle: {
+    backgroundColor: 'blue',
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-  },
-  highlight: {
-    fontWeight: '700',
   },
 });
 

package-lock.json

@@ -8,9 +8,11 @@
       "name": "formbrickstest",
       "version": "0.0.1",
       "dependencies": {
+        "@formbricks/js": "^3.0.2",
         "@formbricks/react-native": "^1.3.1",
         "react": "18.3.1",
-        "react-native": "0.76.5"
+        "react-native": "0.76.5",
+        "react-native-webview": "^13.12.5"
       },
       "devDependencies": {
         "@babel/core": "^7.25.2",
@@ -2174,6 +2176,15 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@formbricks/js": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@formbricks/js/-/js-3.0.2.tgz",
+      "integrity": "sha512-AMKScnuFI2LkBP2GhN3JabuxRV9wftiLtTl33DlLhj42iem+FqWyKOs9o8jx7f+moqbB5qga5J378yx49yt9NQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "zod": "3.x"
+      }
+    },
     "node_modules/@formbricks/react-native": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@formbricks/react-native/-/react-native-1.3.1.tgz",
@@ -10853,7 +10864,6 @@
       "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-13.12.5.tgz",
       "integrity": "sha512-INOKPom4dFyzkbxbkuQNfeRG9/iYnyRDzrDkJeyvSWgJAW2IDdJkWFJBS2v0RxIL4gqLgHkiIZDOfiLaNnw83Q==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "escape-string-regexp": "^4.0.0",
         "invariant": "2.2.4"
@@ -12915,6 +12925,16 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.24.1",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.1.tgz",
+      "integrity": "sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }

package.json

@@ -10,9 +10,11 @@
     "test": "jest"
   },
   "dependencies": {
+    "@formbricks/js": "^3.0.2",
     "@formbricks/react-native": "^1.3.1",
     "react": "18.3.1",
-    "react-native": "0.76.5"
+    "react-native": "0.76.5",
+    "react-native-webview": "^13.12.5"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

src/components/ShowFormButton.tsx

@@ -0,0 +1,25 @@
+import React, {useEffect, useState} from 'react';
+import {StyleSheet, View, Button} from 'react-native';
+import FormbricksShow from '../features/Formbricks/Formbricks';
+
+function ShowFormButton(): React.JSX.Element {
+  const [isFormVisible, setIsFormVisible] = useState(false);
+
+  return (
+    <>
+      <View>
+        <Button
+          title="Exibir formulário"
+          onPress={() => {
+            console.log(isFormVisible);
+            setIsFormVisible(true);
+          }}
+        />
+        {isFormVisible && <FormbricksShow />}
+      </View>
+    </>
+  );
+}
+
+
+export default ShowFormButton;

src/features/Formbricks/Formbricks.tsx

@@ -1,17 +1,16 @@
-import React from "react";
+import React, { useEffect } from "react";
 
-import Formbricks from "@formbricks/react-native";
+import Formbricks, {} from "@formbricks/react-native";
 
 const config = {
-  environmentId: "<environment-id>",
+  environmentId: 'cm5g0a4t5000al001og25is38',
-  apiHost: "<api-host>",
+  apiHost: 'https://formbricks.central.gava.dev.br',
-  userId: "<user-id>",
 };
 
-export default function App() {
+export default function FormbricksShow(): React.JSX.Element {
+  
   return (
     <>
-      {/* Your app content */}
       <Formbricks initConfig={config} />
     </>
   );