react-native/apps/playground/src/app.tsx at 10c43670146a2eeadb9980c08fa3a2260cc9dbb9 · formbricks/react-native · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import Formbricks, {
  logout,
  setAttribute,
  setAttributes,
  setLanguage,
  setUserId,
  track,
} from "@formbricks/react-native";
import { StatusBar } from "expo-status-bar";
import type { JSX } from "react";
import { Button, LogBox, StyleSheet, Text, View } from "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_APP_URL) {
    throw new Error("EXPO_PUBLIC_APP_URL is required");
  }

  return (
    <View style={styles.container}>
      <Text>Formbricks React Native SDK Demo</Text>

      <View
        style={{
          display: "flex",
          flexDirection: "column",
          gap: 10,
        }}
      >
        <Button
          title="Trigger Code Action"
          onPress={() => {
            track("code").catch((error: unknown) => {
              // eslint-disable-next-line no-console -- logging is allowed in demo apps
              console.error("Error tracking event:", error);
            });
          }}
        />

        <Button
          title="Set userId"
          onPress={() => {
            setUserId("random-user-id").catch((error: unknown) => {
              // eslint-disable-next-line no-console -- logging is allowed in demo apps
              console.error("Error setting user id:", error);
            });
          }}
        />

        <Button
          title="Set User Attributess (multiple)"
          onPress={() => {
            setAttributes({
              testAttr: "attr-test",
              testAttr2: "attr-test-2",
              testAttr3: "attr-test-3",
              testAttr4: "attr-test-4",
            }).catch((error: unknown) => {
              // eslint-disable-next-line no-console -- logging is allowed in demo apps
              console.error("Error setting user attributes:", error);
            });
          }}
        />

        <Button
          title="Set User Attributes (single)"
          onPress={() => {
            setAttribute("testSingleAttr", "testSingleAttr").catch(
              (error: unknown) => {
                // eslint-disable-next-line no-console -- logging is allowed in demo apps
                console.error("Error setting user attributes:", error);
              },
            );
          }}
        />

        <Button
          title="Logout"
          onPress={() => {
            logout().catch((error: unknown) => {
              // eslint-disable-next-line no-console -- logging is allowed in demo apps
              console.error("Error logging out:", error);
            });
          }}
        />

        <Button
          title="Set Language (de)"
          onPress={() => {
            setLanguage("de").catch((error: unknown) => {
              // eslint-disable-next-line no-console -- logging is allowed in demo apps
              console.error("Error setting language:", error);
            });
          }}
        />
      </View>

      <StatusBar style="auto" />

      <Formbricks
        appUrl={process.env.EXPO_PUBLIC_APP_URL as string}
        environmentId={
          process.env.EXPO_PUBLIC_FORMBRICKS_ENVIRONMENT_ID as string
        }
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});